Mobile first
We should do mobile first development, but we tend to do desktop then mobile. It can affect the way the media breaks are written and thought about. see below ¯\_(ツ)_/¯Block, Element, Modifier methodology(BEM)
See these pages which explain BEM much better than I could:Media breaks
The media breaks are defined in _variables.scss these in general should be used.
// Relative breakpoints.
$breakpoint_rsmall: 45em;
$breakpoint_rmedium: 62em;
$breakpoint_rlarge: 75em;
$breakpoint_rxlarge: 100em;
$relative_breakpoints: (
rsmall: $breakpoint_rsmall,
rmedium: $breakpoint_rmedium,
rlarge: $breakpoint_rlarge,
rxlarge: $breakpoint_rxlarge
);
// respond-to example
@include respond-to(rsmall) {...
@include respond-to(rmedium) {...
@include respond-to(rlarge) {...
@include respond-to(rxlarge) {...
// respond-from example
@include respond-from(rsmall) {...
@include respond-from(rmedium) {...
@include respond-from(rlarge) {...
@include respond-from(rxlarge) {...
Mixing from's and to's is to be avoided if possible. There can be circumstance where you cannot avoid it.
There are two approaches to handling the mixing respond-to the respond-from::
// first approach
@include respond-to(rmedium) {...
@include respond-from(#{$breakpoint_rmedium - 1}) {...
// second approach
@include respond-from(rmedium) {...
@include respond-to(#{$breakpoint_rmedium + 1}) {...
Variable names
$colour_grey_1 is the same as $colour-grey-1. The SASS compiler will not error and it works as though they are same thing ¯\_(ツ)_/¯
It has been decided to stick to '_' so $colour_grey_1 is correct