Short presentation of Zurb Foundation Framework

You’ve probably used a grid framework before — we think you’ll like this one. It’s a 12 column flexible grid that can scale out to an arbitrary size (defined by the max-width of the row) that’s also easily nested, so you can build out complicated layouts without creating a lot of custom elements. And when the Grid isn’t enough for your site, it just gets out of the way.
The Grid lets you quickly put together page layouts for mobile devices and the desktop. You don’t need two different sites – the Grid is built to create a rock-solid experience on all kinds of devices with the exact same markup.

The Basics:

The grid is built around three key elements: containers, rows, and columns. Containers create base padding for the page; rows create a max-width and contain the columns; and columns create the final structure. Everything on your page that you don’t give a specific structural style to should be within a container, row and column.

What you need to know is that columns don’t have a fixed width: they can vary based on the resolution of the screen, or the size of the window (try scaling down this window to see what we mean). Design with that in mind.

In the Grid you can nest columns down as far as you’d like. Just embed rows inside columns and go from there. Each embedded row can contain up to 12 columns. Buttons : Foundation ZURB has multiple buttons styles and color that are not only badass out of the box, but easy to customize for your projects. Foundation ZURB buttons have a number of parameters and styles – you can see a few examples below. The out of the box classes include size, color and style (square, slightly rounded, and completely rounded).

Nice buttons have a little more pizazz using a background image, but they still support the same classes as any other button including color, size, and corner radius.
foundation Buttons

Foundation ZURB Forms:

Forms are not a lot of fun. We’ve taken that lack of fun and dodged it with this ready-made code. In this release there are two sets of forms styles – basic and nice. Both are simple, both are flexible, both are easy to customize. Make sure to include "app.js" if you’re going to use these forms.

cholakov it mobile version
Inputs support a number of different base classes. Any text input has a class of ‘input-text’ and supports several sizes standart, small , medium , large , Oversize Inline labels are accomplished using the HTML5 Placeholder attribute, with a built-in JS fallback.

Creating easy to style custom form elements is so crazy easy, it’s practically a crime. Just add a class of ‘custom’ to a form and, if you want, forms.jquery.js will do everything for you.

The Foundation ZURB forms js will look for any checkbox, radio button, or select element and replace it with custom markup that is already styled with forms.css.

Layouts Mobile Visibility With Foundation 2.2 we’ve included various mobile visibility affordance classes. Want to hide something on phones, or show it only on tablets? Got you covered.

Leave a Reply

Your email address will not be published. Required fields are marked *