How to get started with Foundation 5

Zurb’s Foundation is one of the most widely-used responsive frameworks available at the minute — and for good reason, too. With a flexible grid system, a seemingly endless features-list and a community working to push new and improved features as often as possible, you can see why.

Not only that, but it’s full of scaffolding CSS to construct a wireframe model in no time at all — or even to use as part of your full-scale designs.

The latest version of Foundation — Foundation 5 — was released last week, so this is the perfect time to investigate its possibilities.

Today, we’ll go through the motions of creating a bicycle enthusiast’s website. We’ll learn how to:

  • download and install the Foundation framework;
  • insert content with the flexible, responsive grid system straight out of the box;
  • create a “hero” panel to display featured text or images prominently;
  • we’ll even add some buttons, a block grid and a navbar to complete our design.

So, if you follow along from beginning to end, you’ll have a fully responsive website in less than 20 minutes. Pretty impressive, if you ask me!

Do you use Foundation? What parts of it do you enjoy the most? Let us know in the comments.

  • Vladi

    Great to see some love for Foundation. When it launched, there was a little buzz but after that nothing more. I was really impressed with what I’ve read and wanted to give it a shot.

    • Sam Piggott

      I’ve been keeping up with Foundation since 3 – I used to use the 1140 Grid System, but moved to Foundation when I found it offered so much more in a slick, easy to set up package – it’s pretty awesome stuff!

      If you build something, I’d love to see it!

      • Vladi

        Indeed. I’m thinking of integrating it in a lovely WordPress theme. I bet it would run smooth and responsive like hell :)

  • Frank H

    Well done, thanks very much for that demo, very helpful!

    • Sam Piggott

      Frank! Thanks so much for your kind words – hopefully it gives you an idea as to what Foundation is capable of, and you can go ahead and apply it to your own designs!

  • Lucian

    H1 tag in a list? You must be kidding me. It’s not only not semantically correct but also horrible for SEO. H1 are for headlines

    • Sam Piggott

      Hey Lucian!
      Foundation has a series of preset styles built-in; which is effectively what I’ve harnessed as an example here, but yes – absolutely, you’re completely spot-on. However, without putting it within that exact markup, the header won’t display correctly! The video is meant to provide beginners with an insight on how to construct a basic site without using CSS. I expect more advanced developers would look to create more semantic markup and style it themselves!
      Thanks for watching, and I hope you enjoyed it nonetheless!

      • CyncialOne

        ” I expect more advanced developers would look to create more semantic markup and style it themselves!”
        If we did, a framework wouldn’t have a lot of value for us would it. Getting that styling to display correctly is actually a “bog down” point and Foundation has tons of them. Each one stops work on the project and then requires research and/or experimentation to resolve. These kinds of things suck the profitability out of projects.
        Still foundation is better than Bootstrap in so many ways, but I think I’ll stick with Skeleton for now.

  • Peter

    Great video … BUT unless I’m totally wrong he’s using Foundation 4 and not 5 for the demo!!!! You can tell both by the title tag of the sample site he builds, but also some of the code structure (like the scripts at the bottom) are from Foundation 4.

    Not really sure what’s going on here…. weird.

    • Sam Piggott

      Hey Peter!

      This tutorial was actually designed to give beginners an insight as to how to build a functioning site with Foundation 4 – but was then updated immediately afterward to support Foundation 5. The markup is very similar, as it works across Foundation 4 and 5 – but there are some slight changes (i.e. Orbit has a new data tag which needs appending to work correctly). I followed along with a fresh installation of Foundation 5 immediately afterward and encountered no issues!

      Good spot, however – hope you enjoyed the tutorial!

      • Peter

        Hi Sam – video was really good – I’ve used Foundation for a good number of sites I’ve built and wish there was a nice step-by-step video like yours when I first started dabbling with it. Just a bit confusing as the article / title of video is all about Foundation 5 so I think it’s expected that it will actually be used in the example – irregardless of the small differences. Otherwise nicely done though!

  • WidyGraycloud

    Foundation <3

    • Sam Piggott

      Isn’t it the best?

      • Widy Graycloud

        yeah as I know now, but what if it compare with HTML Kickstart?

  • vani

    Thanks alot,Its really helpful for me get some ideas to design.

  • James

    I’ve been using foundation for all responsive design projects since late 2011. It’s great to use as a blank template, handles everything I’ve thrown at it.

  • netyou

    Great screncast!

    I use bootstrap so this is a nice intro the world of foundation.

    BTW, Have you heard of emmet?

    • James Stone

      Zencoding/emmet is amazing. It is such a huge timesaver with responsive frameworks and all of the presentational class names. I have a tutorial on my site/youtube using emmet, sublime text 3 and foundation grids if you are interested.

  • Guest

    A much needed performance hike for Foundation. Great job Zurb!

    I wish that I didn’t have to still support IE8 clientele otherwise Foundation would be a great comparison against Bootstrap in my workflow.

  • gigon

    i’ve been looking high and low on how this website does the link effect? when you hover on any links on there’s that sorta rotation effect. Anyone can point me to the right direction please.

  • Bob

    Great way to spend my lunch time today. I previously used Foundation 3 but skipped over 4. Zurb’s Foundation 5 looks great. Thanks for the tutorial.

  • Christopher Canisius

    You can set custom breakpoints but to do this i recommend using the sass version of foundation.

    It makes me sad to see all this foundation tutorials just using the unsemantic classes for styling the content. Foundation is much more powerful if its used with sass and its mixins.

    I would love to see an really cool artice about installing foudnation as a ruby gem. After that you can use this grid via includes. This is much more easier and you don´t have to change your markup. This is how foundation wants to be used.

  • jenniebeme

    I don’t think I understand the benefit of putting the row of images in an unordered list instead of divs. I’d appreciate your insight.

  • wefwerf

    Nice. “Let’s go ahead” gets tired quickly though…

  • Colin

    Sam great tut, thanks much. Have you had experience running both a Foundation 4 project as well as a Foundation 5 project simultaneously locally?

  • mardenweb

    Hi Sam, I would like some help on foundation contact forms and how to setup submit button for email. Thanks

  • James Stone

    For Emmet, yes. It supports most major text editors. I know Notpad++ is one of the ones listed. As for doing a Foundation install on windows, I haven’t gone through the process yet, but I got a pretty good answer of how to approach it on the ZURB Foundation Forums. Hope this helps.

  • Igor Stepanuk

    Hello, very helpful! Thanks)
    But i not understood, why not work xlarge-* and xxlarge-*

  • razon

    Thanks for sharing good information. Keep doing good work..

  • anupriya26

    That’s an awesome video. With this foundation 5, nothing seems to be harder.

  • Thomas Vasquez

    I absolutely love Foundation! I like to use WordPress mixed with Foundation, which is why I created a theme called WP-Forge. It is based off Twenty Twelve. Check it out if you like

  • Craig R Morton

    Thanks for uploading this tutorial. This is great for a beginner!

  • ani sha

    thanks for sharing this..

  • ani sha
  • Lisa Edward

    Great post with lots of useful information..Thanks for sharing the demo

  • IICT Chromepet