The layout-tools from zrooda

layout-tools's Introduction

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!

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(<horizontal> <vertical>, <spacing>, <direction>)

// 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(<items-x> <?items-y>, <spacing>, <direction>, <wrap>)

// 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(<left|vertical> <top|horizontal> <?right> <?bottom>)

.centered
  +abs(50%)

.other
  +fix(fill 15px)
  +abs(right center)
  +rel(right 20px fill)
  +fix(center bottom 5px)
  +abs(right 30% top 20px bottom)