milligram/sass/_Grid.sass

162 lines
2.8 KiB
Sass
Raw Normal View History

2015-12-26 01:57:14 +00:00
// Grid
//
// .container is main centered wrapper with a max width of 1120rem (1120px)
.container
box-sizing: border-box
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-wrap
flex-wrap: wrap
.row-no-padding
padding: 0
&> .column
padding: 0
// & + .row
// margin-top: -.5rem
// padding-top: 0
// 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-* vertically aligns an individual .column
.col-top
align-self: flex-start
.col-bottom
align-self: flex-end
.col-center
align-self: center
// 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%
// Larger than mobile screen
@media (min-width: 40.0rem)
.row
flex-direction: row
margin-left: -1.0rem
width: calc(100% + 2.0rem)
.column
margin-bottom: inherit
padding: 0 1.0rem