Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Semantic resposive grids with CSS Crush
/* =============================================================================
Variables
========================================================================== */
@define {
grid-gutter: 30px;
small: min-width:36em;
medium: min-width:48em;
large: min-width:62.5em;
xlarge: min-width:75em;
}
/* =============================================================================
Grids
========================================================================== */
@mixin span {
width: math(arg(0,12)/arg(1,12)*100)%;
}
@mixin col-base {
background-clip:padding-box !important;
width: 100%; /* default width */
border-left: $(grid-gutter) solid transparent;
vertical-align: top;
}
@abstract row {
clear: left;
overflow: hidden;
margin-left: -$(grid-gutter);
}
/* for floated grids */
@abstract col {
@include col-base;
float:left;
}
/* for inline-block grids */
@abstract col-inline {
@include col-base;
display: inline-block;
}
@fragment cols {
@abstract arg(0)-col-one { @include span(1); }
@abstract arg(0)-col-two { @include span(2); }
@abstract arg(0)-col-three { @include span(3); }
@abstract arg(0)-col-four { @include span(4); }
@abstract arg(0)-col-five { @include span(5); }
@abstract arg(0)-col-six { @include span(6); }
@abstract arg(0)-col-seven { @include span(7); }
@abstract arg(0)-col-eight { @include span(8); }
@abstract arg(0)-col-nine { @include span(9); }
@abstract arg(0)-col-ten { @include span(10); }
@abstract arg(0)-col-eleven { @include span(11); }
@abstract arg(0)-col-twelve { @include span; }
}
/* xsmall (default value, adopting the mobile first approach) */
@fragment cols(xsmall);
/* small */
@media screen and ($(small)) {
@fragment cols(small);
}
/* medium */
@media screen and ($(medium)) {
@fragment cols(medium);
}
/* large */
@media screen and ($(large)) {
@fragment cols(large);
}
/* xlarge */
@media screen and ($(xlarge)) {
@fragment cols(xlarge);
}
/* =============================================================================
Layout
========================================================================== */
.my-semantic-row-class {
@extend row;
}
/* span 2 cols at large breakpoint, 4 at medium, 6 at small, 12 (full width) by default */
.my-semantic-column-class {
@extend col, xsmall-col-twelve, small-col-six, medium-col-four, large-col-two;
}
/* span 6 cols at large breakpoint, 12 by default */
.my-semantic-column-class2 {
@extend col, xsmall-col-twelve, large-col-six;
}
/* span 6 cols at large breakpoint, 12 by default */
.my-semantic-column-class3 {
@extend col, xsmall-col-twelve, large-col-six;
}
/* =============================================================================
Example Output
========================================================================== */
.my-semantic-row-class {
clear: left;
overflow: hidden;
margin-left: -30px;
}
.my-semantic-column-class,
.my-semantic-column-class2,
.my-semantic-column-class3 {
float: left;
background-clip: padding-box;
width: 50%;
border-left: 30px solid transparent;
}
/* xsmall (default value, adopting the mobile first approach) */
.my-semantic-column-class,
.my-semantic-column-class2,
.my-semantic-column-class3 {
width: 100%;
}
/* small */
@media screen and (min-width:36em) {
.my-semantic-column-class {
width: 50%;
}
}
/* medium */
@media screen and (min-width:48em) {
.my-semantic-column-class {
width: 33.33333%;
}
}
/* large */
@media screen and (min-width:62.5em) {
.my-semantic-column-class {
width: 16.66667%;
}
.my-semantic-column-class2,
.my-semantic-column-class3 {
width: 50%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment