Layout

Grid System

Euroflorist DS Framework includes a responsive, mobile-first fluid grid system based on 12 columns. Predefined classes are easy to implement layout options.

Implementing

There are few rules to properly implement for creating page layouts through a series of rows and columns.

  • Columns must be placed within a .row element for right alignment.
  • Rows can be used to create horizontal groups of columns.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example: .col-xs-6 (50% of the width).
  • If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

Classes

Euroflorist DS Grid System contains a group of flexible classes to prepare layout fitted to mobile devices as same as to desktop.

Wrap your grid by element with one of those class:

.container fixed-width (max-width: 1200px)
.container-fluid full-width

Build the responsive layout base on below classes:

.col-xs-* Extra small <768px
.col-sm-* Small devices ≥768px
.col-md-* Medium devices ≥992px
.col-lg-* Large devices ≥1200px

Hide or show elements using classes below:

.display Show for all resolution
.display-none Hide for all resolution
.display-tablet-block Show resolution ≥768px
.display-tablet-none Hide resolution ≥768px
.display-desktop-block Show resolution ≥992px
.display-desktop-none Hide resolution ≥992px
.display-lg-block Show resolution ≥1200px
.display-lg-none Hide resolution ≥1200px

Example

<div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
  </div>
  <div class="row">
    <div class="col-md-8"></div>
    <div class="col-md-4"></div>
  </div>
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
  </div>
  <div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
  </div>