- Unlimited nesting with consistently sized gutters.
- Nesting without parent contexts. For instance in Jeet you have to write
1/2is 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.
- Gutters can be any unit (e.g.
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.
- Copy and paste elf.styl to your project
(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)
align-children(direction = both)