Nouveau Print Maker

    elf-grid

    1.3.1 • Public • Published

    Prefer SCSS?

    Features

    • Unlimited nesting with consistently sized gutters.
    • Nesting without parent contexts. For instance in Jeet you have to write column(1/3 1/2) where 1/2 is the size of the containing element. All ratio grid systems aside from Elf suffer from this in some form or fashion.
    • Ratio based sizing (e.g. column(1/3).
    • Gutters can be any unit (e.g. 30px, 2rem, etc.). These are static so you can space elements vertically as well for a perfect grid.
    • Tiny file size compared to other ratio grid systems.
    • Flexbox makes short work of aligning elements vertically and horizontally.

    CodePens

    Installation

    • Copy and paste elf.styl to your project
    • @import 'path/to/elf'

    API

    (view elf.styl for mixin and parameter descriptions)

    • debug(color = blue)
    • column(ratio = 1, gutter = elf.gutter)
    • cycle(item = 0, uncycle = 0, gutter = elf.gutter)
    • offset(ratio = 0, column = true, gutter = elf.gutter)
    • span(ratio = 1)
    • shift(ratio = 1, column = true, gutter = elf.gutter)
    • unshift()
    • align-children(direction = both)

    Browser Support

    Install

    npm i elf-grid

    DownloadsWeekly Downloads

    0

    Version

    1.3.1

    License

    MIT

    Last publish

    Collaborators

    • corysimmons