{"_id":"56a1e0b42255370d00ad5e9c","__v":23,"project":"55a6e72e8cc73e0d00096635","user":"55a6caa022cfa321008e01d6","parentDoc":null,"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"},"category":{"_id":"560b13cbafa0990d00979545","project":"55a6e72e8cc73e0d00096635","version":"55a6e72f8cc73e0d00096638","pages":["560b13f987b71d0d000d3bf6","560b394aaf40a70d003df31e","560b39669c7be70d00100bef","560b397d4a1f990d00dc7338","560b3991c341310d00de29de","560b39ae4a1f990d00dc733a","562ffd364445ae1900383e84","5642a810cc9d8e0d00adda69","5660daef89e82f0d008f6823","56a1e0b42255370d00ad5e9c"],"__v":10,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-29T22:42:19.181Z","from_sync":false,"order":13,"slug":"css-javascript-design-resources","title":"CSS and Design Assets"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-01-22T07:56:36.592Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":6,"body":"[block:html]\n{\n  \"html\": \"This entry covers styling pages in your theme by referencing CSS stylesheets, and by defining and replacing content blocks:<br>\\n\\n<ul>\\n <li><a href=\\\"#RefSS\\\">Referencing a CSS Stylesheet</a></li>\\n <li><a href=\\\"#Composition\\\">Template Composition</a></li>\\n <li><a href=\\\"#BaseBlock\\\">Defining Content Blocks</a></li>\\n <li><a href=\\\"#SwapBlock\\\">Replacing Content Blocks</a></li>\\n <li><a href=\\\"#MatchBlock\\\">Matching Partials with Blocks</a></li>\\n</ul>\\n\\n<h2> <A NAME=\\\"RefSS\\\"></a>Referencing a CSS Stylesheet</h2>\\n\\nTo apply CSS styling to a page in your theme, make sure that page's code includes a reference to the stylesheet you want to use. This example does so using the <span class=\\\"inline-code\\\">{{partial}}</span> and <span class=\\\"inline-code\\\">{{cdn}}</span> <a href=\\\"/docs/custom-handlebars-helpers\\\">custom Handlebars helpers</a>:\\n\\n<p></p><pre>\\n{{#partial \\\"head\\\"}}\\n    &lt;link href=\\\"{{cdn '/assets/css/invoice.css'}}\\\" rel=\\\"stylesheet\\\"&gt;\\n{{/partial}}\\n</pre>\\n\\n<h2> <A NAME=\\\"Composition\\\"></a> Template Composition </h2>\\n\\nTemplate composition is a valuable Stencil feature. By defining blocks of overrideable content, your themes can insert templates on a per-page basis, while sharing code that is common to the whole theme.\\n\\n<h3> <A NAME=\\\"BaseBlock\\\"></a> Defining Content Blocks </h3>\\n\\nA base template defines content blocks by name. The following snippet uses <span class=\\\"inline-code\\\">{{block}}</span> <a href=\\\"/docs/custom-handlebars-helpers\\\">custom Handlebars helpers</a> to define three content blocks, respectively named <span class=\\\"inline-code\\\">head</span>, <span class=\\\"inline-code\\\">hero</span>, and <span class=\\\"inline-code\\\">page</span>:\\n\\n<p></p><pre>\\n// templates/layout/base.html\\n&lt;!DOCTYPE html&gt;\\n&lt;html&gt;\\n    &lt;head&gt;\\n        &lt;title>{{ head.title }}&lt;/title&gt;\\n        {{#block \\\"head\\\"}} {{/block}}\\n    &lt;/head&gt;\\n    &lt;body&gt;\\n        &lt;div class=\\\"body\\\"&gt;\\n\\t\\t    {{#block \\\"hero\\\"}} {{/block}}\\n\\t\\t    &lt;div class=\\\"container\\\"&gt;\\n\\t\\t        {{#block \\\"page\\\"}} {{/block}}\\n\\t\\t    &lt;/div&gt;\\n\\t\\t    {{&gt; components/common/modal}}\\n        &lt;/div&gt;\\n    &lt;/body&gt;\\n&lt;/html&gt;\\n</pre>\\n\\n<h3> <A NAME=\\\"SwapBlock\\\"></a> Replacing Content Blocks </h3>\\n\\nPages can use a base template, replacing the defined blocks with their own content. This example replaces content for the <span class=\\\"inline-code\\\">head</span> and <span class=\\\"inline-code\\\">page</span> blocks:\\n\\n<p></p><pre>\\n//templates/pages/account/orders/invoice.html\\n{{#partial \\\"head\\\"}}\\n    &lt;link href=\\\"{{cdn '/assets/css/invoice.css'}}\\\" rel=\\\"stylesheet\\\"&gt;\\n{{/partial}}\\n\\n{{#partial \\\"page\\\"}}\\n    &lt;p&gt;An invoice for a particular order would go here&lt;/p&gt;\\n{{/partial}}\\n{{&gt; layout/empty}}\\n</pre>\\n\\n<h3> <A NAME=\\\"MatchBlock\\\"></a> Matching Partials with Blocks </h3>\\n\\nWe recommend that, for any given name defined within the template rendering path, you maintain a 1:1 mapping of partials to blocks.\"\n}\n[/block]","excerpt":"","slug":"styling-theme-pages","type":"basic","title":"Page Composition and Styling"}

Page Composition and Styling


[block:html] { "html": "This entry covers styling pages in your theme by referencing CSS stylesheets, and by defining and replacing content blocks:<br>\n\n<ul>\n <li><a href=\"#RefSS\">Referencing a CSS Stylesheet</a></li>\n <li><a href=\"#Composition\">Template Composition</a></li>\n <li><a href=\"#BaseBlock\">Defining Content Blocks</a></li>\n <li><a href=\"#SwapBlock\">Replacing Content Blocks</a></li>\n <li><a href=\"#MatchBlock\">Matching Partials with Blocks</a></li>\n</ul>\n\n<h2> <A NAME=\"RefSS\"></a>Referencing a CSS Stylesheet</h2>\n\nTo apply CSS styling to a page in your theme, make sure that page's code includes a reference to the stylesheet you want to use. This example does so using the <span class=\"inline-code\">{{partial}}</span> and <span class=\"inline-code\">{{cdn}}</span> <a href=\"/docs/custom-handlebars-helpers\">custom Handlebars helpers</a>:\n\n<p></p><pre>\n{{#partial \"head\"}}\n &lt;link href=\"{{cdn '/assets/css/invoice.css'}}\" rel=\"stylesheet\"&gt;\n{{/partial}}\n</pre>\n\n<h2> <A NAME=\"Composition\"></a> Template Composition </h2>\n\nTemplate composition is a valuable Stencil feature. By defining blocks of overrideable content, your themes can insert templates on a per-page basis, while sharing code that is common to the whole theme.\n\n<h3> <A NAME=\"BaseBlock\"></a> Defining Content Blocks </h3>\n\nA base template defines content blocks by name. The following snippet uses <span class=\"inline-code\">{{block}}</span> <a href=\"/docs/custom-handlebars-helpers\">custom Handlebars helpers</a> to define three content blocks, respectively named <span class=\"inline-code\">head</span>, <span class=\"inline-code\">hero</span>, and <span class=\"inline-code\">page</span>:\n\n<p></p><pre>\n// templates/layout/base.html\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n &lt;head&gt;\n &lt;title>{{ head.title }}&lt;/title&gt;\n {{#block \"head\"}} {{/block}}\n &lt;/head&gt;\n &lt;body&gt;\n &lt;div class=\"body\"&gt;\n\t\t {{#block \"hero\"}} {{/block}}\n\t\t &lt;div class=\"container\"&gt;\n\t\t {{#block \"page\"}} {{/block}}\n\t\t &lt;/div&gt;\n\t\t {{&gt; components/common/modal}}\n &lt;/div&gt;\n &lt;/body&gt;\n&lt;/html&gt;\n</pre>\n\n<h3> <A NAME=\"SwapBlock\"></a> Replacing Content Blocks </h3>\n\nPages can use a base template, replacing the defined blocks with their own content. This example replaces content for the <span class=\"inline-code\">head</span> and <span class=\"inline-code\">page</span> blocks:\n\n<p></p><pre>\n//templates/pages/account/orders/invoice.html\n{{#partial \"head\"}}\n &lt;link href=\"{{cdn '/assets/css/invoice.css'}}\" rel=\"stylesheet\"&gt;\n{{/partial}}\n\n{{#partial \"page\"}}\n &lt;p&gt;An invoice for a particular order would go here&lt;/p&gt;\n{{/partial}}\n{{&gt; layout/empty}}\n</pre>\n\n<h3> <A NAME=\"MatchBlock\"></a> Matching Partials with Blocks </h3>\n\nWe recommend that, for any given name defined within the template rendering path, you maintain a 1:1 mapping of partials to blocks." } [/block]