What is grid system ?
Grid usage to guide design and page layout is in practice for around 100 years now
Rationalism and New Objectivity came into picture in 1910s and 1920s due to ornamental design
This shift in design was responsible for a much larger movement towards function over form
Helvetica typeface and Bauhaus architecture
Grid systems on the web
Grid systems are known to take the form of CSS frameworks on the web
A framework can be best described as a reusable abstraction of code wrapped in a well-defined API1
A collection of tools and shortcuts help in minimizing code
CSS frameworks
The principles of software frameworks are needed to applied to web design
They provide standardized rules and shortcuts for:
browser resets
typography
navigation&
print style
and...
Layout
Application to web design means grid systems act as CSS frameworks capable of providing standardized rules and shortcuts for building a websites layout
Why use a grid system?
1) Saves time
2) Saves money
3) Reduces frustration
Stop reinventing the wheel
It helps in reducing the amount of CSS and markup required for duplication each time you begin with a project
Frees from the requirement of referring to old projects to understand implement layouts
How do grid systems work?
Columns Grid systems are built using columns Columns are a grid systems smallest unit of
measurement 1216 columns are present in most grid systems
Column width
Column width defined regions (header,content, sidebars, etc.)
As in: The header is eight columns wide Gutters (margins)
Use of margins or padding is meant for creating gutters between columns
It is possible with these gutters to provide margins between page regions.
* Lean and versatile CSS*
A grid systems CSS should:
Be lean and efficient
It is recommended to be versatile and reusable in order to ensure consistent behavior across all common browsers even IE6
0 Comment(s)