@servicensw/grid

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. Change log