THIS PROJECT IS NOT MAINTAINED ANYMORE! This is a simple SCSS plugin to easily create grid system in your project.
I assume your project structure is like this:
/project-folder
style.scss
/partials //This is the directory of your Sass files
Copy _grid.scss
to partials
directory. Then import it from style.css
using import method @import "partials/grid";
. Then you have to setting the grid using variables like this:
// Grid variable
// ------------------
$total-cols : 12; //Total Columns
$col-width : 60px; //Column width, you can use 'em', '%' or other valid css unit as well
$gutter-width : 20px; //Gutter width
$side-gutter-width : 10px; //Side Gutter width
$show-grid-backgrounds : true; // Showing the grid background, change to 'false' to hide the background
First, set the container/wrapper of your site to center the element.
Example:
.wrapper {
@include container;
}
CSS Output:
.container {
*zoom: 1;
margin: auto;
width: 960px;
}
.container:after {
content: "";
display: table;
clear: both;
}
Use columns
mixin to set the width of an element.
Example:
.element {
@include columns(4);
}
CSS Output:
.element {
display: inline;
float: left;
margin-right: 20px;
width: 300px;
}
In case your element is in the first column within the parent, you'll need to use alpha
mixin.
Example:
.element {
@include columns(4);
@include alpha;
}
CSS Output:
.element {
display: inline;
float: left;
margin-right: 20px;
width: 300px;
margin-left: 10px;
}
Then if your element is in the last columns, use the omega
mixin.
Example:
.element {
@include columns(4);
@include omega;
}
CSS Output:
.element {
display: inline;
float: right;
margin-right: 10px;
width: 300px;
}
- 1.0.1 Adding default variables
- 1.0.0 Initial release