O'Reilly logo

Responsive Web Design with jQuery by Gilberto Crespo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Exercise 2b – using Foundation4 Grid to structure our website

After seeing the use of some Responsive Grid Systems (starting from a simpler solution and going for a more complete solution), let's structure our code using the Foundation4 Grid, creating the response quickly, and without writing one line of CSS code to do that. Also, remember to configure the viewport in the <head> tag.

Using the Foundation4 Grid, perform the following recommended steps:

  1. Start coding the HTML script.
  2. Identify the rows in the structure and add a row class to the existent element or to a new div tag.
  3. Measure how many columns each main element will fill and set this value in the classes.

Let's see how it is done in the following HTML:

<!DOCTYPE html> <html lang="en"> <head> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required