layout-tools

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)

other

• clearfix
• hide-text
• truncate
• scrollable
• unselectable
• aspect-ratio
• background-retina
• pseudo
• em, rem