Grid Framework
A highly customizable responsive grid framework.
Grid Framework lets you build the grid system that you want. It generates what you need and nothing else. It can also generate some popular grids like Bootstrap and Pure.
Installation
Download _grid-framework.scss
from the src
directory.
Alternatively, you can download a predefined grid named default-grid.css
that will cover most of your needs in terms of grids.
Usage
Create a .sass
or .scss
file, import the grid framework, make the rows then generate the grid that you want. Here's a minimalistic example:
@import "grid-framework";
@include make-rows;
@include make-grid(3, 'xs');
@media (min-width: 480px) {
@include make-grid(6, 'sm');
}
@media (min-width: 768px) {
@include make-grid(12, 'md');
}
This will generate a 3 columns grid for very small screens (e.g. phones), a 6 columns grid for small screens (e.g. small tablets, big phones) and a 12 columns grid for everything else.
In your markup you can then create a responsive grid like this:
<div class="row">
<div class="col-xs-1-3 col-sm-1-6 col-md-1-12"></div>
...
</div>
This results in 3 columns on the smallest screens, 6 on small screens and 12 on everything else.
Customization
Don't want a prefix? Omit it:
@include make-grid(12, '');
// .col-1-12, .col-2-12, etc.
Want push and pull functionality? Add it to the options:
@include make-grid(12, 'lg', 'offset' 'push' 'pull');
// .col-offset-lg-3-12, .col-push-4-12, .col-pull-5-12
Prefer 1-2
over 6-12
? Enable the smart class names:
$gf-smart-class-names: true; // before the import
@import "grid-framework";
@include make-grid(12, 'md');
// .col-md-1-2, .col-md-1-3, .col-md-1-4, .col-md-1
Don't need offsets? Fine:
@include make-grid(12, 'sm', ''); // '' == no options
Nostalgic about Bootstrap 2's span
prefix? Ok:
$gf-prefix: 'span'; // before the import
@import "grid-framework";
@include make-grid(12, '');
// .span-1-12, .span-2-12, .span-3-12
Contributing
- Fork it ( http://github.com//grid-framework/fork )
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request