Grid System
The grid system is largely for laying out specific sections within a page. Unique areas like headers, sidebars, footers and the relationship of the main column to those elements are usually defined with custom css. For examples with annotation, see the Quick Start Guide. The grid system is now optional and a tool to use for quick and simple layouts. This version of the grid system reflects better accessibility practices and gives web designers more options.
The <body> contains attributes that make the page span the height of the screen even if the content is too short (you won't see weird empty bottoms after the footer). The layout of the content starts with the .container. The container will have properties like the page's max-width and horizontal centering, and role="presentation" for the accesibility tree. The .container can be modified in project level code for additional layout rules (like handling page content area in relation to navigation areas).
Inside the .container comes the <main>. This element represents the unique content on the page, and is sometimes sibling to a sidebar or other repeating element, hence the name "main". The class .main contains important css reset rules.
The basic building blocks of the grid layout uses .grid 's and .column-## 's, where ## is 1 through the total number of columns in the layout (Nitro uses 12). For two columns in a 12-column layout, use two .column-6; In this instance the number refers to the number of columns the element spans across, so all .column-## in a row should add up to the total number of columns (ex: 6 + 6 = 12). See more examples below.
In Nitro 1.0 a dedicated div with the .column-## was required, but in this version the column class can go on a single block element directly. An additional element for "rows" is also no longer required, CSS grid will handle all that logic on its own.
<div class="grid">
<div class="column_6">Spans 6 columns</div>
<div class="column_6">Spans 6 columns</div>
<div class="column_10">Spans 10 columns</div>
<div class="column_2">Spans 2 columns</div>
<div class="column_3">Spans 3 columns</div>
<div class="column_9">Spans 9 columns</div>
</div>
A Note on Responsive Web
The grid system in not inheritantly responsive and must be set manually. Complex layouts may require custom solutions, the use of .grid should be limited to simple implementations.
Complex Demo
As noted above, responsive design in this example is set manually. Custom styling was added to center the circle in its row, and to make the bottom row height match the height of the top row. Additionally, the margin top of the .heading-3 was overridden with a contextual class.
A Section Heading
by A. Developer
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate.
Curabitur nibh ligula, porta non neque volutpat, gravida porta risus. Nullam eros eros, dictum sed sagittis sit amet, bibendum vel orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus tortor tortor, hendrerit sit amet efficitur nec, consectetur nec felis. Vivamus fringilla mauris et tortor volutpat faucibus. Curabitur at purus eget leo venenatis.
<div class="grid">
<div class="column_4">
<h3 class="heading-3">A Section Heading</h3>
<p>by <a href="#">A. Developer</a></p>
</div>
<div class="column_8 demoObj"></div>
<p class="column_4">Lorem ipsum...</p>
<p class="column_4">Curabitur...</p>
<div class="column_4 demoChart"></div>
<div class="column_8 demoObj"></div>
<div class="column_4 demoObj"></div>
</div>