Foundation for Beginners

Embarking on any web project from a clean slate is a lot of work. Setting up typography, base styles, perhaps a grid system of some kind, media queries.. The alternative; building yourself some kind of front-end framework to start from each time, can be a serious undertaking and involves a lot of maintenance. Happily, open source frameworks such as Zurb's Foundation will do all the heavy lifting for you!

During this session, Matt Pilott will take you through the fundamentals of Foundation; the responsive grid, typography, JavaScript plugins, UI elements, all the way to working with Sass and Rails.

Posts in this series

Foundation for Beginners: Getting Started
For many web folk, developing a project from scratch every time is part of the job; it's often tricky to build up a reusable codebase when each project is...
Matt Pilott
5 Jun 2013
Web Design
Foundation for Beginners: The Grid System
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...
Matt Pilott
5 Jun 2013
Web Design
Foundation for Beginners: The Top Bar
Let's take a look at the top bar included within the Foundation framework. As there’s quite a lot to cover we’ll break it down into easy chunks.
Matt Pilott
13 Jun 2013
Web Design
How to Customize the Foundation 4 Top Bar
Zurb's Foundation 4 features a brilliant top bar which has become almost symbolic of a Foundation site build. Today we're going to look at how you can...
Mark Teekman
6 Sep 2013
Web Design
Foundation for Beginners: Buttons and Dropdowns
In this part of "Foundation for Beginners" we’ll look at buttons, dropdowns and the "Clearing" plugin.
Matt Pilott
17 Jun 2013
Web Design
Foundation for Beginners: Custom Forms and Switches
Following on from our look at buttons in Zurb's Foundation, let's now take a look at custom forms and switches. During this tutorial we're going to work on...
Matt Pilott
18 Jun 2013
Web Design
Foundation for Beginners: Progress, Alerts, Tooltips and the Elusive Mega Drop
Let's add to our Foundation skill set by learning how to make use of progress bars, alerts, tooltips and the mega drop which Zurb make use of on their site,...
Matt Pilott
2 Jul 2013
Web Design
Foundation for Beginners: Joyride, Interchange, Tables and Panels
Let's further add to our Foundation arsenal by looking at the Joyride plugin, which helps guide users through your sites. We'll also look at pricing tables,...
Matt Pilott
4 Jul 2013
Web Design
Foundation for Beginners: Sticky Navigation, Flexible Video and Zepto
In this part of our examination of Zurb Foundation we’ll talk about Magellan, which creates sticky navigation. We’ll look at visibility classes,...
Matt Pilott
15 Aug 2013
Web Design
Setting up Foundation With Sass and Compass
Sass is a great way to speed up front-end development in general, I use it in every one of my projects. Sass (as with all other preprocessors) allows for...
Matt Pilott
2 Oct 2013
Web Design
Foundation’s Sassy Styles Explained
In this tutorial we'll cover what can be done with the flexible Sass styles included in the Foundation framework. A lot of these offer a more customisable...
Matt Pilott
24 Oct 2013
Web Design