@servicensw/grid
v3.0.5
Published
Grid system
Downloads
458
Maintainers
Keywords
Readme
@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