What is grid system

What is grid system?

‣The practice of using a grid to guide design andpage layout is nearly a century old

‣ In the 1910s and 1920s, ornamental design gaveway to Rationalism and New Objectivity

‣ This shift in design was part of a much largermovement towards function over form

‣ Helvetica typeface and Bauhaus architecture

Grid systems on the web

‣ On the web, grid systems usually take the form of CSS frameworks

‣ A framework is a reusable abstraction of codewrapped in a well-defined API”1

‣ A collection of tools and shortcuts designed tominimize code and make your life easier

CSS frameworks

‣ Apply the principles of software frameworks toweb design

‣ They provide standardized rules and shortcuts for: ‣ browser resets ‣ typography ‣ navigation ‣ print style ‣ and...

Layout

• When applied to web design, grid systems are CSS

• frameworks that provides standardized rules and

• shortcuts for building a website’s layout

Why use a grid system?

1) Saves time2) Saves money

3) Reduces frustration

Stop reinventing the wheel

‣ Reduces the amount of CSS and markup you need to duplicate each time you start a project

‣ No need to refer to old projects to figure out how to implement layouts

How do grid systems work?

Columns ‣ Grid systems are built using columns ‣ Columns are a grid system’s smallest unitof measurement

‣ Most grid systems contain 12–16 columns

Column width

‣ Page regions (header,content, sidebars, etc.)are defined by column width

‣ As in: “The header is eight columns wide”Gutters (margins)

‣ Margins or padding are used to create guttersbetween columns

‣ These gutters provide margins between pageregions

Lean and versatile CSS

‣ A grid system’s CSS should: ‣ Be lean and efficient ‣ Be versatile and reusable ‣ Ensure consistent behavior across all commonbrowsers — even IE6

Wrapping <div> elements

‣ In fixed-width grid systems, the entire layout iswrapped inside a single <div> element

‣ <div> elements wrap the page regions and definetheir widths according to the number of columnsthey span

‣ These <div> elements may be nested to createregions within regions

Floating <div> elements

‣ The wrapping <div> elements are assigneda column width using a CSS class

‣ Because these classes also float the elements,they simply fall into place on the page

What can grid systems look like?

Other one

The Mondriaan

How 960.gs works12-column version

16-column version

Using both versions simultaneously

‣ You can use 12-column classes inside a 16-columngrid — and vice versa

‣ This is possible because 12 and 16 are bothmultiples of 2 and 4

‣ 2 * 6 = 12 2 * 8 = 16‣ ‣ 4 * 3 = 12 4 * 4 = 16‣

‣ In other words, when you divide the layout into halves and quarters, you can use 12- and 16- column version simultaneously

‣ Watch what happens when you lay one grid on top of the other:

CSS and markup

Containers ‣ Grids must be wrapped in a container <div> ‣ Containers center the content and definewhich version of the grid will be implemented

Grids

‣ Grids are held inside containers and arefloated left so they fall into place automatically

‣ They also provide 10px margins on the left andright

Grid widths

‣ The width of each grid is determined by thecontainer that wraps it

‣ For example, a one column grid is either60px or 40px depending on whetherit’s a 12- or 16-column layout

‣ Note that grid width does not increase by 60px or 40px each time

‣ Each increase must account for the 20px gutter between grids

Putting containers and grids together

Prefixes and suffixes ‣ If you want to leave space between columns, use a prefix or suffix class

‣ Prefix classes add padding to the left of a column

‣ Suffix classes add padding to the right

Adding a prefix and suffix

Multiple rows

Multiple rows: markup

Alpha and omega fix broken nesting

‣ When nesting grids, use the alpha and omegaclasses to remove the margins

‣ alpha removes the left margin. It’s the first nested grid. ‣ omega removes the right margin. It’s the lastnested grid.

Push and pull classes

‣ Content-first layout can be achieved in Nine Sixty by “pushing” the content grid to the right while “pulling” a sidebar to the left

‣ These classes use the same naming conventionas .grid-X, .prefix-X, and .suffix-X, where X is the grid’s width:

‣ .push-X and .pull-X

‣ Push and pull values should match the grid value of the opposite grid

Before adding push and pull

After adding push and pull

When not to use a grid

‣ Implementing a grid will probably be impossible if your site’s layout...

‣ uses irregular column sizes ‣ has irregular margins or gutters ‣ has a width that isn’t divisible by a sane number

Thank you