//Variables
$grid-columns: 12;
$grid-max-width: 65em;
$breakpoint-small: "only screen and (min-width: 20em)";
$breakpoint-medium: "only screen and (min-width: 30em)";
@mixin border-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
%clearfix {
*zoom: 1;
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
*, *:after, *:before {
margin: 0;
padding: 0;
@include border-box;
}
img {
width: auto;
max-width: 100%;
height: auto !important;
}
.wrapper {
width: 100%;
margin: 0 auto;
}
.wrapper, .row {
@extend %clearfix;
}
[class*='column-'] {
float: left;
padding: 1em;
width: 100%;
min-height: 1px;
}
@media #{$breakpoint-medium} {
.wrapper {
width: 95%;
max-width: $grid-max-width;
}
@for $i from 1 through $grid-columns {
.column-#{$i} {
width: 100% / $grid-columns * $i;
}
}
}
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.