A number of classes have been added to control the layout in a
grid-based way.
To start `row` is wrapped the elements you wish to group in a horizontal
line.
Next up, `grid-small` and `grid-large` relate to columns and behavior on
screen size. For example, `grid-large` will trigger layout changes when
the screen reaches a "desktop size" and `grid-small` for "mobile size".
The list of available column widths:
* half
* one-fourth
* three-fourths
* one-third
* two-thirds
Going in the order they are declared, for example, columns A,B - when A is
one-third and B is two-thirds. This means A will occupy 33% and B will
occupy 66%.
Additionally, look at _sass-mq.scss file if you want to define different
screen sizes.
EXAMPLE:
```
<div class="row">
<div class="grid-large two-thirds">
2/3
</div>
<div class="grid-large one-third">
1/3
</div>
</div>
```
===Sass API===
We have a helper called `media-query`. It directs calls to the sass-mq
library. Say we wanted to include a breakpoint in your sass files, do the following:
```
@include media-query($from: mobile) {
// content
}
```
You are now generating a media-queries for mobile screens.
To understand what arguments can be passed to `media-query` then look at
the sass-mq documentation. [https://sass-mq.github.io/sass-mq/](https://sass-mq.github.io/sass-mq/)
=== Other ===
Technical - implementation being used in grid is flexbox. Do not expect
support for standard HTML Grid Layout.
Dark was previously chosen as the default theme color, this meant light text on dark backgrounds. Now we move over to white. Browser extensions and system dark settings can do the heavy lifting for us. Support for a light theme is our aim.
settings/_colors.scss
Colors saw additional navbar color variables to bring cohesion to the table. For instance, $nav-bg-color.
components/_toolbar.scss
We shifted the practise of hard boiling hexidecimal values and opted for linking the variables from the color settings. Any changes to settings will be easily reflected across the toolbar with less effort.
settings/_colors.scss is populated with the color variables from
variables.scss, alongside additional link variables. $body-color was
renamed to $body-text-color to avoid confusion.
Production sees a sass compressed under the filename style.min.css.
Alternatively development mode instead creates an uncompressed version
under style.css -- `npm run build:dev`
The scripts.js in `public` dir was previously known as app.js.
Container's max-width was reflected to setting $container-page-width found within settings.
Container makes use of $gutter-half from settings for easier coding and
consistency.
Container now makes use of media queries. We add and subtract margins based on screen size. In particular, we register margin gutters when the viewport width is within the container-page-width.
.full-width-container is set to 100% width, expanding fully for each screen size. This additional class is expected to be used for content outside of textual information e.g. artwork.
We wish to create human-friendly labels around our CSS breakpoints.
Typically you would show numbers to represent media types. Now, we can
simplify and ask for "desktop", "mobile", "tablet". It should be self-explanatory to the developers.
You can find out more about the mixins SASS MQ provides here: https://sass-mq.github.io/sass-mq/