Recipes - HelpfulHuman/HelpfulUI GitHub Wiki

Grid

A simple responsive grid using the clearfix and columns functions.

@require 'helpful-ui'
@require 'helpful-ui/elements'

{component('grid')}
  margin-left: -15px // gutter is 30px
  margin-right: @margin-left
  clearfix()
​
{component('col')}
  float: left
  padding-left: 15px // gutter is 30px
  padding-right: @padding-left
​
  {modifier('xs')}
    columns: 12
​
  @media (min-width: 30em)
    {modifier('sm')}
      columns: 12
​
  @media (min-width: 48em)
    {modifier('md')}
      columns: 12
​
  @media (min-width: 64em)
    {modifier('lg')}
      columns: 12