dragon-grid

Insanely powerful grid in just a few lines of code. 10 minutes to master.

Features

• Responsive grid
• Consistently sized fixed gutters
• Infinite nesting with ease
• On the fly grids in the form of fractions (e.g. column(1/2) would take up 1/2 the size of it's container)

CodePens

• Responsive Image Gallery
• Importable

Installation

Just import this mixin anywhere in your project for quick use.

• Stylus CLI
  • npm i -g dragon-grid
  • Add @import 'dragon' to style.styl
  • stylus -u dragon-grid -w style.styl
• Bower
  • bower i dragon-grid
  • Add @import 'bower_components/dragon-grid/dragon' to style.styl
  • stylus -w style.styl

API

Dragon runs on one mixin. This mixin requires a ratio (a fraction) to be specified. All other arguments are optional.

column(ratio = 1, cycle = 0, uncycle = 0, gutter = 30px, offset = 0, shift = false)

• ratio - A fraction of the container's width.
• cycle - Applies a margin-right: 0 to the nth element. Useful for knocking elements to the next row automatically.
• uncycle - Re-adds the gutter to the element. Useful for changing cycle within media queries.
• gutter - The size of the margin-right applied. Since we're using calc() this can be any valid unit. Pass 0 to gutter in order to remove gutters.
• offset - Applies a margin to the element in a direction specified whether this value is a positive or negative fraction.
• shift - Relatively positions an element according to the fractional value. Pass 0 to shift to "unshift" elements. Useful for source ordering.

Browser Support

• IE9+, Android 4.4+ http://caniuse.com/#search=calc