{"_id":"55a6e7318cc73e0d0009663b","project":"55a6e72e8cc73e0d00096635","user":"55a6caa022cfa321008e01d6","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"},"parentDoc":null,"__v":94,"category":{"_id":"55b7ed07aea7c8190058badb","pages":["55b7edb7568be2230092bc34","5660974de163310d006b1954","569c05661719050d00025af4","569c06cdd326c80d0068f735","569d7e083dbdc20d005feeda"],"project":"55a6e72e8cc73e0d00096635","version":"55a6e72f8cc73e0d00096638","__v":5,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-07-28T20:58:47.836Z","from_sync":false,"order":0,"slug":"welcome-to-stencil","title":"Welcome to Stencil"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-07-15T23:05:21.010Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"[block:html]\n{\n  \"html\": \"This entry includes:\\n<ul>\\n<li><a href=\\\"#Design\\\">Design Philosophy</a></li>\\n<li><a href=\\\"#New\\\">New Options</a></li>\\n<li><a href=\\\"#GetStart\\\">Getting Started</a></li>\\n<li><a href=\\\"#StoreFeatures\\\">About Storefront Features</a></li>\\n<li><a href=\\\"#Blueprint\\\">Legacy Framework Documentation</a></li>\\n<li><a href=\\\"#Videos\\\">Video Demonstrations</a></li>\\n</ul>\\n\\n\\n<H2> <A NAME=\\\"Design\\\"></a> Design Philosophy </h2>\\n\\n<img style=\\\"float: right; margin: 0px 0px 0px 30px;\\\" src=\\\"https://files.readme.io/76514b0-ThumbnailCornerstone-3294x370.png\\\" alt=\\\"A Stencil Theme\\\" height=\\\"248\\\" width=\\\"197\\\">\\n\\n<!-- <img style=\\\"float: right; margin: 0px 0px 0px 30px;\\\" src=\\\"https://files.readme.io/3FGtWV4RRp62aXecIjT7_Thumbnail~Cornerstone%20#3~294x370.png\\\" alt=\\\"A Stencil Theme\\\" height=\\\"248\\\" width=\\\"197\\\"> -->\\n\\n<!-- [Graphic's native resolution is height=\\\"370\\\" width=\\\"294\\\" (294 x 370). Formerly scaled 50% to height=\\\"185\\\" width=\\\"147\\\", to match the scale of preceding page's thumbnail. Now upscaled to 67%, to better fill this page's layout.] -->\\n\\nThe Stencil framework consists of several pillars that provide a foundation for all storefront development:<br>\\n\\n<ul>\\n  <li>Logic-based templates, using the lightweight <a href=\\\"http://handlebarsjs.com/\\\">Handlebars</a> templating language. </li>\\n\\n<li>Page-specific resource definition, using <a href=\\\"http://yaml.org/\\\">YAML</a>-formatted front matter. </li>\\n\\n<li>Rich front-end development options, driven by JavaScript event hooks.</li>\\n\\n<li>Rapid local development and redesign with minimal coding. </li>\\n\\n<li>Real-time Browsersync preview and testing across desktop, mobile, and tablet devices/viewports.\\n  </li>\\n</ul>\\n\\nUsing this foundation, you will be able to create beautiful, dynamic, and powerful storefronts that offer customers a first-class experience on BigCommerce-hosted online stores.\\n\\n<h2> <A NAME=\\\"New\\\"></a> New Options </h2>\\n\\nThe Stencil framework offers these key features that are new to BigCommerce themes:<br>\\n\\n<ul>\\n\\t<li>Flexible local development: Design against your live storefront’s assets, with no disruption of the live store.\\n  </li>\\n\\n<li>Graphical (WYSIWYG) editor that enables merchants to customize, manage, and preview storefront attributes – colors, fonts, number of items displayed, etc. – with no coding. Self-service means lighter support requirements.\\n</li>\\n\\n<li>Responsive, mobile-friendly themes &ndash; elegantly showcasing brands and merchants' offerings on any device.\\n</li>\\n\\n<li>Support for adding multiple variations per theme &ndash; separately optimized for different audiences and market/product segments.\\n</li>\\n\\n\\t<li>Flexible and powerful Sass/SCSS support, allowing you to nest properties, variables, and mixins. <NOBR>Use the familiar</nobr> Foundation framework (provided), or substitute your choice of framework.\\n  </li>\\n</ul>\\n\\n\\n<H2> <A NAME=\\\"GetStart\\\"></a> Getting Started </h2>\\nTo try out Stencil's features for yourself, please proceed to our:\\n\\n<ul>\\n  <li> <a href=\\\"/docs/getting-started-guide\\\">Getting Started/Transition Guide</a> for developers/designers migrating from Blueprint and other platforms. </li>\\n\\n<li> <a href=\\\"/docs/installing-and-launching-stencil-1\\\">Installation and Launch</a> instructions. </li>\\n\\n<li> <a href=\\\"/docs/developing-on-the-stencil-framework-quick-start/\\\">Development Quick Start</a> tutorial. </li>\\n</ul>\\n\\n\\n<H2> <A NAME=\\\"StoreFeatures\\\"></a> About Storefront Features </h2>\\nTo see the storefront features that BigCommerce themes can support, please explore our:\\n\\n<ul>\\n  <li> <a href=\\\"https://www.bigcommerce.com/features/all/\\\">Overview</a> of available storefront features.</li>\\n\\n<li> <a href=\\\"https://support.bigcommerce.com/articles/Public/Themes-Design-Overview\\\">Themes & Design Overview</a> &ndash; and related &ldquo;Store Design & Content&rdquo; support <!--<a href=\\\"https://support.bigcommerce.com\\\">https://support.bigcommerce.com</a>--> topics linked from that page &ndash; to see how your feature selections will map to merchants' options in the BigCommerce control panel.</li>\\n</ul>\\n\\n<H2> <A NAME=\\\"Blueprint\\\"></a> Legacy Framework Documentation </h2>\\nLooking for information on BigCommerce's existing (Blueprint) framework? You can access our:\\n\\n<ul>\\n  <li> <a href=\\\"https://developer.bigcommerce.com/themes\\\">Themes (Blueprint)</a> reference. </li>\\n\\n<li> <a href=\\\"https://developer.bigcommerce.com/api\\\">Stores API</a> reference. </li>\\n</ul>\\n\\n<h2> <A NAME=\\\"Videos\\\"></a> Video Demonstrations</h2>\\n\\nWatch Stencil senior developer Mick Ryan's brief demonstration of Stencil installation and launch:<br><p></p> \\n\\n<iframe width=\\\"560\\\" height=\\\"315\\\" src=\\\"https://www.youtube.com/embed/iWBrJalyM0A\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\\n\\n<!--  <iframe width=\\\"560\\\" height=\\\"315\\\" src=\\\"https://www.youtube.com/embed/qQ6Nm9zPE7s\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>  -->\\n\\n<br><p></p>\\nWatch Stencil senior developer Mick Ryan's brief demonstration of editing a Stencil theme:<br><p></p>\\n  \\n<iframe width=\\\"560\\\" height=\\\"315\\\" src=\\\"https://www.youtube.com/embed/9Rk4qWgia5Y\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\\n\\n<!--  <iframe width=\\\"560\\\" height=\\\"315\\\" src=\\\"https://www.youtube.com/embed/xe50jaDmd8k\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>  -->\\n  \\n<br><p></p>\\nWatch Stencil senior developer Mick Ryan's tour of Stencil's key components:<br><p></p>\\n\\n<iframe width=\\\"560\\\" height=\\\"315\\\" src=\\\"https://www.youtube.com/embed/p5SR8N0SeCg\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\\n\\n<!--  <iframe width=\\\"560\\\" height=\\\"315\\\" src=\\\"https://www.youtube.com/embed/soZkXYmaNBA\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>  -->\\n\\n\"\n}\n[/block]","excerpt":"Features of BigCommerce's new theming engine","slug":"getting-started","type":"basic","title":"Why Stencil?"}

Why Stencil?

Features of BigCommerce's new theming engine

[block:html] { "html": "This entry includes:\n<ul>\n<li><a href=\"#Design\">Design Philosophy</a></li>\n<li><a href=\"#New\">New Options</a></li>\n<li><a href=\"#GetStart\">Getting Started</a></li>\n<li><a href=\"#StoreFeatures\">About Storefront Features</a></li>\n<li><a href=\"#Blueprint\">Legacy Framework Documentation</a></li>\n<li><a href=\"#Videos\">Video Demonstrations</a></li>\n</ul>\n\n\n<H2> <A NAME=\"Design\"></a> Design Philosophy </h2>\n\n<img style=\"float: right; margin: 0px 0px 0px 30px;\" src=\"https://files.readme.io/76514b0-ThumbnailCornerstone-3294x370.png\" alt=\"A Stencil Theme\" height=\"248\" width=\"197\">\n\n<!-- <img style=\"float: right; margin: 0px 0px 0px 30px;\" src=\"https://files.readme.io/3FGtWV4RRp62aXecIjT7_Thumbnail~Cornerstone%20#3~294x370.png\" alt=\"A Stencil Theme\" height=\"248\" width=\"197\"> -->\n\n<!-- [Graphic's native resolution is height=\"370\" width=\"294\" (294 x 370). Formerly scaled 50% to height=\"185\" width=\"147\", to match the scale of preceding page's thumbnail. Now upscaled to 67%, to better fill this page's layout.] -->\n\nThe Stencil framework consists of several pillars that provide a foundation for all storefront development:<br>\n\n<ul>\n <li>Logic-based templates, using the lightweight <a href=\"http://handlebarsjs.com/\">Handlebars</a> templating language. </li>\n\n<li>Page-specific resource definition, using <a href=\"http://yaml.org/\">YAML</a>-formatted front matter. </li>\n\n<li>Rich front-end development options, driven by JavaScript event hooks.</li>\n\n<li>Rapid local development and redesign with minimal coding. </li>\n\n<li>Real-time Browsersync preview and testing across desktop, mobile, and tablet devices/viewports.\n </li>\n</ul>\n\nUsing this foundation, you will be able to create beautiful, dynamic, and powerful storefronts that offer customers a first-class experience on BigCommerce-hosted online stores.\n\n<h2> <A NAME=\"New\"></a> New Options </h2>\n\nThe Stencil framework offers these key features that are new to BigCommerce themes:<br>\n\n<ul>\n\t<li>Flexible local development: Design against your live storefront’s assets, with no disruption of the live store.\n </li>\n\n<li>Graphical (WYSIWYG) editor that enables merchants to customize, manage, and preview storefront attributes – colors, fonts, number of items displayed, etc. – with no coding. Self-service means lighter support requirements.\n</li>\n\n<li>Responsive, mobile-friendly themes &ndash; elegantly showcasing brands and merchants' offerings on any device.\n</li>\n\n<li>Support for adding multiple variations per theme &ndash; separately optimized for different audiences and market/product segments.\n</li>\n\n\t<li>Flexible and powerful Sass/SCSS support, allowing you to nest properties, variables, and mixins. <NOBR>Use the familiar</nobr> Foundation framework (provided), or substitute your choice of framework.\n </li>\n</ul>\n\n\n<H2> <A NAME=\"GetStart\"></a> Getting Started </h2>\nTo try out Stencil's features for yourself, please proceed to our:\n\n<ul>\n <li> <a href=\"/docs/getting-started-guide\">Getting Started/Transition Guide</a> for developers/designers migrating from Blueprint and other platforms. </li>\n\n<li> <a href=\"/docs/installing-and-launching-stencil-1\">Installation and Launch</a> instructions. </li>\n\n<li> <a href=\"/docs/developing-on-the-stencil-framework-quick-start/\">Development Quick Start</a> tutorial. </li>\n</ul>\n\n\n<H2> <A NAME=\"StoreFeatures\"></a> About Storefront Features </h2>\nTo see the storefront features that BigCommerce themes can support, please explore our:\n\n<ul>\n <li> <a href=\"https://www.bigcommerce.com/features/all/\">Overview</a> of available storefront features.</li>\n\n<li> <a href=\"https://support.bigcommerce.com/articles/Public/Themes-Design-Overview\">Themes & Design Overview</a> &ndash; and related &ldquo;Store Design & Content&rdquo; support <!--<a href=\"https://support.bigcommerce.com\">https://support.bigcommerce.com</a>--> topics linked from that page &ndash; to see how your feature selections will map to merchants' options in the BigCommerce control panel.</li>\n</ul>\n\n<H2> <A NAME=\"Blueprint\"></a> Legacy Framework Documentation </h2>\nLooking for information on BigCommerce's existing (Blueprint) framework? You can access our:\n\n<ul>\n <li> <a href=\"https://developer.bigcommerce.com/themes\">Themes (Blueprint)</a> reference. </li>\n\n<li> <a href=\"https://developer.bigcommerce.com/api\">Stores API</a> reference. </li>\n</ul>\n\n<h2> <A NAME=\"Videos\"></a> Video Demonstrations</h2>\n\nWatch Stencil senior developer Mick Ryan's brief demonstration of Stencil installation and launch:<br><p></p> \n\n<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/iWBrJalyM0A\" frameborder=\"0\" allowfullscreen></iframe>\n\n<!-- <iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/qQ6Nm9zPE7s\" frameborder=\"0\" allowfullscreen></iframe> -->\n\n<br><p></p>\nWatch Stencil senior developer Mick Ryan's brief demonstration of editing a Stencil theme:<br><p></p>\n \n<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/9Rk4qWgia5Y\" frameborder=\"0\" allowfullscreen></iframe>\n\n<!-- <iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/xe50jaDmd8k\" frameborder=\"0\" allowfullscreen></iframe> -->\n \n<br><p></p>\nWatch Stencil senior developer Mick Ryan's tour of Stencil's key components:<br><p></p>\n\n<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/p5SR8N0SeCg\" frameborder=\"0\" allowfullscreen></iframe>\n\n<!-- <iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/soZkXYmaNBA\" frameborder=\"0\" allowfullscreen></iframe> -->\n\n" } [/block]