How to get started with Foundation 5

Wdd Logo.
November 27, 2013
How to get started with Foundation 5.

thumbnailZurb'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.

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.

Popular Posts

Read Next

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…

30 Obsolete Technologies that will Perplex Post-2000s Kids

Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…

15 Best New Fonts, October 2023

We’re entering the final quarter of 2023, and even in the pre-holiday lull, there are still plenty of fonts to get…

Progressive Web Apps (PWAs): Unlocking The Future of Mobile-First Web Development

There are over 5.4 billion mobile users today, meaning that over 68% of the population tap into an online business via…

The 12 Most Controversial Ad Campaigns of the 21st Century

How far would an organization be willing to go for the chance to generate a little extra buzz? In this list, we're…

20 Best New Websites, October 2023

The Bento trend is still going strong: In some cases, we see this extend to the layout, but many more are picking…

Exciting New Tools for Designers, October 2023

This month, we have a whole bag of goodies for designers, developers, and designevelopers alike. (Yes, we did just make…

The 10 Most Successful Rebrands of All Time - Ranked

We’re all familiar with rebrands going wrong, but what happens when they go right? From McDonald’s health kick to…

3 Essential Design Trends, October 2023

Every now and then, website design trends can leave you scratching your head. This month’s collection includes some of…