elf-scss

KO | EN

gitlite — search

#go #machine-learning #deep-learning #docker #nodejs #awesome #kubernetes #vue #awesome-list #security #ios #mcp #openai #open-source

(★ 26)

The official port of the Elf grid system to Scss.

elf-scss Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

**Prefer [Stylus](https://github.com/corysimmons/elf)?**

### 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
- [Forkable](http://codepen.io/clear-y/pen/pvvBqN)
- [Importable](http://codepen.io/clear-y/pen/oggOQP)
- [Collection of Examples](http://codepen.io/collection/nLKJkX/)

#### Installation
- Copy and paste [_elf.scss](_elf.scss) to your project
- `@import 'path/to/elf';`

#### API
View [_elf.scss](_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
- General http://caniuse.com/#search=calc
- `align-children()` http://caniuse.com/#search=flexbox

elf-scss

elf-scss Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

elf-scss

elf-scss Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README