MediaWiki/Foundation/Grid
Foundation CSS Framework for MediaWiki: The Grid
The Grid divides the screen into twelve invisible columns and any number of rows.
This Grid can be used to define page layout without using tables and without writing your own custom CSS. In fact, you don't really need to know or understand much about CSS to use any of the features of the Foundation Framework because the CSS classes have been included in the Foreground Skin.
The sections below demonstrate ways to format content using the Grid.
Note: To use components from the Zurb Foundation CSS Framework in MediaWiki, first install a custom skin such as the Foreground Skin or the Pivot Skin, which are built upon the Foundation CSS Framework.
The panels below illustrate the twelve individual columns which can be combined to produce different page layouts
1
2
3
4
5
6
7
8
9
10
11
12
Example 1: Use the full width of the screen
Columns are defined using classes small, medium or large. Grids defined with class="small" expand easily to large screens than grids with class="large" compress onto small screens. Choose the class to suit the end user or device, such as mobiles or tablets.
For a row which is the full width of the screen we use all twelve columns, as shown in the code below:-.
<div class="row">
<div class="small-12 columns">
<p>This sample text should wrap at the full width of the screen. Because the Framework is responsive it should resize for different devices such as a smart phone, a notebook or tablet, or a full-sized monitor.</p>
</div>
</div>
The above code produces the output below:-
This sample text should wrap at the full width of the screen. Because the Framework is responsive it should resize for different devices such as a smart phone, a notebook or tablet, or a full-sized monitor.
Example 2: Divide the screen into two sections
Each row should still be the full width of the screen and use all twelve columns in the grid. However, we can divide it into parts of various width. In this example the row is divided in half so each portion will use six columns.
<div class="row">
<div class="small-6 columns">
<p>This is the text on the left.</p>
</div>
<div class="small-6 columns">
<p>This is the text on the right.</p>
</div>
</div>
Here is the row formatted as above:-
This is the text on the left.
This is the text on the right.
Example 3: Divide the screen into three equal sections
Each section will use 4 columns so the row uses all twelve columns in the grid.
<div class="row">
<div class="small-4 columns">
<p>This is the text on the left.</p>
</div>
<div class="small-4 columns">
<p>This is the text in the centre.</p>
</div>
<div class="small-4 columns">
<p>This is the text on the right.</p>
</div>
</div>
Here is the row formatted as above:-
This is the text on the left.
This is the text in the centre.
This is the text on the right.
Example 4: Divide the screen into unequal sections
In this example we will use 8 columns on the left side of the screen and 4 columns on the right.
<div class="row">
<div class="small-8 columns">
<p>Did you notice the word "small"? The options are small, medium or large. This refers to the screen size that you are designing for. </p>
</div>
<div class="small-4 columns">
<p>A smart phone is small, a tablet or notebook is medium and a normal PC screen is large.</p>
</div>
</div>
Here is the row formatted as above:-
Did you notice the word "small"? The options are small, medium or large. This refers to the screen size that you are designing for.
A smart phone is small, a tablet or notebook is medium and a normal PC screen is large.
Example 5: Use multiple rows
In this example we will use multiple rows.
<div class="row">
<div class="small-12 columns">
<p>This paragraph will use the full width of the screen. The Foreground Skin was updated in 2018 to use Foundation version 5. The twelve-column grid can also be nested! It is very versatile.</p>
</div>
</div>
<div class="row">
<div class="small-8 columns">
<p>The content in this second row could be the main topic and discussion. The text will wrap at the boundary of this section. You could have multiple paragraphs, lists, panels or any other item.</p>
<p>And of course you could replicate this structure by adding more rows...</p>
</div>
<div class="small-4 columns">
<p>This part of the screen could hold an image, a comment, or something eye-catching!</p>
</div>
</div>
<div class="row">
<div class="small-4 columns">
<p>This could hold a button or a link.</p>
</div>
<div class="small-4 columns">
<p>The text in the centre could be for anything really!</p>
</div>
<div class="small-4 columns">
<p>Why not place a "Next" button here!</p>
</div>
</div>
Here is the row formatted as above:-
This paragraph will use the full width of the screen. The Foreground Skin was updated in 2018 to use Foundation version 5. The twelve-column grid can also be nested! It is very versatile.
The content in this second row could be the main topic and discussion. The text will wrap at the boundary of this section. You could have multiple paragraphs, lists, panels or any other item.
And of course you could replicate this structure by adding more rows...
This part of the screen could hold an image, a comment, or something eye-catching!
This could hold a button or a link.
The text in the centre could be for anything really!
Why not place a "Next" button here!
Example 6: Use offset columns
In this example, the text is indented by offsetting the columns. Be sure not to exceed 12 columns. If you offset 1 column then the remaining screen width is only 11 columns.
<h5>This could be a Section Heading</h5>
<div class="row">
<div class="small-11 small-offset-1 columns">
<p>The text in this section could be indented. If using all of the remaining width of the screen then the number of columns used would be 12. If you want to indent from the right also then add the number of columns offset and subtract from 12 for the remainder.</p>
</div>
</div>
The above code produces the output below:-
This could be a Section Heading
The text in this section could be indented. If using all of the remaining width of the screen then the number of columns used would be 12. If you want to indent from the right also then add the number of columns offset and subtract from 12 for the remainder.
