Getting Started
About Stencil
Transitioning to Stencil
Installing Stencil
Authentication & Tokens
Running Stencil Locally
Advanced Installation Options
Template Files
Templates Directory
Custom Templates
Customize Stencil Checkout
Handlebars and Stencil
Handlebars.js Overview
Handlebars Helpers
Stencil Object Model
Stencil Objects

Layouts, Utilities, and Settings Directories

Layouts Directory

The {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

Utilities Directory

The {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;.

Settings Directory

The {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: /settings/foundation/_foundation.scss.

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 _colors.scss, _typography.scss, and _z-index.scss.

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 {theme-name}/assets/scss/.

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):

"headings-font": "Google_Open+Sans_700"

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-family and $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.


Sample Apps