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

12. What can grid systems look like?

13. Other one

14. The Mondriaan

15. How 960.gs works
12-column version

16. 16-column version

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

23. Putting containers and grids together

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

25. Adding a prefix and suffix

26. Multiple rows

27. Multiple rows: markup

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.

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

32. Before adding push and pull

33. After adding push and pull

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

35. Thank you