Getting started

1. Make sure you Downloaded Nightwing

2. Place the files in your website's css directory

3. Copy the following code somewhere in your <head> tags : <link rel="stylesheet" href="[path-to-css-directory]/nightwing-full-gutter.min.css" media="all">
<link rel="stylesheet" href="[path-to-css-directory]/reset.css" media="all">
Note: The reset.css is optional, but to have a fully functional Nightwing you need some kind of a browser defaults CSS reset.


Basic HTML template

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="[path-to-css-directory]/nightwing-full-gutter.min.css" media="all">
<link rel="stylesheet" href="[path-to-css-directory]/reset.css" media="all">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="span12">Span 12</div>
</div>
</div>
</body>
</html>


Basic semantics

Nightwing has very similar semantics to other grid systems. There's a container element, a row element that distinguishes different rows and a span element for each of the elements that span inside each row.

Default container classes are :  .container-fluid,  .container-960,  .container-1020  and  .container-1140
To create your own, go to the documentation.

The default row class is :  .row

Default span classes are :  .span12,  .span11,  .span10,  .span9,  .span8,  .span7,  .span6,  .span5,  .span4,  .span3,  .span2  and  .span1
Optional screen-based (xs,sm,md,lg) span classes are :  .span--<1-12>