Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

Foundation for Beginners: The Grid System

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

This post is part of a series called Foundation for Beginners.
Foundation for Beginners: Getting Started
Foundation for Beginners: Navigation

In the opening part of this session on the Foundation Framework, we took a look at how you could make use of this framework, what it can do and how you can fashion a custom build. In this part we’ll look in detail at the grid system, demonstrating some examples as we go. We’ll also shake things up a bit and take a look at the Orbit JavaScript Slider plugin; a great slider for displaying all sorts of content.

foundation-2-1

The Grid System

We only use one major breakpoint for the grid in Foundation to shift layouts for screens above 768px wide.

Foundation is a modern framework favoring the mobile first approach. This means that the bare minimum code and assets are loaded first to aid page render speed. As with most modern frameworks, Foundation is fully responsive. Unlike most, it makes use of just one break point for structural change. The break point defines the viewport width at which the large grid is put into action, this happens at 768px.

The grid system itself actually has three parts; the desktop grid, the mobile grid and the block grid. As foundation is mobile first, let's begin with the mobile grid.


The Small Grid

foundation-2-2
<div class="row">
	<div class="small-12 columns">
		<h2>This is Foundation</h2>
	</div>
</div>

The code above is built up of three important classes; the first being the “row” class which holds our columns, much in the same way as a row in a spreadsheet holds columns of cells. In this demo we're using a twelve column grid, so twelve is the maximum number of columns we can have within one row. Saying that, if you need more, Foundation supports up to sixteen columns which you can select in the custom build form.

The class that defines the columns here is small-12, changing the number in this class defines the width of said column. Using “small-12” on its own however only defines the width. In order to actually create a column, we need to pair it with the “columns” class. These three classes are the basis for the grid system.

Quite simply, the above markup dictates that there’s a row, with a div which is going to take up twelve columns worth of space (100% of the width). Inside the twelve columns is our content. Let's take a look at a slightly more complex version.

<div class="row">
	<div class="small-4 columns">
		<h2>This is a sidebar</h2>
	</div>
	<div class="small-8 columns">
		<h2>This is the content area</h2>
	</div>
</div>

In this code we can see that there are two divs with the “columns” class. Each is coupled with a class (such as “small-4”) to dictate the specific size. Foundation then lines these columns up next to each other as opposed to on top of each other, as they would in normal HTML document flow. Our two columns occupy four columns' width and eight columns respectively. The two total a full widht of twelve columns; “small-4” being around 33.3% and “small-8” being approximately 66.6% of the body width.

What’s important to realize here is that these divs are almost infinitely nestable. This offers great flexibility, for instance:

<div class="row">
	<div class="small-4 columns">
		<h2>This is a sidebar</h2>
		<div class="row">
			<div class="small-1 columns">
				<h6>#1</h6>
			</div>
			<div class="small-9 columns">
				<p>A post title</p>
			</div>
			<div class="small-2 columns">
				<button>Go</button>
			</div>
		</div>
	</div>
	<div class="small-8 columns">
		<h2>This is the content area</h2>
	</div>
</div>

You can see that we have added in some content to the sidebar using a row, in a column, in a row, this time making use of three columns of varying sizes. Great stuff eh? Well it’s probably time to throw in some big-screen code to take full advantage of the grid system.


The Large Grid

foundation-2-3
<div class="row">
	<div class="small-4 large-3 columns">
		<h2>This is a sidebar</h2>
	</div>
	<div class="small-8 large-9 columns">
		<h2>This is the content area</h2>
	</div>
</div>

Here we have added one extra class to each of our columns large-3 and large-9. This tells Foundation that when the site is viewed on a larger screen it should change the width of the sidebar from the small-4 with of 33.3% to large-3 which equates to around 25% of the body width. Our main area is thus able to grow, giving more room for content. This is a simplistic example but becomes very useful when it comes to re-arranging your layout for different screen sizes.

Whilst we are looking at the grid system it’s worth mentioning that by using large-centered and small-centered you can center a column quickly and easily, although you can only do this if there is one column in the row. You can also manipulate the order of elements using the push and pull classes.

<div class="row">
	<div class="small-3 push-9 columns">3</div>
	<div class="small-9 pull-3 columns">9, last</div>
</div>

This takes the second div, which would typically be displayed after the first, and pulls it to the front whilst pushing the first to show up afterwards. You can therefore have a list on the left and content on the right on large displays, but push it below on small displays.


The Block Grid

foundation-2-4

Having covered the ins and outs of the grid systems, we can look at the block grid which is used to keep list elements evenly spaced, no matter what the screen size. These are ideal for blocked-in content (such as that generated by an application) as they don’t require rows or even columns to display correctly. If your layout is intended to be the same on desktop as well as mobile then you only need use the small-block-grid-# classes.

This is also the case for the grids we previously spoke about. Instead of using small-12 and large-12 you would only need small-12. Easy.

<ul class="small-block-grid-2 large-block-grid-4">
	<li><img src="../img/photo1.png"></li>
	<li><img src="../img/photo2.png"></li>
	<li><img src="../img/photo3.png"></li>
	<li><img src="../img/photo4.png"></li>
</ul>

That concludes the grid systems that Foundation has to offer in their basic forms. Remember, the small grid will change to the large grid once the screen width hits the main break point. Use the small grid to target smaller devices and the large for what are typically desktops and larger screens.


The Orbit Plugin

We're going to shake things up a little now, by introducing one of Foundation's many useful plugins; Orbit.

foundation-2-5

This handy plugin can be used as a slider, allowing you to slide in images, video or regular HTML content. With simple markup it’s easy to get to grips with and is a real eye-pleaser when used properly.

<ul data-orbit>
	<li>
		<img src="../img/demos/demo1.jpg" />
		<div class="orbit-caption">...</div>
	</li>
	<li>
		<img src="../img/demos/demo2.jpg" />
		<div class="orbit-caption">...</div>
	</li>
	<li>
		<img src="../img/demos/demo3.jpg" />
		<div class="orbit-caption">...</div>
	</li>
</ul>

Orbit uses a list structure; each list item being displayed as a slide. Here, along with regular image tags, our list items contain a div with the class orbit-caption allowing us to place a caption on each image. Orbit takes this code and adds some more markup to get things working. It also includes a bunch of options for displaying pagination, controls and even a timer.

Take a look at some examples of parameters you can change in Orbit:

  timer_speed: 10000,
  animation_speed: 500,
  bullets: true,
  stack_on_small: true

These include speeds, bullet pagination and the option to stack on small screens. It’s important to note that these are passed on initialization, so you would need to take your standard $(document).foundation();, found at the bottom of the index.html included in the download:

  <script>
    $(document).foundation();
  </script>

then pass in the orbit options.

<script>
$(document).foundation('orbit', {
  timer_speed: 10000,
  animation_speed: 500,
  bullets: true,
  stack_on_small: true
});
</script>

As well as the options shown here you can add classes to all the elements produced by the plugin. These extra options (and more) can be found in the Foundation docs.

Note: Your Foundation download will include all the JavaScript bits and pieces you chose, compiled into one minified file. This is referenced at the bottom of the index.html, but you can also opt to uncomment individual JavaScript files if you prefer:

  <script src="js/foundation.min.js"></script>
  <!--
  
  <script src="js/foundation/foundation.js"></script>
  
  <script src="js/foundation/foundation.dropdown.js"></script>
  
  <script src="js/foundation/foundation.placeholder.js"></script>
  
  <script src="js/foundation/foundation.forms.js"></script>
  
  <script src="js/foundation/foundation.orbit.js"></script>
  
  -->

Useful Tool

Want to play around with Foundation right now without downloading it? Or perhaps you want a clean environment to test new ideas? Then check out this handy jsfiddle. It uses the latest build of Foundation and includes all of the components.


Coming Up Next

In this part of the Foundation guide we covered the grid systems and briefly spoke about the Orbit plugin. In the next installment we'll look at navigation and the section plugin, along with another useful tool..

Advertisement