iddqd-tools

Anticipate the difficult by managing the easy. - Phu K. C'Eses

Click here for demo!

npm install iddqd-tools --save

@import node_modules/iddqd-tools/sass/all

align

• align children with Photoshop-like props in either direction converted to flexbox
• emulates internal padding between children

+align(<horizontal> <vertical>, row(default)|col|column, <unit>)

// horizontal: left|center|middle|right
// vertical: top|center|middle|bottom

// Example
.container
  +align(right center, col, 10px)

grid

• bidirectional fluid or fixed layout
• spreads children to fit exact row or column space
• emulates internal padding between children

+grid(<number> <?number:fixed>, row(default)|col|column, <unit>, wrap(default)|nowrap)

// Example
.container
  +grid(4, row, 20px)

  @media (max-width: 640px)
    +grid(1 2.5, col, 10px, nowrap)

other

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