What is grid system

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.

29. 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

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

31. Before adding push and pull

32. After adding push and pull

33. 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

34. Thank you