Styles

Global styles

Globals is a common name for all SCSS declarations that do not return any CSS ouput. These are function, variables, mixins or simillar. Once declared, all of them can be consumed in stylesheets from both front-end and back-end based on project needs.

globals.scss

The file in fact stores a reference to a ./globals/index.scss file, which lists all declarations applied to the project. It is automatically read by Statik CLI and different Statik tools and should it should be considered more like a road sign to find global declarations easier.

@import "./globals/index.scss";

The actual globals file stored as ./globals/index.scss contains a reference to:

• Variables, which declare base SCSS properties across the project helper functions utilised by the boilerplate,
• Mixins, which allow to define styles that can be reused throughout the project, and
• Functions, which allow to define complex operations and abstract out common formulas that can be reused throughout the project.

@import './variables/index.scss';
@import './mixins/index.scss';
@import './functions/index.scss';

Variables

Boilerplate by default comes with a minimum amount of variables applied to the project. These variables should not be removed as they are consumed by different components of the website. We strongly encourage you to come up with project-specific variables that you would re-use and control from a single file.

• font__default--family – Default font family applied to all html tags
• font__secondary--family – Secondary font family
• font--base-size – Font size and base value for all typography related
• font__h1--font-size, font__h2--font-size, font__h3--font-size, font__h4--font-size, font__h5--font-size, font__h6--font-size.

@TBD

Mixins

• clearfix()

@TBD

Front-end styles

Back-end styles

Block styles

Basic block styles are shipped together with a blocks package, these are meant to deliver structural declarations that simply holds a block in expected look and feel. Project specific styles applied to blocks so they match the website should be applied within commons/assets/stylesheets/blocks directory.

All files are read automatically when front-end or back-end is processed.

Stylesheets are meant to override or extend default block styles

The directory structure should be fully aligned

@TBD: using statik CLI to fetch name