-
Notifications
You must be signed in to change notification settings - Fork 0
/
grid.sass
32 lines (28 loc) · 837 Bytes
/
grid.sass
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// Simple grid system based loosely on http://thesassway.com/intermediate/simple-grid-mixins
// Include in parent of columns to kill default margin of inline-block elements.
@mixin row()
font-size: 0
// Column mixin
@mixin col($col, $sum, $gap: 1em, $align: top, $first: false, $last: false)
box-sizing: border-box
display: inline-block
font-size: 16px
padding-left: if($first, 0, $gap)
padding-right: if($last, 0, $gap)
width: 100%
&.fluid
width: percentage($col/$sum)
// Optional media query
@media only screen and (min-width: 768px)
width: percentage($col/$sum)
vertical-align: $align
// Example usage
.parent
@include row
.child
background-color: #efefef
font-family: "Arial"
padding: 20px
@include col(1, 3)
.child:nth-child(2)
background-color: #cdcdcd