Grid
Page layout
We use sections for our vertical rythm. Each section has padding on the top and bottom. Inside sections we use elements with a class of .container to center the content of the page to the grid. Inside the container you can then use rows to layout your columns.
To further vertically space sections out add a class of padded to them. This increases top and bottom padding from 2rem to 4rem
Column 1
Column 2
Class names
The grid at Zuto is buit using LostGrid with mobile first in mind. We have 12 columns and we have defined our own grid class names.
- .col-# - starts at 0 and above
- .col-#-small - 360px width and above
- .col-#-smedium - 480px width and above
- .col-#-sub-medium - 600px width and above
- .col-#-medium - 960px width and above
- .col-#-large - 1080px width and above
- .col-#-x-large - 1264px width and above
# is the number of the column.
Available numbers are: 1,2,3,4,5,6,7,8,9,10,11
Usage
The usage is basically the same as any grid framework, the .col-# are wrapped around .row
Column 1
Column 2
Column 1
Column 2
Media Queries
In SASS you will often want to write media queries to style elements on different screen sizes. All our breakpoints are defined in SASS Base and we have veriables for each.
- $small
- $medium
- $sub-medium
- $large
- $x-large
Our media queries are formatted as follows.
@media screen and (min-width: $sub-medium) {
// styles for tablet (600px) and up
}
Grid Usage Examples
Two column layout
Right to left
To reverse the order of the columns, add a .r-t-l class to the row. This is useful for if you want to reorder columns on desktop.
In the example below on mobile the columns are full width and are ordered by their position in the HTML. On desktop these columns are reversed.
Column 1
Column 2