/layout-tools

Next-level mixins for layout composition

Primary LanguageCSSMIT LicenseMIT

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