milligram/src/_Grid.sass
2016-09-11 00:50:41 -03:00

158 lines
2.8 KiB
Sass
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// Grid
//
// .container is main centered wrapper with a max width of 112.0rem (1120px)
.container
margin: 0 auto
max-width: 112.0rem
padding: 0 2.0rem
position: relative
width: 100%
// Using flexbox for the grid, inspired by Philip Walton:
// http://philipwalton.github.io/solved-by-flexbox/demos/grids/
// By default each .column within a .row will evenly take up
// available width, and the height of each .column with take
// up the height of the tallest .column in the same .row
.row
display: flex
flex-direction: column
padding: 0
width: 100%
&.row-no-padding
padding: 0
&> .column
padding: 0
&.row-wrap
flex-wrap: wrap
// Vertically Align Columns
// .row-* vertically aligns every .col in the .row
&.row-top
align-items: flex-start
&.row-bottom
align-items: flex-end
&.row-center
align-items: center
&.row-stretch
align-items: stretch
&.row-baseline
align-items: baseline
.column
display: block
flex: 1
margin-left: 0
max-width: 100%
width: 100%
// Column Offsets
&.column-offset-10
margin-left: 10%
&.column-offset-20
margin-left: 20%
&.column-offset-25
margin-left: 25%
&.column-offset-33,
&.column-offset-34
margin-left: 33.3333%
&.column-offset-50
margin-left: 50%
&.column-offset-66,
&.column-offset-67
margin-left: 66.6666%
&.column-offset-75
margin-left: 75%
&.column-offset-80
margin-left: 80%
&.column-offset-90
margin-left: 90%
// Explicit Column Percent Sizes
// By default each grid column will evenly distribute
// across the grid. However, you can specify individual
// columns to take up a certain size of the available area
&.column-10
flex: 0 0 10%
max-width: 10%
&.column-20
flex: 0 0 20%
max-width: 20%
&.column-25
flex: 0 0 25%
max-width: 25%
&.column-33,
&.column-34
flex: 0 0 33.3333%
max-width: 33.3333%
&.column-40
flex: 0 0 40%
max-width: 40%
&.column-50
flex: 0 0 50%
max-width: 50%
&.column-60
flex: 0 0 60%
max-width: 60%
&.column-66,
&.column-67
flex: 0 0 66.6666%
max-width: 66.6666%
&.column-75
flex: 0 0 75%
max-width: 75%
&.column-80
flex: 0 0 80%
max-width: 80%
&.column-90
flex: 0 0 90%
max-width: 90%
// .column-* vertically aligns an individual .column
.column-top
align-self: flex-start
.column-bottom
align-self: flex-end
.column-center
align-self: center
// Larger than mobile screen
@media (min-width: 40.0rem) // Safari desktop has a bug using `rem`, but Safari mobile works
.row
flex-direction: row
margin-left: -1.0rem
width: calc(100% + 2.0rem)
.column
margin-bottom: inherit
padding: 0 1.0rem