Nonchalantly Perusing Magazines

    layout-tools

    2.0.11 • Public • Published

    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

    Keywords

    none

    Install

    npm i layout-tools

    DownloadsWeekly Downloads

    3

    Version

    2.0.11

    License

    MIT

    Last publish

    Collaborators

    • mystrdat