Sha256: be16a0425ae1ca87c47a64ee035a8eb72e338819684c029032e3853e1957b7b0
Contents?: true
Size: 1.68 KB
Versions: 11
Compression:
Stored size: 1.68 KB
Contents
//
// Grid system
// --------------------------------------------------
.container {
margin-right: auto;
margin-left: auto;
// padding-left: ($grid-gutter-width / 2);
// padding-right: ($grid-gutter-width / 2);
@include clearfix();
@media (min-width: 768px) {
width: 750px;
}
@media (min-width: 992px) {
width: 970px;
}
@media (min-width: 1200px) {
width: 1170px;
}
}
// GRID COLUMN SETUP
// -------------------------
.grid{
@include clearfix();
> .column {
display: block;
min-height: 1px;
float: left;
padding-left: 5px;
padding-right: 5px;
&:first-child {
margin-left: 0;
}
&.righted{
float: right;
}
&.centered{
float: none;
margin-left: auto;
margin-right: auto;
}
}
}
@mixin column-child($columns) {
> .column {
width: percentage(1 / $columns);
}
}
@mixin column-self($columns, $value) {
&.column {
width: percentage(1 / $columns * $value);
}
}
$columns: "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve";
@for $i from 1 through length($columns) {
.grid.#{nth($columns, $i)} {
@include column-child($i + 1);
@if $i - 1 > 0 {
@for $j from 1 through $i - 1 {
> .#{nth($columns, $j)}{
@include column-self($i + 1, $j + 1);
}
}
}
}
}
// Go full width at less than 480px
@media only screen and (max-width: 480px) {
@for $i from 1 through length($columns) {
.grid.#{nth($columns, $i)} {
@include column-child(1);
@for $j from 1 through $i {
> .#{nth($columns, $j)}{
@include column-self($i + 1, $i + 1);
}
}
}
}
}
Version data entries
11 entries across 11 versions & 1 rubygems