<theme-name>/assets/scss/layouts/ subdirectory contains
.scss files that provide default styling for major layout components of theme pages. You can see the
/layouts/ subdirectory’s internal structure on the Cornerstone Github Repository
<theme-name>/assets/scss/utilities subdirectory contains mixins and tools, beyond the Citadel library, that help create UI’s. You can apply these CSS snippets to your HTML for quick prototyping when you need a unique, yet repeatable, style.
Every utility in this subdirectory will have both a class and a mixin. For example, consider the utility
truncatedText: You can use it by applying the class
.u-truncatedText, or by applying the mixin @include u-truncatedText;.
<theme-name>/assets/scss/settings/ subdirectory contains SCSS variables for your framework. Files here map directly to components. If present, these variables override defaults in consumed libraries. The
/settings/ subdirectory’s internal structure can be viewed at the Cornerstone Github Repository
The nested subdirectory for your chosen framework contains a file that includes that framework’s variables. (For example, in the default Stencil theme, this file is:
Within each subdirectory nested at the ultimate level is one primary file,
_settings.scss, that imports all other variables that have been broken into logical files (such as
Sass Stylesheet Support for Theme Fonts
To support Theme Editor, your theme’s Sass stylesheet must call Stencil’s custom Sass functions to transform fonts specified in the theme’s
config.json file. You must call these functions on each
config.json font key whose value you want to make available to Sass variables.
The default Stencil theme includes these function calls in this stylesheet:
<theme-name>/assets/scss/settings/foundation/type/_settings.scss. However, if your theme relies on a Sass framework other than Foundation, the relevant stylesheet will be a different .scss file name within
How to Enable Fonts for Theme Editor
Assume that your theme’s
config.json contains the following key name and value (the details of both are arbitrary, but the key name must end in
-font, and the value must follow a defined format):
In your Sass stylesheet, you would call the stencilFontFamily and stencilFontWeight custom Sass functions on the corresponding
config.json key name:
$body-font-family: stencilFontFamily("body-font"); $body-font-weight: stencilFontWeight("body-font");
These functions would extract the corresponding
config.json values as:
$body-font-family: 'Open Sans'; $body-font-weight: 700;
This transformation allows you to use the
$body-font-weight 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.