What is grid system

13,575 views
13,026 views

Published on

Published in: Technology
4 Comments
8 Likes
Statistics
Notes
  • It's very help full thank you.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Neat. One question. Shouldn't the last example on the bottom left of slide 22 read:
    .container-12 .grid-3 { width: 220px; }, 3x60+40=220?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • its good and very useful..tq
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • this presentation was very explanative and helpful, thank you very much
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
13,575
On SlideShare
0
From Embeds
0
Number of Embeds
220
Actions
Shares
0
Downloads
127
Comments
4
Likes
8
Embeds 0
No embeds

No notes for slide

What is grid system

  1. 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. 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. 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. 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. 5. Why use a grid system? 1) Saves time 2) Saves money 3) Reduces frustration
  6. 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. 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. 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. 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. 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. 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. 12. What can grid systems look like?
  13. 13. Other one
  14. 14. The Mondriaan
  15. 15. How 960.gs works 12-column version
  16. 16. 16-column version
  17. 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. 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. 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. 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. 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. 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. 23. Putting containers and grids together
  24. 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. 25. Adding a prefix and suffix
  26. 26. Multiple rows
  27. 27. Multiple rows: markup
  28. 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. 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. 30. ‣ Push and pull values should match the grid value of the opposite grid
  31. 31. Before adding push and pull
  32. 32. After adding push and pull
  33. 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. 34. Thank you

×