You might notice design differences between version 1 and version 2 of LeadsHook. The main reason for this is that version 1 uses bootstrap while version 2 uses pure CSS. One major difference between the two is the use of the grid system.
Bootstrap Grid System
Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here’s how the Bootstrap grid system works:
- Rows must be placed within a .container for proper alignment and padding.
- Use rows to create horizontal groups of columns.
- Content should be placed within columns, and only columns may be immediate children of rows.
- Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Fewer mixins can also be used for more semantic layouts.
- Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via a negative margin on .rows.
- Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
Please refer here for more detail on Bootstrap Grid System: https://bootstrapdocs.com/v3.0.3/docs/css/#grid
Pure CSS Grid System
Grid classes vs. unit classes
Pure Grids consist of two types of classes: the grid class (pure-g) and unit classes (pure-u or pure-u-)
The widths of the units are fractions
Units have various class names that represent their widths. For example, pure-u-1-2 has a width of 50%, whereas pure-u-1-5 would have a width of 20%.
All child elements of a grid must be units
Child elements contained within an element with a pure-g classname must be a grid unit with a pure-u or pure-u- classname.
Content goes inside grid units
All content that is visible to people needs to be contained inside a grid unit. This ensures that the content will be rendered properly.
<div class="pure-g"> <div class="pure-u-1-3"><p>Thirds</p></div> <div class="pure-u-1-3"><p>Thirds</p></div> <div class="pure-u-1-3"><p>Thirds</p></div> </div>
Please refer here for more detail on Pure CSS Grid System: https://purecss.io/grids/