FLOWStrap
FLOWStrap is an interesting grid for developing responsive applications, mobile first projects on the web and HTML5 Hybrid Apps.

Designed for mobile Applications

It's not a framework, it's an mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

Responsive

One Grid, every device. FLOWStrap scales your website and applications with a single code base, for mobile phones, tablets and desktops with once grid.

Lightweight

FLOWStrap is that, a lightweight CSS grid. It's not a framework with all components or controls. Get RESET CSS optional. The grid is what you get.

12 Column

The 12 column structure gives the developer numerous design options for building apps. FLOWStrap supports Nesty Stacked, push classes and centeredness.

DOCUMENT SETTINGS

In the first, you set a class of container. The container included the lattice spacing and default settings of this grid. Inside this, you work with row and col.

span-6

span-6

  1. <div class="container">
  2.    <div class="row">
  3.         <div class="col span-6">
  4.              <p class="fs-grid-gray fs-centered">span-6</p>
  5.         </div>      
  6.         <div class="col span-6">
  7.               <p class="fs-grid-gray fs-centered">span-6</p>
  8.         </div>      
  9.     </div>
  10. </div>
For lattice spacing: 3px;
For P-Tag : 
    font-size: 0.9em;
    padding: 5px 0;

CONTENT COLUMNS

span-12

  1. <div class="row"> 
  2.   <div class="col span-12"> 
  3.      <p>span-12</p>
  4.   </div> 
  5. </div> 

span-6

span-6

  1. <div class="row">
  2.      <div class="col span-6">
  3.           <p>span-6</p>
  4.      </div>      
  5.      <div class="col span-6">
  6.           <p>span-6</p>
  7.      </div>      
  8. </div>

span-4

span-4

span-4

  1. <div class="row">
  2.    <div class="col span-4">
  3.         <p>span-4</p>
  4.    </div>      
  5.    <div class="col span-4">
  6.         <p>span-4</p>
  7.    </div>      
  8.    <div class="col span-4">
  9.         <p>span-4</p>
  10.    </div>      
  11. </div>

COMBINATION COLUMNS

span-1

span-11

span-1

span-1

span-1

span-1

span-1

span-1

span-1

span-1

span-1

span-1

span-1

span-1

span-2

span-10

span-2

span-2

span-2

span-2

span-2

span-2

span-3

span-9

span-3

span-3

span-3

span-3

span-4

span-8

span-4

span-4

span-4

span-5

span-7

span-6

span-6

CENTERED COLUMNS

Elements can be specified centered.
  1. <div class="col span-4 centered"> 
  2.        <p>4 Columns</p> 
  3. </div>

12 Columns

11 Columns

10 Columns

9 Columns

8 Columns

7 Columns

6 Columns

5 Columns

4 Columns

3 Columns

2 Columns

1 Columns

NESTING STACKY GRID

Elements can be nested arbitrarily, based on 12 columns. Within an element in turn applies the 12 column rule.

span-4

span-6

span-4

span-3

span-3

span-3

span-3

span-8

span-7

span-5

span-4

span-4

span-4

span-7

span-4

span-4

span-4

span-4

span-4

span-4

span-5

  1. <div class="row mt10">  
  2.    <div class="col span-4 border">
  3.       <div class="col span-6 box-inline alpha"> 
  4.             <p>span-4</p> 
  5.       </div> 
  6.       <div class="col span-6 box-inline omega"> 
  7.             <p>span-6</p> 
  8.       </div>
  9.       <p>span-4</p> 
  10.    </div>
  11.  
  12.    <div class="col span-8 border">
  13.       <div class="col span-3 box-inline alpha"> 
  14.           <p>span-3</p> 
  15.       </div> 
  16.       <div class="col span-3 box-inline"> 
  17.           <p>span-3</p> 
  18.       </div>  
  19.       <div class="col span-3 box-inline"> 
  20.           <p>span-3</p> 
  21.       </div> 
  22.       <div class="col span-3 box-inline omega"> 
  23.           <p>span-3</p> 
  24.       </div>
  25.  
  26.       <p>span-8</p> 
  27.       </div>     
  28. </div> 

PUSH THE GRID

Elements can be moved to the right by push classes is specified.
  1. <div class="row mt10"> 
  2.     <div class="col span-2 push-20"> 
  3.         <span class="pixels">span-2</span> 
  4.     </div>  
  5. </div>

span-2

span-2
push 20%

span-2
push 40%

span-2
push 60%

span-2
push 80%

LEFT AND RIGHT

Elements can be positioned to the left and right.
  1. <div class="col span-6"> 
  2.     <p> 
  3.      <span class="pixels">span-6</span> 
  4.      <span class="percentage"></span> 
  5.     </p> 
  6. </div> 
  7.  
  8. <div class="col span-2 push-33"> 
  9.     <p> 
  10.      <span class="pixels">span-2</span> 
  11.      <span class="percentage">push 30%</span> 
  12.     </p> 
  13. </div>

span-6

span-2
push 30%

span-4

span-2
push 50%