Nunavut

A skinny css grid system.

Table of Contents

• Installation
• Usage
  • Example
• Features
  • Reset
  • Border Box
  • Clearfix
  • Containers
  • Rows
  • Columns
  • Breakpoints
• License

Installation

Bower

bower install nunavut

NPM

npm install nunavut

Usage

Example

<div class="container">
  <div class="row">
    <div class="bs2 ms4">1</div>
    <div class="bs2 ms4">2</div>
    <div class="bs2 ms4">3</div>
    <div class="bs2 ms4">4</div>
    <div class="bs2 ms4">5</div>
    <div class="bs2 ms4">6</div>
  </div>
</div>

Features

Reset

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Border Box

All column, row and container helper classes have box sizing set to border-box, as well as all :before and :after content:

box-sizing: border-box

Clearfix

Both the .row and the .container classes are 'clearfixed':

.container:after,
.set:after {
  content: " ";
  display: table;
  clear: both;
}

.container:before,
.set:before {
  content: " ";
  display: table;
}

Containers

Containers are 90% as wide as the parent at size extra small and are 97% of the nearest low breakpoint at any other given size.

Rows

Rows have no special properties other than a clearfix and border-box.

Columns

Nunavut is a 12 column grid system.

Breakpoints

Nunavut uses seven breakpoints, which means eight sizes.

• Base (bs) - 0px - 479px
• Extra Small (xs) - 480px - 599px
• Small (sm) - 600px - 839px
• Medium Small (ms) - 840px - 959px
• Medium (md) - 960px - 1279px
• Medium Large (ml) - 1280px - 1339px
• Large (lg) - 1440px - 1599px
• Extra Large (xl) - 1600px+

License

(c) 2016 Allan Sachs-Ambia. | Code released under the MIT License.