2.2. Foundation Zurb

Es otro Framework popular, usas HTML, CSS y jQuery para hacer páginas web responsive

Hola mundo en Foundation

See the Pen rxpEBj by JOSE (@albatros) on CodePen.

Where to Get Foundation?

There are two ways to start using Foundation on your own web site.

You can:

Foundation Grid System

El sistema de grilla de Foundation permite hasta 12 columnas en toda la página.

Si no desea utilizar estas columnas individualmente, puede agrupar las columnas para crear columnas más amplias

Clases Grid

El Foundation grid system tiene tres clases:

Esras clases pueden ser combinadas para diseños más dinámicos y flexibles.

Tres columnas iguales

This example shows how to create three equal-width columns starting at tablets and scaling to desktops. On mobile phones, the columns will automatically stack:

See the Pen VeyJzV by JOSE (@albatros) on CodePen.

Dos columnas desiguales

This example shows how to create two various-width columns starting at tablets and scaling to desktops:

See the Pen dGJBZQ by JOSE (@albatros) on CodePen.

Mixed: Mobile and Laptop/Desktop

The .small-* (phones), .medium-* (tablets), and .large-* (laptops/desktops) can be combined to create more dynamic and flexible layouts.

Tip: Each class scales up, so if you wish to set the same widths for small and large, you only need to specify .small-*.

In this example we create a 25%/75% split on large devices (.large-3 and .large-9) and a 50%/50% split on small devices (.small-6 and .small-6). Resize the browser window to see the result:

See the Pen YwYoeg by JOSE (@albatros) on CodePen.