Evo

Layout

Evo does not require usage of any particular grid system. Evo features a rudimentary classes for layout and positioning, for which you can use if you have your own grid system. Try two-up, three-up,four-up, or six-up classes for a simple responsive page layout option.

12 Column Grid

1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12

Viewport Layouts

  • Half Viewport
  • Full Viewport

Layout Spacers

  • Spacers
FPO Block
  • FPO Code Block

Bootstrap Grid Layouts

Usage

To use the grid, grab the code or simply connect to the style sheet.

<link rel="stylesheet" href="../css/bootstrap-grid-only.css">

Be sure to follow the Bootstrap convention correctly by at least nesting a col-xs-12 inside a row, and place the row inside a container as follows.

<div class="container">
  <div class="row">
   <div class="col-xs-12">
     <!-- your content here -->
   </div><!-- /.col -->
  </div><!-- /.row -->
</div><!-- /.container -->

To allow elements to stretch the full-width of the screen, place them outside the container. Or, use container-fluid which stretches nearly to the edges of the screen. Use multiple containers in the page if necessary, but avoid nesting them.

A foundation version of the grid is available from here.

  • 1 Column Grid
  • 2 Column Grid
  • Alt 2 Column Grid
  • Alt 2 Column Grid Flipped
  • Alt Right 2 Column Grid
  • 3 Column Grid
  • 4 Column Grid