Getting Started with Foundation 5

Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

Getting Started with Foundation 5

Foundation Tutorials

In today’s world of cutthroat app development, reaching a very large audience with your application before your competitor does is quite critical. To achieve this, your (App idea) : (App delivery) turn around time should be quite minimal. And with such a large number of devices around to make this difficult (if not already), one needs to be aware of all possible ways to beat one’s competition.

On a personal note, if you are looking to build an app with basic features, you can prefer Responsive Web Design to a Native app. This is a quick presentation to get started on Responsive Web Design. Foundation is one such RWD framework, and this is a tutorial on how to get started and work with Foundation 5.

Contents

Setup Foundation

I have written another post here explaining how to setup Foundation 5. You can pick the Simple Setup to run along this post. You can copy paste the code from below snippets and paste it into either index.html , or add new css at /css/app.css  or add new js at js/app.js  (Don’t forget to add reference to index.html).

Grid System

Responsive Web Design goes hand in hand with the grid system. A Grid system is used to guide designs and page layout, more like a ruler but following some rules. This will help you design the layout of your page more efficiently. Columns are the building blocks of the grid. There are 2 types of grid systems, one 12 columns & one 16 columns.

To build a clean, consistent & semantics markup (looks the same in IE8 & below), we can leverage the power of a grid system. RWD implements the grid system via CSS.

960_grid_12_col

source

As you can see from above, how all the items in the page are aligned as per the pinkish lines? This structure will remain same throughout – for all the devices, standardizing your application & mainly to avoid the Baby Duck Syndrome.

Foundation 5 also uses a grid system, a 12 column one. In fact Foundation offers a few variations of the grid system. The key difference between them is how they warp themselves when we resize the screen or view it on a device vs desktop.

Device Class Pattern
Desktops & above Large-*
Tablets/Phablets Medium-*
Mobiles Small-*

To develop a sample layout in Foundation, we first define a row. Then choose the widths of each column. The key principle to remember here is the sum of all columns need to add up to 12.

Small Grid System

Responsive Testing

You can click here to open a responsive testing tool/website called Screenfly. You can click on the devices listed on top and see how our 4 column grid resizes.

I will be using the same tool for other examples as well.

PS: I have added the brown border to clearly differentiate each column. You can remove the same in the CSS tab and checkout the layout.

Moving on, lets take a look at a couple of variations to the above example

And Screenfly Link.

Large Grid System

Screenfly

As you can see, we have updated the classes from small-3 to large-3 and how each row wraps up when we reduce the width the of the screen.

Another example.

Screenfly

Such kind of variations will give a designer as well as developer a great deal of flexibility in working with Grids. And yes, these 2 grid systems can work together pretty well.

Lets say, we want a 2 column layout. When the width of the screen is tablet & above, we want the each column to span 6 columns. And when we are on tablet & below, we want the layout to be 4 columns & 8 columns respectively. So this is how we achieve it

Screenfly

Quite powerful isn’t it.

PS: The medium grid system is pretty similar to the large one in its content wrapping nature. Medium grid related classes can be applied to target devices with a width similar to a tablet landscape or below.

Block Grid

Another type of grid system is the Block grid system. This will quickly wrap all your list items into an equally spaced grid. Highly suitable for a gallery of images.

Screenfly

Since we have used a small-block-grid-3, the images will not wrap to the next line, but will continue to resize as per the available width. And -3 indicates how many of the items need to appear in a row.

You can also do some crazy stuff like controlling No. of items per row depending on the resolution.

Screenfly

Nesting Grids

There are times and places where the concept of a “row” can be a limitation while arranging items on the page. Take a look at this sample template. Given what you have learnt till now, can you think of a way to implement the images on each row on the right column with the left logo column?

Yes, you guess it right, if you use a row to generate a layout for the logo and first row of  images, the 2nd row of images will not stack until the left column content is filled. Kind of odd looking isint it?

Screenfly

As you have seen above, we will take a row, split it 4:8. In the 8 column part, we add a new row and then arrange all our list items.  And that is how you define.. awesomeee…

Offsetting, Centering & Source Ordering Grids

Lets talk about scenarios, where you want to add some padding, spacing between columns. Foundation 5 provides a few offset classes out of the box.

Take a look at this screenfly link to understand the offsets.The same pattern applies for small, medium & large grids too.

Centering a grid column (not content inside it) is also driven via classes (duh!)

Screenfly

As you can see, row 2 in the above snippet, the column is centered when in the desktop view, where as it left aligns itself in the Tablet and Mobile views. Talk about control!

Source ordering of grids is a powerful concept and is very specific to requirements. If you would like arrange certain content on left on mobile & Tablet view, but the same content to be arranged on the right hand side while in desktop view, this is your best friend.

Screenfly

As you can see the class push, pull can be associated with the device related classes (small, medium & large) and define the position of the column at that breakpoint.

Media Queries

Now, we have a basic understanding of the grid system, lets see how to control it, in case you need to customize it. The width of each column depends on the grid system you are using i.e. 12 column or 16 column and what is the break point for each device for a specific column.

You can use the below CSS media queries to add your custom classes and update the behaviour.

In case you are trying to change the Grid system at a core level across all page, it is advisable to use the SASS/SCSS based approach explained here.

Display components

Forms

Basic form elements are pretty straight forward. You can dump them in a row and arrange them as you want.

Screenfly

Buttons

Property Values
Size tiny | small | large
Color secondary | success | alert
Border Radius radius | round
State disabled
Width 100% expand

All the above need to be used along with the button class.

List items


Screenfly


Screenfly

 Images & Video

You can easily make an image look like a thumbnail by adding a class ‘th’ & also you can added a rounded corner to the border via a class ‘radius’.


Screenfly

Making videos responsive is quite a challenge. Foundation offers this support out of box. All you need to do is add a class flex-video, to the containing div and Bam!! the video becomes responsive! HTML5 Video example.


Screenfly

Foundation supports Youtube and Vimeo out of box


Screenfly

 Panels

Panels are content highlighters. They emphasise the content inside them to stand out. There are 2 flavours of panel, one the basic, second one the “coloured”


Screenfly

 You can read further about Typography, Tables, Progress bars, to get a complete understanding of the available CSS components out of box.

Functional Components

Validations

Foundation provides validation support for all your form elements. All you need to do is add data-abide attribute to your form tag and on the form field add an attribute called required.


Screenfly

You can also supply a pattern attribute to the input tag to force a certain type of validation. And here is a list of all the possible patterns supported by Foundation.

Equalizer

If you have worked with any Responsive Web Design framework before, you will have a javascript function, apart from your responsive code  that will arrange all your columns to match heights for a consistent design (unless you are looking for a design like Pinterest). Foundation, provides this out of box!

All you need to do is set data-equalizer attribute to your row & data-equalizer-watch to the columns for which the heights need to be matched.


Screenfly

2 Awesome callbacks

Or, you can add a callback to the Foundation Initialization.

Interchange

What if, you wanted to show a certain image for desktop, a certain image for tablets & certain image for mobiles?. How would you go about it? We would probably need to write a media query with css to that img tag to fetch the images as the resolution changes via the background image attribute, else use the Javascript’s Resize event.

Behold Foundation, this is a simple data attribute!


Screenfly

Off-canvas Navigation

To consume the maximum real estate on a mobile device, we would prefer a navigation menu off-canvas. What do I mean? Check this out.


Screenfly

Click on the menu link to see the magic.

There are other components like carousels, app walkthroughsmodal popups & tool tips, which are pretty similar to plugins from other component libraries.

You can drop a comment incase you are facing issues integration the components.

Visibility Detection

There are a few useful classes in Foundation to check orientation & current device features. This can helpful to show hide components as needed.


Screenfly

This kind of gives a good idea on how to get started with Foundation. There are a couple of advanced topics (like Javascript utilities & a few Javascript components), which I have left out intentionally to keep things simple.

You can read this article to understand how you can set up a SASS/SCSS based Foundation project & work around theming the website via SASS/SCSS.


Thanks for reading! Do comment.
@arvindr21

Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page