{"_id":"560b13f987b71d0d000d3bf6","parentDoc":null,"project":"55a6e72e8cc73e0d00096635","user":"55a6caa022cfa321008e01d6","__v":16,"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"},"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":["59b6e5587d1d45001a2c23a4"],"next":{"pages":[],"description":""},"createdAt":"2015-09-29T22:43:05.420Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"[block:html]\n{\n  \"html\": \"<head>\\n<title>Navigating Stencil Design Assets</title>\\n<meta name=\\\"description=\\\" content=\\\"Overview of theme assets and their directory structure.\\\">\\n</head>\\n\\n<A NAME=\\\"DesignResources\\\"></a>\\nThis page covers:\\n\\n<ul>\\n <li><a href=\\\"#assets_dir\\\">The assets Directory</a>\\n </li> \\n \\t<ul> <!--inner-->\\n  \\t<li><a href=\\\"#assets_subdirs\\\">assets Subdirectories</a></li>\\n  </ul> </p> <!--inner-->\\n  <li><a href=\\\"#img_refs\\\">Production-Safe Image References</a></li>\\n <li><a href=\\\"#assets_video\\\">Video Demo</a></li>\\n <li><a href=\\\"#restrix\\\">Directory and File Restrictions/Permissions</a></li> \\n</ul>\\n\\nThis section's remaining pages cover:\\n\\n<ul>\\n <li><a href=\\\"/docs/css-subdirectories\\\">CSS Subdirectories</a></li>\\n <li><a href=\\\"/docs/componentsdesign-patterns\\\">Components/Design Patterns</a></li>\\n <li><a href=\\\"/docs/layouts-directory\\\">\\nLayouts Directory</a></li>\\n <li><a href=\\\"/docs/settings-directory\\\">Settings Directory\\n</a></li>\\n <li><a href=\\\"/docs/utilities-directory\\\">Utilities Directory\\n</a></li>\\n <li><a href=\\\"/docs/custom-sass-functions\\\">Custom Sass Functions</a></li>\\n  <li><a href=\\\"/docs/styling-theme-pages\\\">Page Composition and Styling</a></li>\\n  <li><a href=\\\"/docs/using-custom-fonts\\\">Using Custom Fonts</a></li>\\n  <li><a href=\\\"/docs/updating-icons\\\">Using and Updating Icons</a></li>\\n</ul>\\n\\n<H2> <A NAME=\\\"assets_dir\\\"></a> The assets Directory </h2>\\n\\nEach Stencil theme’s <span class=\\\"inline-code\\\">&lt;theme-name&gt;/assets/</span> directory contains CSS, JavaScript, and image assets that help create the design of storefront pages. A minimal <span class=\\\"inline-code\\\">&lt;theme-name&gt;/assets/</span> directory contains the files and subdirectories shown here:<br>\\n\\n<p></p><pre>&lt;theme-name&gt;\\n          /assets/\\n                 /config.js [file]\\n                 /modernizr-custom.js [file]\\n                 /cdn/\\n                 /fonts/\\n                 /icons/\\n                 /img/\\n                 /js/ <!--\\n                 /jspm_packages/ -->\\n                 /scss/</pre>\"\n}\n[/block]\n### <span id=\"assets_subdirs\"></a> assets Subdirectories </span>\n\nThe <span class=\"inline-code\">&lt;theme-name&gt;/assets/</span> directory contains the subdirectories listed below.\n\n#### cdn Subdirectory\n\nThe <span class=\"inline-code\">/cdn/</span> subdirectory is designed to contain large static assets that you will upload to a content delivery network, separately from the rest of your theme. For this reason – and by design – the contents of this directory _(only)_ are excluded from <a href=\"/docs/bundling-submitting#ship-zip-small\">theme bundling</a>. For details, please see  <a href=\"/docs/cdn-dir\">Staging a Theme for CDN Delivery</a>.\n  \n#### fonts Subdirectory\n\nThe <span class=\"inline-code\">/fonts/</span> subdirectory contains local versions of theme-specific fonts.\n\n#### icons Subdirectory\n\nThe <span class=\"inline-code\">/icons/</span> subdirectory contains .svg files for icons used within a theme.\n\n#### img Subdirectory\n\nThe <span class=\"inline-code\">/img/</span> subdirectory contains images used in the theme’s display – background images, sprites, and other images not related to store content.\n\nYou would typically reference these image assets using Stencil's [cdn Handlebars helper](/docs/other-handlebars-helpers#cdn). For example, generically:\n\n```\n<img src=\"{{cdn 'assets/img/image.jpg'}}\">\n```\n\nOr, with a realistic file name:\n\n```\n<img src=\"{{cdn 'assets/img/size-chart.png'}}\">\n```\n\n#### js Subdirectory\n\nThe <span class=\"inline-code\">/js/</span> subdirectory contains general JavaScript files used in the theme.\n\n#### scss Subdirectory\n\nThe <span class=\"inline-code\">/scss/</span> subdirectory contains theme-specific CSS resources, outlined on this section's <a href=\"/docs/css-subdirectories\">CSS Subdirectories</a> page.\n\n<span id=\"img_refs\"></span> \n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Production-Safe Image References\",\n  \"body\": \"To avoid unexpected 404 errors on your production store, we recommend that you use short relative paths in your SCSS to reference images in your `/img/` subdirectory. So, for example, use references of the form:\\n`background: url('../img/header-bg.png');` rather than references of the form: \\n`background: url('/assets/img/header-bg.png');`\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<h2> <a name=\\\"assets_video\\\"></a> Video Demo </h2>\\n\\nWatch a video tour of the <span class=\\\"inline-code\\\">/assets/</span> directory, its <span class=\\\"inline-code\\\">/scss/</span>  subdirectory, interactions between CSS and <span class=\\\"inline-code\\\"><a href=\\\"/docs/configjson-reference\\\">config.json</a></span> values, Stencil&#160;custom Sass functions, and the <span class=\\\"inline-code\\\">/img/</span> subdirectory.<br><p></p>\\n\\n<iframe src=\\\"https://www.youtube.com/embed/zUDNgprOEts?ecver=2\\\" width=\\\"560\\\" height=\\\"315\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\"\n}\n[/block]\n<span id=\"restrix\"></span>\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"This section's remaining pages list certain restrictions on changing some subdirectories' structure, contents, and file names.\\n\\nIn parts of your theme's directory tree where you are free to add new subdirectories and files, be sure to:  \\n* Set newly added directories to permission `755` (`drwxr-xr-x`). \\n* Set newly added files to permission `644` (`rw-r--r--`).\\n\\nWithout these permissions, running your theme locally will fail, with multiple error messages. Bundling your theme will also fail, blocking its upload to a store.\",\n  \"title\": \"Directory and File Restrictions/Permissions\"\n}\n[/block]","excerpt":"","slug":"css-resources","type":"basic","title":"Navigating Stencil Design Assets"}

Navigating Stencil Design Assets


[block:html] { "html": "<head>\n<title>Navigating Stencil Design Assets</title>\n<meta name=\"description=\" content=\"Overview of theme assets and their directory structure.\">\n</head>\n\n<A NAME=\"DesignResources\"></a>\nThis page covers:\n\n<ul>\n <li><a href=\"#assets_dir\">The assets Directory</a>\n </li> \n \t<ul> <!--inner-->\n \t<li><a href=\"#assets_subdirs\">assets Subdirectories</a></li>\n </ul> </p> <!--inner-->\n <li><a href=\"#img_refs\">Production-Safe Image References</a></li>\n <li><a href=\"#assets_video\">Video Demo</a></li>\n <li><a href=\"#restrix\">Directory and File Restrictions/Permissions</a></li> \n</ul>\n\nThis section's remaining pages cover:\n\n<ul>\n <li><a href=\"/docs/css-subdirectories\">CSS Subdirectories</a></li>\n <li><a href=\"/docs/componentsdesign-patterns\">Components/Design Patterns</a></li>\n <li><a href=\"/docs/layouts-directory\">\nLayouts Directory</a></li>\n <li><a href=\"/docs/settings-directory\">Settings Directory\n</a></li>\n <li><a href=\"/docs/utilities-directory\">Utilities Directory\n</a></li>\n <li><a href=\"/docs/custom-sass-functions\">Custom Sass Functions</a></li>\n <li><a href=\"/docs/styling-theme-pages\">Page Composition and Styling</a></li>\n <li><a href=\"/docs/using-custom-fonts\">Using Custom Fonts</a></li>\n <li><a href=\"/docs/updating-icons\">Using and Updating Icons</a></li>\n</ul>\n\n<H2> <A NAME=\"assets_dir\"></a> The assets Directory </h2>\n\nEach Stencil theme’s <span class=\"inline-code\">&lt;theme-name&gt;/assets/</span> directory contains CSS, JavaScript, and image assets that help create the design of storefront pages. A minimal <span class=\"inline-code\">&lt;theme-name&gt;/assets/</span> directory contains the files and subdirectories shown here:<br>\n\n<p></p><pre>&lt;theme-name&gt;\n /assets/\n /config.js [file]\n /modernizr-custom.js [file]\n /cdn/\n /fonts/\n /icons/\n /img/\n /js/ <!--\n /jspm_packages/ -->\n /scss/</pre>" } [/block] ### <span id="assets_subdirs"></a> assets Subdirectories </span> The <span class="inline-code">&lt;theme-name&gt;/assets/</span> directory contains the subdirectories listed below. #### cdn Subdirectory The <span class="inline-code">/cdn/</span> subdirectory is designed to contain large static assets that you will upload to a content delivery network, separately from the rest of your theme. For this reason – and by design – the contents of this directory _(only)_ are excluded from <a href="/docs/bundling-submitting#ship-zip-small">theme bundling</a>. For details, please see <a href="/docs/cdn-dir">Staging a Theme for CDN Delivery</a>. #### fonts Subdirectory The <span class="inline-code">/fonts/</span> subdirectory contains local versions of theme-specific fonts. #### icons Subdirectory The <span class="inline-code">/icons/</span> subdirectory contains .svg files for icons used within a theme. #### img Subdirectory The <span class="inline-code">/img/</span> subdirectory contains images used in the theme’s display – background images, sprites, and other images not related to store content. You would typically reference these image assets using Stencil's [cdn Handlebars helper](/docs/other-handlebars-helpers#cdn). For example, generically: ``` <img src="{{cdn 'assets/img/image.jpg'}}"> ``` Or, with a realistic file name: ``` <img src="{{cdn 'assets/img/size-chart.png'}}"> ``` #### js Subdirectory The <span class="inline-code">/js/</span> subdirectory contains general JavaScript files used in the theme. #### scss Subdirectory The <span class="inline-code">/scss/</span> subdirectory contains theme-specific CSS resources, outlined on this section's <a href="/docs/css-subdirectories">CSS Subdirectories</a> page. <span id="img_refs"></span> [block:callout] { "type": "warning", "title": "Production-Safe Image References", "body": "To avoid unexpected 404 errors on your production store, we recommend that you use short relative paths in your SCSS to reference images in your `/img/` subdirectory. So, for example, use references of the form:\n`background: url('../img/header-bg.png');` rather than references of the form: \n`background: url('/assets/img/header-bg.png');`" } [/block] [block:html] { "html": "<h2> <a name=\"assets_video\"></a> Video Demo </h2>\n\nWatch a video tour of the <span class=\"inline-code\">/assets/</span> directory, its <span class=\"inline-code\">/scss/</span> subdirectory, interactions between CSS and <span class=\"inline-code\"><a href=\"/docs/configjson-reference\">config.json</a></span> values, Stencil&#160;custom Sass functions, and the <span class=\"inline-code\">/img/</span> subdirectory.<br><p></p>\n\n<iframe src=\"https://www.youtube.com/embed/zUDNgprOEts?ecver=2\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen></iframe>" } [/block] <span id="restrix"></span> [block:callout] { "type": "warning", "body": "This section's remaining pages list certain restrictions on changing some subdirectories' structure, contents, and file names.\n\nIn parts of your theme's directory tree where you are free to add new subdirectories and files, be sure to: \n* Set newly added directories to permission `755` (`drwxr-xr-x`). \n* Set newly added files to permission `644` (`rw-r--r--`).\n\nWithout these permissions, running your theme locally will fail, with multiple error messages. Bundling your theme will also fail, blocking its upload to a store.", "title": "Directory and File Restrictions/Permissions" } [/block]