Advertisement

Foundation for Beginners: Getting Started

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →
This post is part of a series called Foundation for Beginners.
Foundation for Beginners: The Grid System

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 different. More experienced developers may have taken the time to build up some form of front-end framework, but doing this properly can be a serious undertaking, not to mention the need to keep things up–to-date and inline with best practices.

Looking at the wants and needs of the every-coder it's clear that developers want something that's open source, stable, flexible and (most importantly) well documented. Depending on the size of the project a CSS grid system maybe enough, but wouldn't it be great if you had the option to add and remove functionality as you saw fit? Well, in this session we’ll be looking at a customisable front-end framework called Foundation.

Covering a framework like Foundation needs to be done properly and in detail, so over the next few weeks I’ll be covering everything from getting started, custom builds, through to the ins-and-outs of the cogs which power this particular framework. Most importantly I'll illustrate how it could benefit you in your future web endeavours.

foundation-1-hand

What is Foundation?

Foundation is a front-end framework consisting of many tools useful for making responsive, mobile first websites. Primarily built with HTML, CSS and jQuery, Foundation uses modern technologies and practices, but gracefully degrades as far back as IE8. Although the framework is most commonly used by HTML and CSS developers, you have the option of taking things further using Foundation in conjunction with Sass and Rails.

foundation-1-2

The company behind Foundation, ZURB, have created a tightly regimented toolset for developers and designers. Every module has its part to play in the framework as a whole, but at the same time can work completely independently of central leadership. What this means then, is that you can mix and match features in your current project, or take a single feature and add it into an older project. You can even add it as a feature to a different framework.

So in summary, this is a modern framework which has been well built and which caters for a wide variety of users. It offers a good set of features, it's free, and there is a growing community of people to help you out if you do get stuck.


Why Should You Use Foundation?

Nowadays it's commonplace for developers to make use of frameworks (why reinvent the wheel?) Often though, many of these frameworks have become bloated from the creators trying to cover every eventuality on an adhoc basis. What once may have started life as a slick, lightweight tool, can grow into a hundred http requests and a choir to disassemble depending on your needs.

Foundation includes a range of functions and features. It's built on a percentage-based fluid grid system, comes packaged with a jQuery slider, a lightbox plugin, has all imaginable HTML elements pleasantly styled and is built with mobile-first in mind. You can create custom forms which use jQuery to re-envision tricky input elements, dropdowns and checkboxes, meaning you can style these easily. The framework also has options for setting out custom mobile layouts by using the mobile grid, giving the flexibility to really personalize your project for mobile and desktop users.

foundation-1-mobile

Zurb have rebuilt a lot of core functionality in version 4 to cover fairly wide usage cases. The code appears to have been kept clean and commented where it needs to be. Adding and removing functions is straight-forward and allows tailoring of your build to match your requirements.

Users running version 3 are also able to follow a migration document to upgrade their existing installs, or, if they would like, can continue using version 3 as ZURB host the previous version for those that aren't ready to make the jump to v4.


Downloading a Custom Build

Zurb have a download page which allows you to tweak a pre-filled form to generate a custom build perfect for your requirements. Let's say you only want a CSS grid? Done. Just uncheck everything except "grid" and type in your project measurements. Perhaps you want basic UI elements? Done. Once again just check the UI elements you require, such as labels and buttons, and that's exactly what you’ll get. You can even grab everything they offer (referred to as their kitchen sink) in just one click. It allows for custom default CSS colours and even key sizes such as max-width.

foundation-1-custom

Although this is handy, it's still just a form and I feel it could be improved upon. Ideally, I’d like to see a staged process with perhaps some visual representation of the HTML template. Also, as v4 uses em as its measurement unit and em is based on the main font-size it would seem intuitive to include a px-to-em calculator, just to make it that little bit easier.

Head on over to http://foundation.zurb.com and click the big download button. You'll be presented with many options to customize your framework. Uncheck any features you don’t need, put in your primary, secondary, alert, success and font colors. Combine this with breakpoint widths, max widths, gutters and even a choice of how many columns you want.

foundation-1-homepage

After looking at the key benefits that Foundation offers and running through the custom build download, you should have a personalized build sitting in your downloads folder. Play around with it, try things out and if you get stuck take a look at the docs or throw your questions into the comment thread below.


Coming up Next

In the next part of this session we’ll be using the grid system, diving into the navigation, tabs, buttons and a few other key UI elements. We'll also talk about some tools which can further aid your development when using Foundation as a basis for your projects.

Linkage..

Advertisement