https://github.com/zr00da/layout-tools
Next-level mixins for layout composition
https://github.com/zr00da/layout-tools
css css-grid layout mixin sass scss ui
Last synced: 12 days ago
JSON representation
Next-level mixins for layout composition
- Host: GitHub
- URL: https://github.com/zr00da/layout-tools
- Owner: zr00da
- License: mit
- Created: 2017-02-07T19:15:01.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-20T17:53:23.000Z (about 9 years ago)
- Last Synced: 2025-10-27T15:58:46.460Z (7 months ago)
- Topics: css, css-grid, layout, mixin, sass, scss, ui
- Language: CSS
- Homepage: http://codepen.io/salsita/full/bgxWBX/
- Size: 53.7 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
> Anticipate the difficult by managing the easy. - Phu K. C'Eses
High polish expressive mixins for CSS layout authors, available as a bundle or separately.
[Click here for demo!](http://codepen.io/salsita/full/bgxWBX/)
`npm install layout-tools --save`
`@import node_modules/layout-tools/sass/all`
## align
- expressive wrapper over flexbox
- aligns children inside parent with Photoshop-like props in either direction
- emulates internal padding between children
`+align( , , )`
```Sass
// horizontal: left(default)|center|middle|right
// vertical: top(default)|center|middle|bottom
// spacing: unit(default 0)
// direction: row(default)|col|column
// Example
.container
+align(right center, 10px, col)
```
## grid
- bidirectional fluid or fixed layout
- spreads children to fit exact row or column space
- emulates internal padding between children
`+grid( , , , )`
```Sass
// spacing: unit(default 0)
// direction: row(default)|col|column
// wrap: wrap(default)|nowrap
// Example
.container
+grid(4, 20px)
@media (max-width: 640px)
+grid(1 2.5, col, 10px, nowrap)
```
## rel, abs, fix
- expressive unified wrappers over positioning
- keywords `center|middle` with automatic transform offset fix
- keyword `fill` that accepts distance off screen edges
- smart shorthands (`center`, `25px`, `fill`, `fill 10px`)
- configurable circular flow of orientation, default `left top right bottom`
- internal overwrite conflict detection
`+abs( )`
```Sass
.centered
+abs(50%)
.other
+fix(fill 15px)
+abs(right center)
+rel(right 20px fill)
+fix(center bottom 5px)
+abs(right 30% top 20px bottom)
```
## other
- [clearfix](sass/clearfix.sass)
- [hide-text](sass/hide-text.sass)
- [truncate](sass/truncate.sass)
- [scrollable](sass/scrollable.sass)
- [unselectable](sass/unselectable.sass)
- [aspect-ratio](sass/aspect-ratio.sass)
- [background-retina](sass/background-retina.sass)
- [pseudo](sass/pseudo.sass)
- [em, rem](sass/em-rem.sass)