Adding Global Styles

It is generally better to separate components and libraries into their own packages so they can be included only if needed.

In some cases it makes sense to include some javascript or sass on every page.

In these cases you can add to the @<theme_name>/global or @<theme_name>/core packages.

Sass Mixins, Functions, and Variables

Sass code that does not generate CSS style rules when compiled, such as mixins, settings, and tools, should go in @<theme_name>/core. Other sass packages can include this package to access your globals.

@<theme_name>/core/settings should contain global Sass variables.

@<theme_name>/core/tools should contain Sass functions and mixins.

Sass Rules

Sass code that results in CSS that should be included on every page when compiled belongs in the @<theme_name>/globals package.

@<theme_name>/globals/components should contain global component styling.

@<theme_name>/globals/elements should contain base element styling (eg. ul, li, etc.). This should generally not be necessary since Bolt handles this internally.

@<theme_name>/globals/misc should be extremely small and contain on ly site-specific overrides.

@<theme_name>/globals/objects should contain low-level css objects. (todo what does this actually mean.)

@<theme_name>/globals/utilities should contain utility classes, for example u-my-utility.

Run Gulp

After changing a global style, run gulp.