FlexeeGrid

FlexeeGrid is Dynamic

Dynamically responsive grid layout framework. FlexeeGrid is useful to build quick website grid and responsive layouts and it's fully customisable with SASS. You can define the number of columns you need, padding, sizes and more!

Number of grid columns
$columns:12;

Padding for the row container
$rowPadding: 0;

Margin (top and bottom) for the row container
$rowMargin: 10px;

Padding for grid columns
$flexPadding: 0px;

(px) Standard Desktop screen size
$stdDesktop: 1224;

(px) Wide Desktop screen size screen size
$wideDesktop: 1824

(px) Standard Tablet Portrait screen size
$minTablet: 768;

(px) Standard Tablet Landscape screen size
$maxTablet: 1024;

(px) Standard Phone Portrait screen size
$minPhone: 320;

(px) Standard Phone Landscape screen size
$maxPhone: 480;

(percentage) Margin outside the main-container
$externalMargin:4;

FlexeeGrid is Responsive

Based on the desired number of columns you will define, FlexeeGrid will generate responsive layout to let you easily develop mobile web applications.

Some examples: (Resize the browser window to see the effect)

Equal columns:

<div class="row">
 <div class="flex4-12">...</div>
 <div class="flex4-12">...</div>
 <div class="flex4-12">...</div>
</div>

Different columns Desktop and Mobile:

<div class="row">
 <div class="phone-flex6-12 flex7-12">...</div>
 <div class="phone-flex6-12 flex5-12">...</div>
</div>

Centered (Desktop and Mobile):

<div class="row">
 <div class="phone-flex10-12 flex8-12 centered">...</div>
</div>

Hide & show:

<div class="row">
 <div class="hide-phone flex12-12">...</div>
 <div class="hide-tablet flex12-12 ">...</div>
 <div class="hide-desktop flex12-12">...</div>
</div>

Offsets:

<div class="row">
 <div class="off5-12 flex7-12">...</div>
</div>

FlexeeGrid is Lightweight

FlexeeGrid is very light (8KB) and you just need a SASS compiler to start using it!
Don't forget to include the Viewport meta tag in your project and I suggest to use a CSS normalisation file such as Normalize.

<meta name="viewport" content="width=device-width, initial-scale=1">