Skip to content

Latest commit

 

History

History
36 lines (29 loc) · 1.5 KB

README.md

File metadata and controls

36 lines (29 loc) · 1.5 KB
Raw

Prefer Stylus?

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.scss to your project
  • @import 'path/to/elf';

API

View _elf.scss 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