grid-framework
v1.0.0
Published
Sass framework for using column grid systems
Downloads
1
Readme
Flama’s Grid Framework
Sass framework for using column grid systems
Why columns? When to use?
We believe in consistency, but also in a content-fluid decision. So that's why we built our own column grid system which should be used only in cases that you have to organize elements in a pre-defined horizontal system.
Not all layouts will have a column system, threfore the use of columns are not mandatory.
Our Solution
What we aimed to do was create a framework that could work inside any container, regardless of its width. The variables we needed were: number of columns and gutter, and the column width would be adapted accoringly.
Our solution is a SCSS based system, and a mixin, include and calc structure that could be set in any layout/component (Later discussion in stylesheets and folder architecture) that relies in two variables at first: number of columns and gutter.
It also include custom settings for any other working screen you might be working with. It works by setting up a minimum screen size for tablet or mobile and later working out the columns, gutter variables for those screens.
Instalation
Install Flama Grid via bower:
bower install flama-grid
How to use?
First things first: get to know your variables.
The code is really simple. And it will start as two variables only: number of columns and gutter.
$nOfColumns: 12;
$gutter: 1rem;
$columnWidth: ( 100%/#{$nOfColumns} - #{$gutter} );
You will notice that same variables happens for tablets and mobile.
$nOfColumnsTablet: 8;
$gutterTablet: .5rem;
$columnWidthTablet: ( 100%/#{$nOfColumnsTablet} - #{$gutterTablet} );
$nOfColumnsMobile: 4;
$gutterMobile: .5rem;
$columnWidthMobile: ( 100%/#{$nOfColumnsMobile} - #{$gutterMobile} );
And then, set up your maximum tablet and mobile width.
$tabletWidth: 640px;
$mobileWidth: 480px;
Second stuff comes right after: get to know the system.
There you'll see a bunch of mixins for mobile and tablet. They will be setting up the grid the way it should be based on the variables you have set before. Apply it using @include grid(number).
And also, there will be set some offset mixins in case you might wanna get off the grid for some reason. Apply it using @include offSetRight(number) or @includeOffSetLeft(number).
Not all set, yet! Set up your container width too.
Mind that the grid works without setting a width, but it might be compromise the overall look of the application and it's certainly not the best approach for a multiple screen application.
.container {
width: calc(60% + 240px);
max-width: 100%;
margin-right: auto;
margin-left: auto;
overflow: auto;
}
Import Flama Grid file:
@import "flama-grid/flama-grid"
Override default settings
Create a file or copy content from "flama-grid/flama-grid-overrides.scss"
, overwrite default values if needed, then import in your project.
All set! You're good to go!
You can always use our Codepen for reference.