Nurturing Pluto's Martians

    @servicensw/grid

    2.1.1 • Public • Published

    @servicensw/grid

    Grid component

    Service NSW package documentation and examples
    (Login credentials required)

    Installation

    npm install @servicensw/grid --save-dev
    

    How to use

    CSS

    • PostCSS workflow: @import '@servicensw/grid';
    • Sass/Eyeglass: @import 'servicensw-grid';
    • Native CSS: @import url('dist/grid.css');
    • Link tag: <link href="dist/grid.css" rel="stylesheet" type="text/css">

    HTML

    <div class="container">
      <div class="grid">
        <div class="grid__col grid--6-col"></div>
        <div class="grid__col grid--6-col"></div>
      </div>
      <div class="grid">
        <div class="grid__col grid--4-col"></div>
        <div class="grid__col grid--8-col"></div>
      </div>
      <div class="grid">
        <div class="grid__col grid--3-col"></div>
        <div class="grid__col grid--9-col"></div>
      </div>
      <div class="grid">
        <div class="grid__col grid--4-col"></div>
        <div class="grid__col grid--4-col"></div>
        <div class="grid__col grid--4-col"></div>
      </div>
      <div class="grid">
        <div class="grid__col grid--3-col"></div>
        <div class="grid__col grid--3-col"></div>
        <div class="grid__col grid--3-col"></div>
        <div class="grid__col grid--3-col"></div>
      </div>
      <div class="grid">
        <div class="grid__col grid--6-col"></div>
        <div class="grid__col grid--3-col"></div>
        <div class="grid__col grid--3-col"></div>
      </div>
      <div class="grid">
        <div class="grid__col grid--3-col"></div>
        <div class="grid__col grid--6-col"></div>
        <div class="grid__col grid--3-col"></div>
      </div>
    </div>

    Developer notes

    .container element provides correct max-width to match Service NSW branding.

    Keywords

    none

    Install

    npm i @servicensw/grid

    DownloadsWeekly Downloads

    331

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    6.12 kB

    Total Files

    7

    Last publish

    Collaborators

    • rikki_iki
    • acbramley
    • erinsnsw
    • dojob65
    • ramya.shankaralingam
    • mariam.khoudier
    • christine.roque
    • previousnext-admin
    • mcaddz
    • jptaranto