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