SmallFront

Simple - Easy - Free

Grid

Grid - Just 6 Columns!


SmallFront includes a responsive grid system that appropriately scales up to 6 columns as the device or viewport size increases.

SmallFront use the "Flexible Box Module", usually referred to as flexbox, it was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.

SmallFront Grid Systems can be used for creating page layouts through a series of rows and columns that house your content. Here are the basics rules:

  • Rows must be placed within a .wrapper (fixed-width) for proper alignment and padding.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • Rows create horizontal groups of columns.
  • Predefined grid classes like .row and .col-3 are available for quickly making grid layouts.
  • Grid columns are created by specifying the number of six available columns you wish to include. For example, six equal columns would use six .col-1. Three equal columns would use three .col-2. Two equal columns would use three .col-3.
  • If more than 6 columns are placed within a single row, each extra columns will wrap onto a new line.

Col-1

Col-1

Col-1

Col-1

Col-1

Col-1

Col-2

Col-2

Col-2

Col-3

Col-3

Col-4

Col-2

Col-5

Col-1

Col-6

Grid - Breakpoints


  1. Large Devices: over 1200px
  2. Medium Devices: 600px to 1199px
  3. Small Devices: less than 600px

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices.

  • For large devices use class "col-x", sample: <div class="col-2">content</div>.
  • For medium devices, the classes have a "m" at the end, sample: <div class="col-2 col-3m">content</div>.
  • For small devices, all div columns will automatically take 100% of the parent container.

<div class="row">

   <div class="col-2 col-3m">content</div>

   <div class="col-2 col-3m">content</div>

   <div class="col-2 col-6m">content</div>

</div>

Col-2 Col-3m

Col-2 Col-3m

Col-2 Col-6m

Grid - Media Queries


Use the following media queries to create the key breakpoints in SmallFront grid system.

/* Large devices (large desktops, 1200px and up) */
No media query since this is the default in SmallFront

/* Medium devices (tablets and small desktops) */
@media only screen and (min-width: 600px) and (max-width: 1199px) { ... }

/* Small devices (phones, less than 600px) */
@media only screen and (max-width: 599px) { ... }

Note: On small devices (less than 600px), all columns (div class="col-x") will take 100% of the parent container. This process will happen automatically.