CSS Styles

Sass is the CSS preprocessor. Autoprefixer is also included.

Architecture

ITCSS is the chosen CSS architecture.

• settings: Global variables, site-wide settings, config switches, etc.
• tools: Site-wide mixins and functions.
• generic: Low-specificity, far-reaching rulesets (e.g. resets).
• elements: the main HTML elements ( base.scss wil contain the generic styleguide andstructure.scss most of the used elements).
• objects: Common Objects, abstractions, and design patterns.
• components: Discrete, complete chunks of UI.
• utilities: High-specificity, very explicit selectors. Overrides and helper classes (e.g. .u-hidden {})

Naming

We use BEM syntax.

.block .block__element --modifier

Namespaces

• o-: Objects
• c-: Components
• u-: Utilities
• is-, has-: a temporary, optional state or condition
• js-: applies a javascript behaviour
• fx-: applies animations or visual effects

Image management

Name the images always in lower case because the server could not recognize camel case or upper case.