Skip to content

Instantly share code, notes, and snippets.

@mcurren
Created September 28, 2015 19:01
Show Gist options
  • Save mcurren/b4449a7949da6a6e7147 to your computer and use it in GitHub Desktop.
Save mcurren/b4449a7949da6a6e7147 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v3.2.5)
// ----
// Set the desired number of columns in a variable for flexibility
$total-columns: 24;
// Create a placeholder for the grid container
%grid-container {
width:100%;
max-width:1000px; // adjust to your needs
margin:0 0 1.5em; // bit of margin bottom for vertical rythm
}
// Create a placeholder for styles common to all columns
%grid {
float:left;
margin:0;
padding:0 2%; // flexible gutters thanks to box-sizing:border-box
}
// Loop through all the columns and generate the correct width
// use @extend to pull in common styles
@for $i from 1 through $total-columns {
%grid-#{$i}-of-#{$total-columns} {
@extend %grid;
width: ($i / $total-columns) * 100%;
}
}
// Now make use of the placeholders with meaningful class names
.products-page {
@extend %grid-container;
}
.products-sidebar {
@extend %grid-8-of-24; // 1/3 of page
}
.products-list-container {
@extend %grid-16-of-24; // 2/4 of page
.products-list {
@extend %grid-container; // nested grid
}
.product {
@extend %grid-6-of-24; // new grid context, each product is 1/4 of container
}
}
.products-page, .products-list-container .products-list {
width: 100%;
max-width: 1000px;
margin: 0 0 1.5em;
}
.products-list-container .product, .products-sidebar, .products-list-container {
float: left;
margin: 0;
padding: 0 2%;
}
.products-list-container .product {
width: 25%;
}
.products-sidebar {
width: 33.33333%;
}
.products-list-container {
width: 66.66667%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment