Style Guide _

Grid

.main-grid

Our general guideline is to use css grids for page and component layouts, and flexbox for smaller problems.

.main-grid is a css class specified in _grids.scss. This is the grid class we apply to all pages on the HackerYou website. It is a flexible grid that places all content in the centre column with 20px of padding around the entire page.

.col-grid

.col-grid is a css class specified in _grids.scss that builds a grid for you. You can extend it to use on interior page layouts or component layouts. It is a 14 column grid with 30px of row and column gutters, but you can override that in your page/component-specific sass.

To lay out elements on a grid (inside a grid container), you must specify grid-column: span n or grid-column: n / n referring to the column number where the item should begin and end. The default is grid-column: span 1.

Below is a demo of .col-grid and some example layouts:

grid-column: span 14
span 1
span 12
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 6
span 6
span 1
2 / span 7
9 / span 5