{"_id":"560b397d4a1f990d00dc7338","parentDoc":null,"project":"55a6e72e8cc73e0d00096635","user":"55a6caa022cfa321008e01d6","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"},"__v":10,"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":"2015-09-30T01:23:09.053Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":3,"body":"[block:html]\n{\n  \"html\": \"The <span class=\\\"inline-code\\\">&lt;theme-name&gt;/assets/scss/settings/</span> subdirectory contains SCSS variables for your framework. Files here map directly to components. If present, these variables override defaults in consumed libraries. Here is the <span class=\\\"inline-code\\\">/settings/</span> subdirectory's internal structure:</p>\\n\\n<pre>├── citadel\\n├── foundation\\n├── global\\n├── layouts\\n├── normalize\\n├── stencil\\n└── vendor\\n</pre>\\n\\nThe nested subdirectory for your chosen framework contains a file that includes that framework’s variables. <NOBR>(For example,</nobr> in the default Stencil theme, this file is: <span class=\\\"inline-code\\\">.../settings/foundation/_foundation.scss</span>.)<br><br> \\n\\nWithin each subdirectory nested at the <i>ultimate</i> level is one primary file, <span class=\\\"inline-code\\\">_settings.scss</span>, that imports all other variables that have been broken into logical files (such as <span class=\\\"inline-code\\\">_colors.scss</span>, <span class=\\\"inline-code\\\">_typography.scss</span>, and <span class=\\\"inline-code\\\">_z-index.scss</span>).\"\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 SCSS files/frameworks. However,&#160;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=\\\"SassFontFns\\\"></a> Sass Stylesheet Support for Theme Fonts</h2>\\n\\nTo support Theme Editor, your theme's Sass stylesheet must call Stencil's <a href=\\\"/docs/custom-sass-functions#FontFamily\\\">custom Sass functions</a> to transform fonts specified in the theme's <a href=\\\"/docs/configjson-reference\\\"><span class=\\\"inline-code\\\">config.json</span></a> file. You must call these functions on each <span class=\\\"inline-code\\\">config.json</span> font key whose value you want to make available to Sass variables.<br><br>\\n\\nThe default Stencil theme includes these function calls in this stylesheet:<br>\\n<span class=\\\"inline-code\\\">\\n&lt;theme-name&gt;/assets/scss/settings/foundation/type/_settings.scss</span>. However, if your theme relies on a Sass framework other than Foundation, the relevant stylesheet will be a different <span class=\\\"inline-code\\\">.scss</span> file name within <NOBR><span class=\\\"inline-code\\\">&lt;theme-name&gt;/assets/scss/<!--settings/--></span>.</nobr><br>\\n\\n<h3>How to Enable Fonts for Theme Editor</h3>\\n\\nAssume that your theme's <span class=\\\"inline-code\\\">config.json</span> contains the following key name and value (the details of both are arbitrary, but the key name must end in <span class=\\\"inline-code\\\">-font</span>, and the value must follow a <a href=\\\"/docs/configjson-reference#config-json-fonts\\\">defined format</a>): <p></p>\\n\\n<pre>\\n\\\"headings-font\\\": \\\"Google_Open+Sans_700\\\",\\n</pre>  <p></p>\\n\\nIn your Sass stylesheet, you would call the <a href=\\\"/docs/custom-sass-functions#FontFamily\\\"><span class=\\\"inline-code\\\">stencilFontFamily</span></a> and <a href=\\\"/docs/custom-sass-functions#FontWeight\\\"><span class=\\\"inline-code\\\">stencilFontWeight</span></a> custom Sass functions on the corresponding <span class=\\\"inline-code\\\">config.json</span> key name: <p></p>\\n\\n<pre>\\n$body-font-family: stencilFontFamily(\\\"body-font\\\");\\n$body-font-weight: stencilFontWeight(\\\"body-font\\\");\\n</pre> <p></p>\\n\\nThese functions would extract the corresponding <span class=\\\"inline-code\\\">config.json</span> values as: <p></p>\\n\\t\\n<pre>\\n$body-font-family: 'Open Sans';\\n$body-font-weight: 700;\\n</pre>  <p></p>\\n\\nThis transformation allows you to use the <span class=\\\"inline-code\\\">$body-font-family</span> and <span class=\\\"inline-code\\\">$body-font-weight</span>  variables wherever needed in your theme. If a merchant uses Theme Editor to select a different font family and/or weight, the variables will propagate the change throughout your theme.\"\n}\n[/block]","excerpt":"","slug":"settings-directory","type":"basic","title":"Settings Directory"}

Settings Directory


[block:html] { "html": "The <span class=\"inline-code\">&lt;theme-name&gt;/assets/scss/settings/</span> subdirectory contains SCSS variables for your framework. Files here map directly to components. If present, these variables override defaults in consumed libraries. Here is the <span class=\"inline-code\">/settings/</span> subdirectory's internal structure:</p>\n\n<pre>├── citadel\n├── foundation\n├── global\n├── layouts\n├── normalize\n├── stencil\n└── vendor\n</pre>\n\nThe nested subdirectory for your chosen framework contains a file that includes that framework’s variables. <NOBR>(For example,</nobr> in the default Stencil theme, this file is: <span class=\"inline-code\">.../settings/foundation/_foundation.scss</span>.)<br><br> \n\nWithin each subdirectory nested at the <i>ultimate</i> level is one primary file, <span class=\"inline-code\">_settings.scss</span>, that imports all other variables that have been broken into logical files (such as <span class=\"inline-code\">_colors.scss</span>, <span class=\"inline-code\">_typography.scss</span>, and <span class=\"inline-code\">_z-index.scss</span>)." } [/block] [block:callout] { "type": "warning", "title": "Before You Customize", "body": "The Stencil framework is designed to support your incorporation of custom SCSS files/frameworks. However,&#160;BigCommerce does not offer technical assistance on substitutions for, or customized versions of, Stencil's default dependencies." } [/block] [block:html] { "html": "<h2><a name=\"SassFontFns\"></a> Sass Stylesheet Support for Theme Fonts</h2>\n\nTo support Theme Editor, your theme's Sass stylesheet must call Stencil's <a href=\"/docs/custom-sass-functions#FontFamily\">custom Sass functions</a> to transform fonts specified in the theme's <a href=\"/docs/configjson-reference\"><span class=\"inline-code\">config.json</span></a> file. You must call these functions on each <span class=\"inline-code\">config.json</span> font key whose value you want to make available to Sass variables.<br><br>\n\nThe default Stencil theme includes these function calls in this stylesheet:<br>\n<span class=\"inline-code\">\n&lt;theme-name&gt;/assets/scss/settings/foundation/type/_settings.scss</span>. However, if your theme relies on a Sass framework other than Foundation, the relevant stylesheet will be a different <span class=\"inline-code\">.scss</span> file name within <NOBR><span class=\"inline-code\">&lt;theme-name&gt;/assets/scss/<!--settings/--></span>.</nobr><br>\n\n<h3>How to Enable Fonts for Theme Editor</h3>\n\nAssume that your theme's <span class=\"inline-code\">config.json</span> contains the following key name and value (the details of both are arbitrary, but the key name must end in <span class=\"inline-code\">-font</span>, and the value must follow a <a href=\"/docs/configjson-reference#config-json-fonts\">defined format</a>): <p></p>\n\n<pre>\n\"headings-font\": \"Google_Open+Sans_700\",\n</pre> <p></p>\n\nIn your Sass stylesheet, you would call the <a href=\"/docs/custom-sass-functions#FontFamily\"><span class=\"inline-code\">stencilFontFamily</span></a> and <a href=\"/docs/custom-sass-functions#FontWeight\"><span class=\"inline-code\">stencilFontWeight</span></a> custom Sass functions on the corresponding <span class=\"inline-code\">config.json</span> key name: <p></p>\n\n<pre>\n$body-font-family: stencilFontFamily(\"body-font\");\n$body-font-weight: stencilFontWeight(\"body-font\");\n</pre> <p></p>\n\nThese functions would extract the corresponding <span class=\"inline-code\">config.json</span> values as: <p></p>\n\t\n<pre>\n$body-font-family: 'Open Sans';\n$body-font-weight: 700;\n</pre> <p></p>\n\nThis transformation allows you to use the <span class=\"inline-code\">$body-font-family</span> and <span class=\"inline-code\">$body-font-weight</span> variables wherever needed in your theme. If a merchant uses Theme Editor to select a different font family and/or weight, the variables will propagate the change throughout your theme." } [/block]