Sha256: ed709e4fadbe901be3c2e304c91590602847da3c0fa16f243b55575d99d28c6a
Contents?: true
Size: 1.85 KB
Versions: 13
Compression:
Stored size: 1.85 KB
Contents
/* ================================================================== *\
Grids ($grids)
\* ================================================================== */
/**
* Grid container
* 1. Default gutter width, change if desired
* 2. Remove `list-style` in case `.grid` is on a <ul> element
* 3. Hack to remove `inline-block` whitespace - http://cbrac.co/16xcjcl
*/
.grid {
margin: 0;
margin-left: -2rem; /* 1 */
padding: 0;
list-style: none; /* 2 */
font-size: 0; /* 3 */
}
.grid.gutter_none {
margin-left: 0;
> .item {
padding-left: 0;
}
}
.grid.gutter_quarter {
margin-left: -0.5rem;
> .item {
padding-left: 0.5rem;
}
}
.grid.gutter_half {
margin-left: -1rem;
> .item {
padding-left: 1rem;
}
}
.grid.gutter_double {
margin-left: -4rem;
> .item {
padding-left: 4rem;
}
}
/**
* Grid item
* 1. Default gutter width, change if desired
* 2. Ensures elements within `.item` start at the top
* 3. Reset `font-size` back to normal
*/
.item {
display: inline-block;
padding-left: 2rem; /* 1 */
vertical-align: top; /* 2 */
font-size: 1rem; /* 3 */
width: 100%;
}
/* Widths */
@mixin build_grid($x: "") {
.#{$x}one_column {width: 8.333% };
.#{$x}two_columns {width: (8.333% * 2)};
.#{$x}three_columns {width: (8.333% * 3)};
.#{$x}four_columns {width: (8.333% * 4)};
.#{$x}five_columns {width: (8.333% * 5)};
.#{$x}six_columns {width: (8.333% * 6)};
.#{$x}seven_columns {width: (8.333% * 7)};
.#{$x}eight_columns {width: (8.333% * 8)};
.#{$x}nine_columns {width: (8.333% * 9)};
.#{$x}ten_columns {width: (8.333% * 10)};
.#{$x}eleven_columns {width: (8.333% * 11)};
.#{$x}twelve_columns {width: (8.333% * 12)};
}
@include build_grid();
@media only screen and (min-width: 640px) {
@include build_grid("lap_");
}
@media only screen and (min-width: 960px) {
@include build_grid("desk_");
}
Version data entries
13 entries across 13 versions & 1 rubygems