Newts Parading Majestically

    grd

    1.4.0 • Public • Published

    Grd

    devDependency Status

    A CSS grid framework using Flexbox.

    • Simple: Provides just 2 base classes Grid and Cell and some modifiers.
    • Light-weight: Only 321 bytes (Gzipped).
    • Flexible: Easy to use Flexbox features.

    Flexible Box Layout Module and calc() as CSS unit value used in Grd are available on modern browsers (Chrome, Firefox, Safari, Opera, Edge and IE11).

    If you want to use Grd with Sass, you can choose grd-sass as Sass port.

    Install

    npm

    $ npm install grd

    bower

    $ bower install grd

    Usage

    <div class="Grid">
      <div class="Cell -3of12">3of12</div>
      <div class="Cell -9of12">9of12</div>
    </div>

    Grid modifiers

    Vertical layout Description
    -top Pull items to top
    -middle Pull items to middle
    -bottom Pull items to bottom
    -stretch Stretch items
    -baseline Pull items to baseline
    Horizontal layout Description
    -left Layout items to left
    -center Layout items To center
    -right Layout items to right
    -between Add spaces between items
    -around Add spaces around items

    Cell modifiers

    Cell width Description
    -fill Set item width to left
    -1of12 Set item width to 8.3%
    -2of12 Set item width to 16.7%
    -3of12 Set item width to 25%
    -4of12 Set item width to 33%
    -5of12 Set item width to 41.7%
    -6of12 Set item width to 50%
    -7of12 Set item width to 58.3%
    -8of12 Set item width to 66.7%
    -9of12 Set item width to 75%
    -10of12 Set item width to 83.3%
    -11of12 Set item width to 91.7%
    -12of12 Set item width to 100%

    License

    MIT © Shogo Sensui

    Install

    npm i grd

    DownloadsWeekly Downloads

    145

    Version

    1.4.0

    License

    MIT

    Unpacked Size

    6.04 kB

    Total Files

    5

    Last publish

    Collaborators

    • 1000ch