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