Global News Style Guide

This is the Global News style guide. If you're a designer or developer looking for an overview of the UI components available on Globalnews.ca, you've come the right place.

How to add to this style guide

The guide is built automatically using kss-node and the kss-webpack-plugin. If you're building a new component, there are some comments you can add to the top of your SCSS file that will pull it into the style guide when you compile the theme.

For more info, see the documentation here: https://github.com/kss-node/kss/blob/spec/SPEC.md

Standards

ITCSS

We are using Harry Robert's ITCSS model for organizing our stylesheets. Basically everything each folder is a layer and layers are ordered from low to high specificity to avoid having to overwrite styles as much as possible.

See this page for more information: https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/

This talk is also very helpful: https://www.youtube.com/watch?v=1OKZOV-iLj4

BEM

We are using the Block Element Modified (BEM) syntax developed by Yandex for naming our selectors.

There is a good introduction to BEM here: http://getbem.com/

Namespacing

Everything in the objects, components, and layout layers should be namespaced to avoid confusion. Just stick a namespace identifier to the beginning of all your classes. Here are the namespace identifiers we are using.

Object: o- Compontent: c- Layout: l-