1. What is grid system?
‣The practice of using a grid to guide design and
page layout is nearly a century old
‣ In the 1910s and 1920s, ornamental design gave
way to Rationalism and New Objectivity
‣ This shift in design was part of a much larger
movement towards function over form
‣ Helvetica typeface and Bauhaus architecture
2. Grid systems on the web
‣ On the web, grid systems usually take the form
of CSS frameworks
‣ A framework is a reusable abstraction of code
wrapped in a well-defined API”1
‣ A collection of tools and shortcuts designed to
minimize code and make your life easier
3. CSS frameworks
‣ Apply the principles of software frameworks to
web design
‣ They provide standardized rules and shortcuts
for:
‣ browser resets
‣ typography
‣ navigation
‣ print style
‣ and...
4. Layout
• When applied to web design, grid systems are
CSS
• frameworks that provides standardized rules
and
• shortcuts for building a website’s layout
5. Why use a grid system?
1) Saves time
2) Saves money
3) Reduces frustration
6. 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
7. How do grid systems work?
Columns
‣ Grid systems are built using columns
‣ Columns are a grid system’s smallest unit
of measurement
‣ Most grid systems contain 12–16 columns
8. 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 gutters
between columns
‣ These gutters provide margins between page
regions
9. Lean and versatile CSS
‣ A grid system’s CSS should:
‣ Be lean and efficient
‣ Be versatile and reusable
‣ Ensure consistent behavior across all common
browsers — even IE6
10. Wrapping <div> elements
‣ In fixed-width grid systems, the entire layout is
wrapped inside a single <div> element
‣ <div> elements wrap the page regions and define
their widths according to the number of columns
they span
‣ These <div> elements may be nested to create
regions within regions
11. Floating <div> elements
‣ The wrapping <div> elements are assigned
a column width using a CSS class
‣ Because these classes also float the elements,
they simply fall into place on the page
17. Using both versions simultaneously
‣ You can use 12-column classes inside a 16-
column
grid — and vice versa
‣ This is possible because 12 and 16 are both
multiples of 2 and 4
‣ 2 * 6 = 12 ‣ 2 * 8 = 16
‣ 4 * 3 = 12 ‣ 4 * 4 = 16
18. ‣ 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:
19. CSS and markup
Containers
‣ Grids must be wrapped in a container <div>
‣ Containers center the content and define
which version of the grid will be implemented
20. Grids
‣ Grids are held inside containers and are
floated left so they fall into place
automatically
‣ They also provide 10px margins on the left and
right
21. Grid widths
‣ The width of each grid is determined by the
container that wraps it
‣ For example, a one column grid is either
60px or 40px depending on whether
it’s a 12- or 16-column layout
22. ‣ Note that grid width does not increase by 60px
or 40px each time
‣ Each increase must account for the 20px
gutter between grids
24. 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
28. Alpha and omega fix broken nesting
‣ When nesting grids, use the alpha and omega
classes to remove the margins
‣ alpha removes the left margin. It’s the first nested
grid.
‣ omega removes the right margin. It’s the last
nested grid.
29.
30. 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 convention
as .grid-X, .prefix-X, and .suffix-X, where X is
the grid’s width:
‣ .push-X and .pull-X
31. ‣ Push and pull values should match the grid
value of the opposite grid
34. 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
