Build Websites Superfast with Foundation 5 [A Guide]

In our desktop layout, I gave 8 columns to the main content on the left, and 4 columns to the sidebar on the right.

 <div class="panel"> <div class="row popular-main"> <div class="medium-6 columns"> <img src="img/summer-salad.jpg" alt="Summer Salad"> </div> <div class="medium-6 columns"> <h3><a href="#">Summer Salad</a></h3> <p>This summer salad will be the star of every garden party. It's made of tomatoes, cucumber, black olives and lettuce...</p> </div> </div> <!-- Additional Popular Posts will come here in Step 4.2 --> </div> 

visibility classes. Foundation has many of them and their names such as “show-for-small-only” and “hide-for-large-up” clearly describe what they do.

Zurb Foundation 5

Here we will choose the “show-for-medium-up” which will show the additional posts only on tablet and desktop size. Just like in Step 4.1, we will use the medium-n classes here too, as the smallest screen we want to show this layout is the tablet screen.

The demo will be populated with food-related content, and finally will look like this:

Yep, the devs included handy links in the index file. You can leave it this way and make a new file for your prototype with the name home.html or something similar, but you don’t really need to keep it as you can easily reach the Foundation Documentation whenever you want.

  • Downloading Foundation 5
  • Understanding the Grid
    • When To Use The Large-N, Medium-N And Small-N Classes
  • Adding the Top Menu Bar
  • Populating the Main Part
    • Adding A Panel For Popular Posts
    • Adding 3 More Posts To The Popular Panel
    • Prettying Up The CSS
    • Adding Some More Content
    • Adding Pagination
  • Populating The Sidebar
    • The Newsletter Form
    • Flex Video
    • The Sidebar Menu
  • Conclusion

download Foundation 5 in 4 different forms:

  1. the complete code
  2. a lighter version with only the essential code
  3. a custom version where you can customize what you need and what not
  4. a Sass version if you want to set your variables and mixins in SCSS.

For each Latest Post we add a new row below the Popular Panel with our custom CSS class called “latest-post”.

The two breakpoints between the Small, Medium, and Large Grids are at 641px and 1025px screen width:

Download Foundation 5

Now it’s time to insert this code snippet into the <aside> section of your HTML file.

In this tutorial I will choose the Complete code with vanilla CSS, but of course you can choose any other versions if you wish to streamline your site and only use what you really need.

Open up the index.html file in your favorite code editor and delete everything inside the <body> section, but before the closing <script> tags.

The initial index file
 header { margin-bottom: 2em; } .popular-additional h4 { font-size: 1.125em; margin-top: 0.4em; } .row .row.popular-main { margin-bottom: 1.5em; } 

As Foundation 5 uses relative units, we need to use “em”-s or “rem”-s instead of pixels to keep up with the rules. (You can read about CSS units: Pixels vs ems vs % here.) I used Firefox’s Firebug extension to determine where I have to override Foundation 5’s CSS rules, you can use any other web development browser extensions if you want.

Final Demo Version

3 different grids:

  • one for mobile screens: this is the Small Grid
  • one for tablets: this is the Medium Grid
  • one for desktops: this is the Large Grid.
 <div class="pagination-centered"> <ul class="pagination"> <li class="arrow unavailable"><a href="">«</a></li> <li class="current"><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li class="unavailable"><a href="">…</a></li> <li><a href="">12</a></li> <li><a href="">13</a></li> <li class="arrow"><a href="">»</a></li> </ul> </div> 

Here are the Latest Posts with the newly added Pagination section:

  • the Small Grid rules between 0 and 640px
  • the Medium Grid between 641 and 1024px
  • the Large Grid rules above 1025px.
 <div class="row popular-additional show-for-medium-up"> <div class="medium-4 columns"> <img src="img/cheese.jpg" alt="Cheese"> <h4><a href="#">Cheese with Fruits</a></h4> </div> <div class="medium-4 columns"> <img src="img/ice-cream.jpg" alt="Ice Cream"> <h4><a href="#">Ice Cream</a></h4> </div> <div class="medium-4 columns"> <img src="img/italian-salad.jpg" alt="Italian Salad"> <h4><a href="#">Italian Salad</a></h4> </div> </div> 

CSS Best Practices section).

 <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Foundation 5 Recipes</title> <link rel="stylesheet" href="css/foundation.css" /> <link rel="stylesheet" href="css/app.css" /> <script src="js/vendor/modernizr.js"></script> </head> 

The style rules that we add to the app.css file to pretty up our prototype are these:

Change the <title> tag in the <head> section to whatever title you want for your page, I will change it for “Foundation 5 Recipes”.

Understand the Grid
 <div class="row latest-post"> <div class="medium-3 columns"> <a class="th" href="img/full-size-image.jpg"> <img src="img/thumbnail-size-image.jpg" alt=""> </a> </div> <div class="medium-9 columns"> <h4><a href="#">Title of Latest Post</a></h4> <p>Content of Latest Post... </p> </div> </div> 

Our custom CSS file created in Step 4.3, app.css also gets some new style rules to keep the looks of the demo tidy. Note: If you want to add your own custom CSS to Foundation, never forget to check, with a web dev tool, where you have to override the default rules.

On tablet and desktop size we will show a small thumbnail using Foundation’s thumbnail class on the left, and the title and a short description on the right. On mobile, the headline and the description will go below the thumbnail.

I will create the layout of the website, the task of adding subtle design elements is waiting for you. The website we will create together in this tutorial will accomplish the dream of the modern UX designer: it will be responsive, mobile-first, user-friendly, and semantic.

 <div class="row"> <div class="small-12 medium-9 large-12 columns end"> <h5>Sign Up To Our Newsletter</h5> <form> <div class="row collapse"> <div class="small-8 columns"> <input type="text" placeholder="your@ema.il"> </div> <div class="small-4 columns"> <a href="#" class="button postfix">Send</a> </div> </div> </form> </div> </div>

Now take a look inside the <form> tag in the code snippet above. We use Foundation’s built-in form system with the Postfix Button option (class=”button postfix”).

On small screen, it would look awkward as the image would be tiny, so here we just want the text part to be under the image. As the smallest screen we want to set this 50-50 layout as the medium screen; we will use the “medium-6 columns” CSS selector for the columns.

We also added a custom CSS class called “popular-main” to the nested row. This is not Foundation 5’s class but ours. We put it there to make it easier to add our own style rules later. You can add as many of your own CSS selectors to your Foundation website as you want.

Zurb Foundation 5 is one of the most powerful frontend frameworks out on the market. It’s logically built, easy-to-use and completely free. It lets you make use of a flexible CSS grid that facilitates in the creation of a clean, user-friendly layout. The Foundation framework is also heavily tested, so it takes care of cross-browser and cross-device compatibility.

You can see another new thing in the HTML code above which is the “row collapse” class. This is Foundation 5’s built-in style. By default there is a gutter between two adjacent columns, but if we add the “collapse” class to our row, the gutter will disappear. We do this because we want the button to be right next to the text input without any space between them.

Foundation Panel.

As this time we want to divide the row into 3 equal columns, we use the “medium-4 columns” CSS selector 3 times. We also add our own CSS class called “popular-additional” with the purpose of facilitating the custom styling later.

We put the whole section inside the “panel” class which is Foundation 5’s pre-prepared CSS class. Inside the panel we place a new row , which will be our first nested row. On tablet and desktop size, this row will be divided to 50-50: one half of the row for the image and one half for the subtitle and the description.

As Foundation Accordions work with JavaScript, you can customize its behavior with the help of pre-built JavaScript variables if you want. To do so, look at the “Optional JavaScript Configuration” section in the Accordion Docs. The following code snippet comes below the Flex Video section inside the index.html file.

Insert the following code snippet below the Popular Panel three times (for the three Latest Posts). Here I just include the code of one Latest Post row, as all of them use the same HTML markup, only the content differs.

If you are familiar with Sass you have even more options as each section in the Docs explains how you can build your own mixins, and which Sass-variables you can use to customize your site. Before you start to design your webpage don’t forget to check the compatibility of the Foundation framework to make sure it works on all browsers you need to build for.

The most important thing you always have to remember is keeping the grid tidy.

On our demo site these logical sections are the 3 different food groups (Main Dishes, Side Dishes, Desserts), and each group contains more smaller groups such as “Poultry”, “Pork”, “Beef”, “Vegetarian”.

If you chose the “Custom Download” option in Step 1, you can opt for a different column number for more complicated layouts but for this example, we will use the default 12.

Our layout will be the following: on mobile and tablet sizes there will be one big column without a sidebar, and on desktop there will be a right sidebar.
Below you can see the screenshot of the planned desktop layout populated with some Cupcake Ipsum dummy content.

Here is the code you need to paste below the Newsletter Section. You can use any video from Youtube, Vimeo etc.

All these 3 grids consist of 12 parallel columns by default. Why 12? Because it can be divided by 2, 3, 4, and 6 therefore it allows many possible layout options

Due to the length of this guide, here are the shortcuts to get to the section you want quickly:

Inside the form we will add a new nested row that divides the screen to 2:1. The text input will get 8 columns and the postfix button will get 4. As we want to have this layout even on mobile screen, we will set the “small-8 columns” and “small-4 columns” CSS-selectors here, the Small Grid being the smallest size where we want to implement this markup.

Prettier CSS

thumbnail styles that we will make use of in this Step. Foundation Thumbnails use a pre-built CSS class called “th” that we need to add to the images we want to display as thumbnails in the way you can see it in the code snippet below.

In the CSS snippet below we need to override them in the first rule (.row .row.latest-post). In the second rule it’s enough to just use our own custom selector (.latest-post h4).

 .row .row.latest-post { margin-bottom: 1.5em; } .latest-post h4 { margin-top: 0; font-size: 1.125em; }

Our prototype now looks like this:

Inside every row you need to put columns that add up to 12. Columns are marked with the CSS class “columns” and the appropriate “large-n”, “medium-n” or “small-n” class.

Let’s see how this looks like in code. First you can see the <div> with the “row” class. To divide the layout into two bars we need to put the whole page into a row. Later we can nest new rows into this, as rows and columns can be indefinitely nested in Foundation 5.

Here in this short CSS snippet we only had to override Foundation’s default CSS only once, at the last rule (.row .row.popular-main). Here’s what the demo site looks like now:

Foundation Forms have many other layout options such as Prefix Label, Prefix Radius Label, Postfix Button, and Postfix Label. We chose the Postfix Button option here as it’s more
user-friendly: users can click on it and send the form at once.

 <header class="contain-to-grid sticky"> <nav class="top-bar" data-topbar role="navigation"> <ul class="title-area"> <li class="name"><h1><a href="#">Foundation 5 Recipes</a></h1></li> <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> </ul> <section class="top-bar-section"> <ul class="left"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="has-dropdown"><a href="#">Recipes</a> <ul class="dropdown"> <li><a href="#">Main dishes</a></li> <li><a href="#">Side dishes</a></li> <li class="has-dropdown"><a href="#">Desserts</a> <ul class="dropdown"> <li><a href="#">Cupcakes</a></li> <li><a href="#">Ice creams</a></li> <li><a href="#">Brownies</a></li> </ul> </li> </ul> </li> <li><a href="#">Blog</a><li> </ul> <ul class="right"> <li><a href="#">Contact Us</a></li> <li><a href="#">FAQ</a></li> </ul> </section> </nav> </header> 

If you copy-pasted this snippet into your index file, take a quick peek on it on mobile size and check out how cool it looks.

Adding Latest Posts

pagination classes. We use the same code in this step that you can find in the “Advanced” section inside the Pagination Docs.

In this tutorial I will show you how you can build a website superfast with Zurb Foundation 5. You can take a look at the final result on the demo page.

Latest Posts with the Pagination

Grid Docs to read more about Incomplete Rows.

The code is the variation of the one you can find inside the Docs. I didn’t change too much about it; I just added some content and varied the order of the list elements. The name of CSS-classes like “has-dropdown” and “dropdown” are pretty much self-explanatory. I also made the header sticky by adding two of Foundation’s Top Bar CSS classes: “contain-to-grid” and “sticky”.

 <div class="row"> <div class="large-8 columns"> <p>Some content for the Main Div</p> </div> <aside class="large-4 columns"> <p>Some content for the Sidebar</p> </aside> </div> 

Top Bar feature. To stay semantic we put the top menu bar inside a <header> tag.

 <div class="row"> <div class="small-12 medium-9 large-12 columns end"> <h5>Our Cookbook</h5> <ul class="accordion" data-accordion> <li class="accordion-navigation"> <a href="#panel1a">Main dishes</a> <div id="panel1a" class="content active"> <ul> <li><a href="#">Poultry</a></li> <li><a href="#">Pork</a></li> <li><a href="#">Beef</a></li> <li><a href="#">Vegetarian</a></li> </ul> </div> </li> <li class="accordion-navigation"> <a href="#panel2a">Side dishes</a> <div id="panel2a" class="content"> <ul> <li><a href="#">Potato dishes</a></li> <li><a href="#">Vegetables</a></li> <li><a href="#">Salads</a></li> <li><a href="#">Rice recipes</a></li> </ul> </div> </li> <li class="accordion-navigation"> <a href="#panel3a">Desserts</a> <div id="panel3a" class="content"> <ul> <li><a href="#">Fruit cakes</a></li> <li><a href="#">Brownies</a></li> <li><a href="#">Ice creams</a></li> <li><a href="#">Pies</a></li> </ul> </div> </li> </ul> </div> </div>

The Docs are pretty well-written and they help developers with many code examples.

 <div class="row"> <div class="small-12 medium-9 large-12 columns end"> <h5>Daily Video Recipe</h5> <div class="flex-video"> <iframe width="560" height="315" src="https://www.youtube.com/embed/PAtt_K3Tjjk" frameborder="0" allowfullscreen></iframe> </div> </div> </div>

Accordion feature of Foundation 5. Accordions are web elements that expand and collapse the content into logical sections.

First you always have to add a row. When you have created a row you have to add columns inside the row. The number of the columns needs to add up to 12. If there are more or fewer columns than 12, the grid won’t work.

Flex Video feature.

Flex Videos use the built-in “flex-video” CSS class. We create a new row for the Daily Video Recipe sidebar section and place one wide column in it with the “small-12 medium-9 large-12 columns end” CSS selectors for the same reason we used an incomplete row in the Medium Grid in the previous step.

In Step 4.1 we will create the one large post with the big picture and short description, in the demo it runs under the nickname “Summer Salad”, and in Step 4.2 we will add the 3 smaller popular posts with the smaller images below it.

Of course we also need to add the new custom CSS file to the <head> section of the index.html file below the foundation.css stylesheet. Now the <head> section of the index file looks like this:

After you have downloaded and unpacked the zip file, open the index.html file in your browser and you will see something like this:

Now I used the “medium-3 columns” and “medium-9 columns” classes to make them divide the screen into 1:3, 25% for the image and75% for the text up from medium size.

Let’s open up the /css folder in our demo folder, create an empty text file and name it app.css. Finally open it up in a text editor.

We place the whole sidebar Accordion into one wide column with the same logic as in the 5.1 and 5.2 Steps before. We put the accordion inside it as an unordered list with the appropriate built-in CSS classes such as “accordion” and “accordion-navigation”.

Using a frontend framework can improve your web design workflow in many ways. It can help you follow modern design principles such as mobile-first approach, semantic markup and responsive design. You can take leverage of many ready-to-use CSS and JavaScript elements and significantly speed up your development process, freeing up more time to focus on visual and user experience design.

  • View Demo
  • Download Source


Leave a Reply