{"_id":"569c06cdd326c80d0068f735","parentDoc":null,"project":"55a6e72e8cc73e0d00096635","category":{"_id":"569c8b7c15bb390d00db6f9d","pages":["56a42c3295be510d00cb9c52"],"project":"55a6e72e8cc73e0d00096635","version":"55a6e72f8cc73e0d00096638","__v":1,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-01-18T06:51:40.329Z","from_sync":false,"order":6,"slug":"technology-overview","title":"Technology Stack"},"user":"55a6caa022cfa321008e01d6","__v":85,"version":{"_id":"55a6e72f8cc73e0d00096638","project":"55a6e72e8cc73e0d00096635","hasReference":false,"__v":29,"hasDoc":true,"createdAt":"2015-07-15T23:05:19.125Z","releaseDate":"2015-07-15T23:05:19.125Z","categories":["55a6e7308cc73e0d00096639","55b7ed07aea7c8190058badb","5604567c0c78b00d0039b191","5605e6f23a93940d002b3e4a","5605f2bba4574a0d00811365","5605f309a4574a0d00811366","5608e3b98aedf50d0004cf8f","5608e4318aedf50d0004cf90","5608e6b5a7cc2f0d00d9754d","5608e6d331beb60d001b6560","5608f879a7cc2f0d00d97580","560b097887b71d0d000d3bd9","560b13cbafa0990d00979545","560b5cbec341310d00de2a01","560b5cd0c341310d00de2a02","566a35b81e08750d00a0c49b","566a3e8503b4b20d00d02a4a","567889d307bf6a0d0083edc8","569c8b7c15bb390d00db6f9d","56b254dc65ddf50d0076ba8f","57a8ebc4cdeea20e001d2a63","57e48a4000c8680e00fae6e7","5808216773557d0f00a1e428","58105ad54a8aa50f00aa4cba","58105bf298aea40f00afa3ba","58105f548a4aed0f00d67536","581061b898aea40f00afa3be","584b3de7e5f3a42300df6ef7","596839a75965d400155bb750"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-01-17T21:25:33.601Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"[block:html]\n{\n  \"html\": \"If you've viewed our high-level technology <a href=\\\"/docs/stencil-technology-base\\\">summary</a>, or our hands-on <NOBR><a href=\\\"/docs/developing-on-the-stencil-framework-quick-start\\\">Development Quick Start</a>,</nobr> this page is designed as a bridge to the remainder of the Stencil documentation. It offers a deeper overview of Stencil's:<br>\\n\\n<ul>\\n <li><a href=\\\"#Sass\\\">Sass/SCSS Support and Design Patterns</a></li>\\n <!-- <li><a href=\\\"#Design\\\">Design Patterns</a></li> -->\\n <!-- <li><a href=\\\"#Settings\\\">Settings</a></li> -->\\n <li><a href=\\\"#Config\\\">Theme Editor and Theme Variations</a></li>\\n <!-- <li><a href=\\\"#Variations\\\">Variations</a></li> -->\\n <li><a href=\\\"#JS\\\">JavaScript Libraries</a></li>\\n <li><a href=\\\"#Events\\\">Events</a></li>\\n <li><a href=\\\"#Next\\\">Next Steps</a></li>\\n</ul>\\n\\n<H2> <A NAME=\\\"Sass\\\"></a> Sass/CSS Support and Design Patterns</h2>\\n\\nStencil's native support for <a href=\\\"http://sass-lang.com/documentation/file.SASS_REFERENCE.html\\\">Sass</a>/SCSS means that you can nest properties, variables, and mixins. Stencil's Cornerstone base theme uses a BigCommerce pattern library called Citadel, which is built on top of the ZURB <a href=\\\"http://foundation.zurb.com/showcase/about.html\\\">Foundation</a> framework, version 5.5.3.\\n\\nFoundation offers you the framework for creating a responsive theme. You have the option of swapping out Foundation for another framework, although doing so would require significant work.\\n\\n<H5> <A NAME=\\\"Design\\\"></a> Notes about Citadel: </h5>\\n\\n<ul>\\n <li>Citadel extends Foundation’s mixins and components to provide Stencil’s own mixins, extensible components, and utilities. These include drop-down lists, forms, and similar resources.<p></p>\\n  </li>\\n  \\n <li>Citadel resources are named according to <a href=\\\"http://getbem.com/naming/\\\">BEM</a> and <a href=\\\"https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md\\\">SUIT CSS</a> conventions. Classes are named functionally, rather than based on visual presentation or content. Our style guide is published <a href=\\\"https://github.com/bigcommerce/sass-style-guide\\\">here</a>. <p></p>\\n  </li>\\n  \\n <li>Citadel assets bundled with Cornerstone are located in these Stencil subdirectories: <br>\\n \\n<span class=\\\"inline-code\\\"> &lt;theme-name&gt;/assets/scss/settings/citadel/ </span> <br>\\n<span class=\\\"inline-code\\\"> &lt;theme-name&gt;/assets/scss/components/citadel/ </span><p></p>\\n </li>\\n</ul>\\n\\n<H5> <A NAME=\\\"Design\\\"></a> Notes about Foundation: </h5>\\n<ul>\\n <li>Stencil specifically supports version <a href=\\\"https://github.com/zurb/foundation-sites/releases/tag/v5.5.3\\\">5.5.3</a> of Foundation. (Documentation <a href=\\\"http://foundation.zurb.com/sites/docs/v/5.5.3/\\\">here</a>.)  <p></p>\\n  </li>\\n </li>\\n  <li>We do not support Foundation 6.x, due to breaking changes introduced between versions 5.x and 6.x. <p></p>\\n  </li>\\n  <li>Foundation assets bundled with Cornerstone are located in these subdirectories: <br>\\n\\n<span class=\\\"inline-code\\\"> &lt;theme-name&gt;/assets/scss/settings/foundation/ </span> <br>\\n<span class=\\\"inline-code\\\"> &lt;theme-name&gt;/assets/scss/components/foundation/ </span> <p></p>\\n  </li>\\n</ul>\\n\\n\\n<H5> More Info: </h5>\\n<ul>\\n  <li>For more detailed information about the Citadel and Foundation SCSS components, and their naming conventions, please see <a href=\\\"https://stencil.bigcommerce.com/docs/componentsdesign-patterns\\\">Components/Design Patterns</a>.</li>\\n</ul>\\n\\n\\n<!-- <H2> <A NAME=\\\"Settings\\\"></a> Settings </h2>\\n\\nYour theme's <span class=\\\"inline-code\\\">/settings/</span> subdirectory manages SCSS variables from your chosen framework, including overrides of their default values.\\n\\n<H5> More Info: </h5>\\n<ul>\\n <li><a href=\\\"/docs/settings-directory\\\">Settings Directory</a></li>\\n</ul> -->\\n\\n\\n<H2> <A NAME=\\\"Config\\\"></a> Theme Editor and Theme Variations </h2>\\n\\nStencil's Theme Editor graphical interface enables store administrators to make styling changes to the theme currently applied to their storefront. As a theme developer, you define which style settings appear here. \\n\\nTwo JSON files in your Stencil theme's home directory, <span class=\\\"inline-code\\\">config.json</span> and <span class=\\\"inline-code\\\">schema.json</span>, govern which settings the theme will expose.<br>\\n\\n<p></p>The <span class=\\\"inline-code\\\">config.json</span> file's key/value pairs define:\\n\\n<ul>\\n <li>Global, theme-wide variables\\n  </li>\\n  \\n <li>Theme <a href=\\\"#Variations\\\">variations</a>\\n  </li>\\n  \\n <li>Variation-specififc variables\\n </li>\\n</ul>\\n\\n\\n<p></p>The <span class=\\\"inline-code\\\">schema.json</span> file specifies which theme settings will be accessible through the Theme Editor GUI. <NOBR>Your entries</nobr> here also define the graphical controls presented to merchants for each setting.\\n\\n<!-- <H5> More Info: </h5>\\n<ul>\\n <li><a href=\\\"/docs/configjson-reference\\\">config.json Reference</a></li>\\n <li><a href=\\\"/docs/configjsonhandlebarsfront-matter-interactions\\\">config.json&ndash;Resource Interactions</a> (hands-on tutorial)</li>\\n <li><a href=\\\"/docs/schemajson-metadata-for-theme-editor\\\">schema.json Reference</a></li>\\n</ul> -->\\n\\n\\n<H3> <A NAME=\\\"Variations\\\"></a> Theme Variations </h3>\\n\\nEach Stencil theme can contain one to four variations. You can optimize individual variations for specific markets, audiences and styles – while still managing and distributing all of these variations as one theme.\\n\\n<H5> More Info: </h5>\\n<ul>\\n <li><a href=\\\"/docs/configjson-reference#config-variations\\\">config.json Reference &ndash; variations</a></li>\\n <li><a href=\\\"/docs/schemajson-metadata-for-theme-editor#schema-json-UI\\\">schema.json Reference &ndash; variations</a></li>\\n <li><a href=\\\"/docs/configjsonhandlebarsfront-matter-interactions\\\">config.json&ndash;Resource Interactions</a> (hands-on tutorial)</li>\\n</ul>\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<H2> <A NAME=\\\"JS\\\"></a> JavaScript Libraries </h2>\\n\\nYour JavaScript options extend beyond Stencil's client-side <span class=\\\"inline-code\\\">stencil-utils</span> JavaScript library. You can inject configured variables into your client-side JavaScript, using Stencil's <span class=\\\"inline-code\\\">inject</span> custom <a href=\\\"/docs/custom-handlebars-helpers\\\">Handlebars helper</a>, as shown in this snippet:<br>\\n\\n<p></p><pre>\\n{{inject 'productThumbSize' theme_settings.productthumb_size}}\\n</pre>\\n\\nYou can also use the <a href=\\\"https://www.npmjs.com/\\\">npm</a> package <!-- <a href=\\\"http://jspm.io/\\\">jspm</a> dependency --> manager to add custom JavaScript libraries.\\n\\n<H5> More Info: </h5>\\n<ul>\\n <li><a href=\\\"/docs/the-stencil-utils-package\\\">stencil-utils Overview</a></li>\\n <li><a href=\\\"/docs/stencil-utils-api-reference\\\">stencil-utils API Reference</a></li>\\n <li><a href=\\\"/docs/customizing-javascript\\\">Customizing JavaScript</a> (hands-on tutorial)</li>\\n</ul>\\n\\n<H2> <A NAME=\\\"Events\\\"></a> Events </h2>\\n\\nThis documentation includes several examples of using event hooks to trigger defined events, based on shopper behavior.\\n\\n<H5> More Info: </h5>\\n<ul>\\n <li><a href=\\\"/docs/hook-usage-example-1-cookie-notification\\\">Hook Example 1: Cookie Notification</a></li>\\n <li><a href=\\\"/docs/hook-example-2-cart-dialog\\\">Hook Example 2: Cart Dialog</a></li>\\n <li><a href=\\\"/docs/remote-api-example\\\">Remote API Example</a></li>\\n <li><a href=\\\"/docs/data-tagsevent-hooks-reference\\\">Data Tags/Event Hooks Reference</a></li>\\n</ul>\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Before You Customize\",\n  \"body\": \"The Stencil framework is designed to support your incorporation of custom Sass/SCSS frameworks and JavaScript libraries. However, BigCommerce does not offer technical assistance on substitutions for, or customized versions of, Stencil's default dependencies.\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<H2> <A NAME=\\\"Next\\\"></a> Next Steps </h2>\\nWe invite you to proceed to our:\\n\\n<ul>\\n  <li> <a href=\\\"/docs/compilation\\\">Templates, Partials, and Compilation</a> overview. \\n  </li>\\n<li> <a href=\\\"/docs/target-browsers\\\">Target Browsers</a> list.\\n  </li>\\n<li> <a href=\\\"/docs/configjson-reference\\\">Configuration</a> reference.\\n  </li>\\n<li> <a href=\\\"/docs/using-yaml-front-matter\\\">Front-matter</a> overview of YAML conventions. \\n  </li>\\n<li> Front-matter <a href=\\\"/docs/front-matter-variables\\\">attributes</a> reference. \\n  </li>\\n<li> <a href=\\\"/docs/developing-with-handlebars\\\">Handlebars</a>  development overview. \\n  </li>\\n<li> <a href=\\\"/docs/stencil-object-model\\\">Objects</a> reference.\\n  </li>\\n</ul>\"\n}\n[/block]","excerpt":"Making the most of this documentation","slug":"technology-overview","type":"basic","title":"Technology Overview"}

Technology Overview

Making the most of this documentation

[block:html] { "html": "If you've viewed our high-level technology <a href=\"/docs/stencil-technology-base\">summary</a>, or our hands-on <NOBR><a href=\"/docs/developing-on-the-stencil-framework-quick-start\">Development Quick Start</a>,</nobr> this page is designed as a bridge to the remainder of the Stencil documentation. It offers a deeper overview of Stencil's:<br>\n\n<ul>\n <li><a href=\"#Sass\">Sass/SCSS Support and Design Patterns</a></li>\n <!-- <li><a href=\"#Design\">Design Patterns</a></li> -->\n <!-- <li><a href=\"#Settings\">Settings</a></li> -->\n <li><a href=\"#Config\">Theme Editor and Theme Variations</a></li>\n <!-- <li><a href=\"#Variations\">Variations</a></li> -->\n <li><a href=\"#JS\">JavaScript Libraries</a></li>\n <li><a href=\"#Events\">Events</a></li>\n <li><a href=\"#Next\">Next Steps</a></li>\n</ul>\n\n<H2> <A NAME=\"Sass\"></a> Sass/CSS Support and Design Patterns</h2>\n\nStencil's native support for <a href=\"http://sass-lang.com/documentation/file.SASS_REFERENCE.html\">Sass</a>/SCSS means that you can nest properties, variables, and mixins. Stencil's Cornerstone base theme uses a BigCommerce pattern library called Citadel, which is built on top of the ZURB <a href=\"http://foundation.zurb.com/showcase/about.html\">Foundation</a> framework, version 5.5.3.\n\nFoundation offers you the framework for creating a responsive theme. You have the option of swapping out Foundation for another framework, although doing so would require significant work.\n\n<H5> <A NAME=\"Design\"></a> Notes about Citadel: </h5>\n\n<ul>\n <li>Citadel extends Foundation’s mixins and components to provide Stencil’s own mixins, extensible components, and utilities. These include drop-down lists, forms, and similar resources.<p></p>\n </li>\n \n <li>Citadel resources are named according to <a href=\"http://getbem.com/naming/\">BEM</a> and <a href=\"https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md\">SUIT CSS</a> conventions. Classes are named functionally, rather than based on visual presentation or content. Our style guide is published <a href=\"https://github.com/bigcommerce/sass-style-guide\">here</a>. <p></p>\n </li>\n \n <li>Citadel assets bundled with Cornerstone are located in these Stencil subdirectories: <br>\n \n<span class=\"inline-code\"> &lt;theme-name&gt;/assets/scss/settings/citadel/ </span> <br>\n<span class=\"inline-code\"> &lt;theme-name&gt;/assets/scss/components/citadel/ </span><p></p>\n </li>\n</ul>\n\n<H5> <A NAME=\"Design\"></a> Notes about Foundation: </h5>\n<ul>\n <li>Stencil specifically supports version <a href=\"https://github.com/zurb/foundation-sites/releases/tag/v5.5.3\">5.5.3</a> of Foundation. (Documentation <a href=\"http://foundation.zurb.com/sites/docs/v/5.5.3/\">here</a>.) <p></p>\n </li>\n </li>\n <li>We do not support Foundation 6.x, due to breaking changes introduced between versions 5.x and 6.x. <p></p>\n </li>\n <li>Foundation assets bundled with Cornerstone are located in these subdirectories: <br>\n\n<span class=\"inline-code\"> &lt;theme-name&gt;/assets/scss/settings/foundation/ </span> <br>\n<span class=\"inline-code\"> &lt;theme-name&gt;/assets/scss/components/foundation/ </span> <p></p>\n </li>\n</ul>\n\n\n<H5> More Info: </h5>\n<ul>\n <li>For more detailed information about the Citadel and Foundation SCSS components, and their naming conventions, please see <a href=\"https://stencil.bigcommerce.com/docs/componentsdesign-patterns\">Components/Design Patterns</a>.</li>\n</ul>\n\n\n<!-- <H2> <A NAME=\"Settings\"></a> Settings </h2>\n\nYour theme's <span class=\"inline-code\">/settings/</span> subdirectory manages SCSS variables from your chosen framework, including overrides of their default values.\n\n<H5> More Info: </h5>\n<ul>\n <li><a href=\"/docs/settings-directory\">Settings Directory</a></li>\n</ul> -->\n\n\n<H2> <A NAME=\"Config\"></a> Theme Editor and Theme Variations </h2>\n\nStencil's Theme Editor graphical interface enables store administrators to make styling changes to the theme currently applied to their storefront. As a theme developer, you define which style settings appear here. \n\nTwo JSON files in your Stencil theme's home directory, <span class=\"inline-code\">config.json</span> and <span class=\"inline-code\">schema.json</span>, govern which settings the theme will expose.<br>\n\n<p></p>The <span class=\"inline-code\">config.json</span> file's key/value pairs define:\n\n<ul>\n <li>Global, theme-wide variables\n </li>\n \n <li>Theme <a href=\"#Variations\">variations</a>\n </li>\n \n <li>Variation-specififc variables\n </li>\n</ul>\n\n\n<p></p>The <span class=\"inline-code\">schema.json</span> file specifies which theme settings will be accessible through the Theme Editor GUI. <NOBR>Your entries</nobr> here also define the graphical controls presented to merchants for each setting.\n\n<!-- <H5> More Info: </h5>\n<ul>\n <li><a href=\"/docs/configjson-reference\">config.json Reference</a></li>\n <li><a href=\"/docs/configjsonhandlebarsfront-matter-interactions\">config.json&ndash;Resource Interactions</a> (hands-on tutorial)</li>\n <li><a href=\"/docs/schemajson-metadata-for-theme-editor\">schema.json Reference</a></li>\n</ul> -->\n\n\n<H3> <A NAME=\"Variations\"></a> Theme Variations </h3>\n\nEach Stencil theme can contain one to four variations. You can optimize individual variations for specific markets, audiences and styles – while still managing and distributing all of these variations as one theme.\n\n<H5> More Info: </h5>\n<ul>\n <li><a href=\"/docs/configjson-reference#config-variations\">config.json Reference &ndash; variations</a></li>\n <li><a href=\"/docs/schemajson-metadata-for-theme-editor#schema-json-UI\">schema.json Reference &ndash; variations</a></li>\n <li><a href=\"/docs/configjsonhandlebarsfront-matter-interactions\">config.json&ndash;Resource Interactions</a> (hands-on tutorial)</li>\n</ul>" } [/block] [block:html] { "html": "<H2> <A NAME=\"JS\"></a> JavaScript Libraries </h2>\n\nYour JavaScript options extend beyond Stencil's client-side <span class=\"inline-code\">stencil-utils</span> JavaScript library. You can inject configured variables into your client-side JavaScript, using Stencil's <span class=\"inline-code\">inject</span> custom <a href=\"/docs/custom-handlebars-helpers\">Handlebars helper</a>, as shown in this snippet:<br>\n\n<p></p><pre>\n{{inject 'productThumbSize' theme_settings.productthumb_size}}\n</pre>\n\nYou can also use the <a href=\"https://www.npmjs.com/\">npm</a> package <!-- <a href=\"http://jspm.io/\">jspm</a> dependency --> manager to add custom JavaScript libraries.\n\n<H5> More Info: </h5>\n<ul>\n <li><a href=\"/docs/the-stencil-utils-package\">stencil-utils Overview</a></li>\n <li><a href=\"/docs/stencil-utils-api-reference\">stencil-utils API Reference</a></li>\n <li><a href=\"/docs/customizing-javascript\">Customizing JavaScript</a> (hands-on tutorial)</li>\n</ul>\n\n<H2> <A NAME=\"Events\"></a> Events </h2>\n\nThis documentation includes several examples of using event hooks to trigger defined events, based on shopper behavior.\n\n<H5> More Info: </h5>\n<ul>\n <li><a href=\"/docs/hook-usage-example-1-cookie-notification\">Hook Example 1: Cookie Notification</a></li>\n <li><a href=\"/docs/hook-example-2-cart-dialog\">Hook Example 2: Cart Dialog</a></li>\n <li><a href=\"/docs/remote-api-example\">Remote API Example</a></li>\n <li><a href=\"/docs/data-tagsevent-hooks-reference\">Data Tags/Event Hooks Reference</a></li>\n</ul>" } [/block] [block:callout] { "type": "warning", "title": "Before You Customize", "body": "The Stencil framework is designed to support your incorporation of custom Sass/SCSS frameworks and JavaScript libraries. However, BigCommerce does not offer technical assistance on substitutions for, or customized versions of, Stencil's default dependencies." } [/block] [block:html] { "html": "<H2> <A NAME=\"Next\"></a> Next Steps </h2>\nWe invite you to proceed to our:\n\n<ul>\n <li> <a href=\"/docs/compilation\">Templates, Partials, and Compilation</a> overview. \n </li>\n<li> <a href=\"/docs/target-browsers\">Target Browsers</a> list.\n </li>\n<li> <a href=\"/docs/configjson-reference\">Configuration</a> reference.\n </li>\n<li> <a href=\"/docs/using-yaml-front-matter\">Front-matter</a> overview of YAML conventions. \n </li>\n<li> Front-matter <a href=\"/docs/front-matter-variables\">attributes</a> reference. \n </li>\n<li> <a href=\"/docs/developing-with-handlebars\">Handlebars</a> development overview. \n </li>\n<li> <a href=\"/docs/stencil-object-model\">Objects</a> reference.\n </li>\n</ul>" } [/block]