Styling is compiled using SASS and follows principles from ITCSS for improved structuring and maintainability.
For pattern based styles, these should be stored alongside the handlebars file within the directory:
HTML: _patterns/*/[name].hbs
SCSS: _patterns/*/[name].scss
For site-wide, generic classes and single-purple classes, these should be stored within the styling folder and adhere to the following structure:
Single-purpose classes are CSS classes which declare a single value for a single style property, therefore performing a single purpose. The primary benefit here is that when you see a single-purpose class in HTML, you know exactly how it affects that markup but more importantly, you can change it without affecting any other views.
For example, it can be used to enhance and amend components in simple ways (.text--green, .bg--charcoal, etc).
This also reduces down the number of long-winded BEM variations needed for components, as a single-purpose class can be used to override a single property at ease.
The styling should be developed mobile first, with min-width breakpoints being used to apply variations for larger devices.
To apply a class at any given breakpoint, just append the class with @medium or @large; for example if you wish to change the display for larger devices:
<div class="display-block display-flex@large">
...
</div>
Note: not all properties have these breakpoint variations available; add them as and when they become applicable. Patterns should be shipped with their breakpoint styling, and do not need to follow this pattern for simplicity - this is more applicable towards single-purpose classes.