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.