Euroflorist DS Framework includes a responsive, mobile-first fluid grid system based on 12 columns. Predefined classes are easy to implement layout options.
There are few rules to properly implement for creating page layouts through a series of rows and columns.
- Columns must be placed within a
.rowelement 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.
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:
||fixed-width (max-width: 1200px)|
Build the responsive layout base on below classes:
||Extra small <768px|
||Small devices ≥768px|
||Medium devices ≥992px|
||Large devices ≥1200px|
Hide or show elements using classes below:
||Show for all resolution|
||Hide for all resolution|
||Show resolution ≥768px|
||Hide resolution ≥768px|
||Show resolution ≥992px|
||Hide resolution ≥992px|
||Show resolution ≥1200px|
||Hide resolution ≥1200px|