Is 12 columns the full page in a Zurb Foundation grid? - grid

Question

I am just starting with Foundation 4's grid system and I was under the impression that the 12-column layout was the entire page, but when I opened up Foundation and saw their examples I was confused. Here is the picture
The part under the grid says that it is a 12 column section so where I am confused is the 'Getting Started' sidebar.
What is the width of a 12-column section?
What is the 'Getting Started' sidebar? (how many columns?)

Answer 1

Default width of 12-column section in foundation 4 is 1000px but you can change it in _variable.scss file. Find this line:
// $row-width: emCalc(1000);
change '1000'(for example: 1200) then remove comments and compile Sass files:
$row-width: emCalc(1200);
If you want see any section create with how many columns use Firebug.
For example, in this picture use 3 columns(large-3) for sidebar.
I write an example for Grid Design with foundation:
<div class="row">
<div class="large-9 columns">
<div class="row">
<div class="large-12 columns">
Left section with 9 columns and two row.
First row with one section(12 columns)
Second row with 2 section(each 6 columns)
</div>
</div>
<div class="row">
<div class="large-6 columns">
6 columns
</div>
<div class="large-6 columns">
6 columns
</div>
</div>
</div>
<div class="large-3 columns">
Right section with 3 columns
</div>
</div>
You can also use sass mixin to create new 'row' classs and new columns classes(for example: 'large-4 columns').
Write this code in your HTML file:
<div class="your_custom_row">
<div class="your_custom_columns_4">
Define 'your_custom_row' in your sass file: #include grid-row;
'your_custom_row' equal to 'row columns'
Define 'your_custom_columns_4' in your sass file: #include grid-column(4);
'your_custom_columns_4' equal to 'large-4 columns'
</div>
<div class="your_custom_columns_8">
Define 'your_custom_columns_8' in your sass file: #include grid-column(8);
'your_custom_columns_8' equal to 'large-8 columns'
</div>
</div>
<div class="row">
<div class="large-4 columns">
'large-4 columns' equal to 'your_custom_columns_4'
</div>
<div class="large-8 columns">
'large-8 columns' equal to 'your_custom_columns_8'
</div>
</div>
and write this code in your sass file:
.your_custom_row {
#include grid-row;
.your_custom_columns_4 {
#include grid-column(4);
}
.your_custom_columns_8 {
#include grid-column(8);
}
}