(For more resources related to this topic, see here.)
Step 1 – using the Grid
The base building block that Foundation 4 provides is the Grid. This component allows us to easily put the rest of elements in the page. The Grid also avoids the temptation of using tables to put elements in their places. Tables should be only used to show tabular data. Don’t use them with any other meaning. Web design using tables is considered a really terrible practice.
Defining a grid, intuitively, consists of defining rows and columns. There are basically two ways to do this, depending on which kind of layout you want to create. They are as follows:
- If you want a simple layout which evenly splits contents of the page, you should use Block Grid . To use Block Grid, we must have the default CSS package or be sure to have selected Block Grid from a custom package.
- If you want a more complex layout, with different sized elements and not necessarily evenly distributed, you should use the normal Grid. This normal Grid contains up to 12 grid columns, to put elements into.
After picking the general layout of your page, you should decide if you want your grid structure to be the same for small devices, such as smartphones or tablets, as it will be on large devices, such as desktop computers or laptops.
So, our first task is to define a grid structure for our page as follows:
- Select how we want to distribute our elements. We choose Block Grid, the simpler one. Consequently, we define a <ul> element with several <li> elements inside it.
- Select if we want different structure for large and small screens. We Yes .This is important to determine which Foundation 4 CSS class our elements will belong to.
As result, we have the following code:
<ul class=”large-block-grid-4″> <li><img src =”demo1.jpg”></li> <li><img src =”demo2.jpg”></li> <li><img src =”demo3.jpg”></li> <li><img src =”demo4.jpg”></li> </ul>
The key concept here is the class large-block-grid-4. There are two important classes related to Block Grid:
- Small-block-grid : If the element belongs to this class, the resulting Block Grid will keep its spacing and configuration for any screen size
- Large-block-grid : With this, the behavior will change between large and small screen sizes. So, large forces the responsive behavior.
You can also use both classes together. In that case, large overrides the behavior of small class. The number 4 at the end of the class name is just the number of grid columns.
The complete code of our page, so far is as follows:
<!DOCTYPE html> <!–[if IE 8]><html class=”no-js lt-ie9″ lang=”en” ><![endif]–> <!–[if gt IE 8]><!–> <html class=”no-js” lang=”en” > <!–<![endif]–> <head> <meta charset=”utf-8″ /> <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″ /> <title>My First Foundation Web</title> <link rel=”stylesheet” href=”css/foundation.css” /> <script src =”js/vendor/custom.modernizr.js”></script> <style> img { width: 300px; border: 1px solid #ddd; } </style> </head> <body> <!– Grid –> <ul class=”large-block-grid-4″> <li><img src =”demo1.jpg”></li> <li><img src =”demo2.jpg”></li> <li><img src =”demo3.jpg”></li> <li><img src =”demo4.jpg”></li> </ul> <!– end grid –> <script> document.write(‘<script src =’ +
(‘__proto__’ in {} ? ‘js/vendor/zepto’
: ‘js/vendor/jquery’) + .js><\/script>’) </script> <script src =”js/foundation.min.js”></script> <script> $(document).foundation(); </script> </body> </html>
We have created a simple HTML file with a basic grid that contains 4 images in a list, using the Block Grid facility. Each image spans 4 grid columns.
The following screenshot shows how our page looks:
Not very fancy, uh? Don’t worry, we will add some nice features in the following steps.
We have way more options to choose from, for the grid arrangements of our pages. Visit http://foundation.zurb.com/docs/components/grid.html for more information.
Step 2 – the navigation bar
Adding a basic top navigation bar to our website with Foundation 4 is really easy. We just follow steps:
- Create an HTML nav element by inserting the following code:
<nav class=”top-bar”></nav>
- Add a title for the navigation bar (optional) by inserting the following code:
<nav class=”top-bar”> <ul class=”title-area”> <li class=”name”> <h1><a href=”#”>My First Foundation Web</h1> </li> <li class=”toggle-topbar”> <a href=”#”><span>Menu</span></a> </li> </ul> </nav>
- Add some navigation elements inside the nav element
<nav class=”top-bar”> <!–Title area –> <ul class=”title-area”> <li class=”name”> <h1><a href=”#”>My First Foundation Web</h1> </li> <li class=”toggle-topbar”> <a href=”#”><span>Menu</span></a> </li> </ul> <!– Here starts nav Section –> <section class=”top-bar-section”> <!– Left Nav Section –> <ul class=”left”> <li class=”divider”></li> <li class=”has-dropdown”><a href=”#”>Options</a> <!– First submenu –> <ul class=”dropdown”> <li class=”has-dropdown”><a href=”#”>Option 1a</a> <!– Second submenu –> <ul class=”dropdown”> <li><label>2nd Options list</label></li> <li><a href=”#”>Option 2a</a></li> <li><a href=”#”>Option 2b</a></li> <li class=”has-dropdown”> <a href=”#”>Option 2c</a> <!– Third submenu –> <ul class=”dropdown”> <li><label>3rd Options list</label></li> <li><a href=”#”>Option 3a</a></li> <li><a href=”#”>Option 3b</a></li> <li><a href=”#”>Option 3c</a></li> </ul> </li> </ul> </li> <!– Visual separation between elements –> <li class=”divider”></li> <li><a href=”#”>Option 2b</a></li> <li><a href=”#”>Option 2c</a></li> </ul> </li> <li class=”divider”></li> </ul> </section> </nav>
Interesting parts in the preceding code are as follows:
- <li class=”divider”>: It creates a visual separation between the elements of a list
- <li class=”has-dropdown”>: It shows a drop-down element when is clicked.
- <ul class=”dropdown”>: It indicates that the list is a drop-down menu.
Apart from that, the left class, used to specify where we want the buttons on the bar. We would use right class to put them on the right side of the screen, or both classes, if we want several buttons in different places.
Our navigation bar looks like the following screenshot:
Of course, this navigation bar shows responsive behavior, thanks to the class toggle-topbar-menu-icon. This class forces the buttons to collapse in narrower screens. And it looks like the following screenshot:
Now we know how to add a top navigation bar to our page. We just add the navigation bar’s code before the grid, and the result is shown in the following screenshot:
Summary
In this article we learnt how to use 2 of the many UI elements provided to us by Foundation 4, the grid and the navigation bar. The screenshots provided help in giving a better idea of how the elements look, when incorporated in our website.
Resources for Article :
Further resources on this subject:
- HTML5: Generic Containers [Article]
- Building HTML5 Pages from Scratch [Article]
- Video conversion into the required HTML5 Video playback [Article]
