Nuns Practicing Misanthropy

    dragon-grid

    1.3.0 • Public • Published

    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

    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

    Install

    npm i dragon-grid

    DownloadsWeekly Downloads

    1

    Version

    1.3.0

    License

    MIT

    Last publish

    Collaborators

    • corysimmons