How to Get Started With Foundation 5

Some of you are probably already familiar with the front-end framework Foundation 4 or have heard of it. Not too long ago they released a new version of their popular framework, which is called Foundation 5 and supposedly faster than it’s previous version and comes with a modern, flat look.

Foundation 5

Foundation 5 is an alternative to Twitter Bootstrap and many other frameworks. Though Foundation claims to be the first ever framework that was responsive. They built the framework from the idea of designing and building for mobile-first and then creating the bigger versions. Their framework comes with 3 different layout sizes; small (mobile), medium (probably tablets) and large.

If you’re currently using Foundation 4, and would like to migrate to Foundation 5, there’s a detailed guide on how to do that in their docs. Foundation 5 only happens to support IE9 and up. That doesn’t have to be a problem but it’s something you should consider because Foundation 4 also supports IE8.

Why You Should Consider Using a Framework

Obviously frameworks come with advantages, otherwise they would not have gotten this popular as they are at the moment. To me there are 3 great advantages that you won’t get otherwise. Here’s what I think are the best pointers of frameworks in general:

Documentation or Forums

You can Google your way around if you’re stuck at some point, but you don’t want to end up Googling all sorts of issues because that’s not why you’d use a framework. Make sure you choose a framework that has detailed documentation, like Foundation 5. If you still happen to get stuck you can always Google your problem and you might find your answer on a site like Stackoverflow.
For some frameworks there are also cheat sheets available that are made by users, there is one for Foundation 4 but we have to wait for it to be updated for Foundation 5.

Cross-Browser

I think I don’t only speak for myself when I say that making your sites compatible with Internet Explorer is a time consuming task and an awful experience, especially when you’re using a Mac. Though choosing a framework that’s compatible with several IE versions you have a great chance that you lose compatibility when you add additional styles, so don’t forget to browser check your sites!

No Blank Canvas When You Start

You don’t have to worry about setting up your grid in CSS, style form elements or even write browser resets. The only thing you have to do is write the markup and override / edit the look of the site so it fits your design.

What Makes Foundation 5 Great

It’s tough to say that it’s better than any other framework because, of course, it’s an opinion. Though there are features that Foundation 5 offers that make it better than for example the already mentioned Twitter Bootstrap.

Easy to Customize

If you’re a SASS user it’s really easy to edit the basic styles Foundation comes with by default. There are plenty of mix-ins that you can easily edit by changing the variables. Although, if you’re no SASS user you have to dive into the CSS code to apply changes or override them in a new .css file.

That being said, there are less UI elements to customise since there are not as many UI elements as Bootstrap has to offer. Though I think that’s no issue, I’m personally not a fan of stripping out styles I don’t use. The reason there are few UI elements is because they say that they don’t want to end up with a world where all the sites looked like Foundation (source: http://foundation.zurb.com/learn/faq.html).

Perhaps the fact that it serves as a base for your project is where it got it’s name from because it serves as a foundation for your web projects.

Easy to Learn

Those who have never worked with a framework will have no problem with learning the framework’s markup. Foundation offers a very detailed manual on how to use every bit of the framework.

If you’re familiar with markup languages you’re not going to experience any difficulties when learning Foundation 5.

It’s Lightweight

Thanks to the fact that it’s a framework that’s built on the mobile-first principle it’s very lightweight and has great performances. By using class prefixes you can also decide whether some elements should load on small, medium or large displays.

What’s in the “Box”?

Because of the fact Foundation 5 is a fairly basic framework you won’t get a lot of stuff you don’t use. When you download the default set you’re going to get an HTML file, a css folder with 3 css files (one minified), an empty img folder and a Javascript folder with loads of scripts in it.

Folder Structure

Every Javascript feature is optional and can be called separately whenever you need it. In case a call to a new Javascript file is required you’ll be able to find that in the docs.

Preparing your Document

The index.html that you have by default is not at it’s most empty state because it serves as a features html file. I recommend that you rename that file, in case you want to use it as a reference, and create a new index.html file in that same root folder. This HTML file will include the following code (source: http://foundation.zurb.com/docs/css.html):

< !DOCTYPE html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > < ![endif]-->
</html><html class="no-js" lang="en" >

<head>
   <meta charset="utf-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Foundation 5</title>

   <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
   <link rel="stylesheet" href="css/normalize.css"/>
   <link rel="stylesheet" href="css/foundation.css"/>

   <!-- If you are using the gem version, you need this only -->
   <link rel="stylesheet" href="css/app.css"/>

   <script src="js/vendor/custom.modernizr.js"></script>

</head>
<body>

  <!-- body content here -->

   <script src="js/vendor/jquery.js"></script>

   <script src="js/foundation.min.js"></script>
   <script>
      $(document).foundation();
   </script>
</body>
</html>

As you can see in the snippet above, it calls the regular foundation.css file. If you plan to override styles in a separate stylesheet and not to apply changes to the foundation.css file I’d recommend you to call the minified version instead.

Additional Resources

Not everything Zurb, the people behind Foundation 5, has to offer comes with your Foundation 5 download by default. Zurb have a few add-ons, that’s what they call them, available for download on their website. This includes an icon font, social SVG icons, responsive tables, Adobe Illustrator UI element stencils and a couple of HTML templates. You can download these resources from the add-ons page.

Roundup

Foundation 5 is a great, and easy to learn, framework that you can use for any web project. It’s lightweight and gives you enough freedom to create unique things.

Advertisement