@servicensw/grid

Grid system

Usage no npm install needed!

<script type="module">
  import servicenswGrid from 'https://cdn.skypack.dev/@servicensw/grid';
</script>

README

@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.