)
Using Grid Layout Classes
Today people browse the Web using devices with very different screen sizes and resolutions. To adapt (or "respond") to these conditions, one strategy that is quite helpful is to layout HTML page content in a "grid system."
The basic idea is that you can divide your layout into a fixed number of columns, often 12, and then assign a number of columns to each block that is in the layout. A block can fill all 12 columns, or it can share one row equally with another when each block is assigned 6 columns. To create a row with three blocks that share the window width equally, assign 3 columns to each of the three blocks. There are many combinations row configurations, like 12, 11-1, 10-2, 9-3, 8-4, 7-5, 6-6, 5-7, 4-8, 3-9, 2-10, 1-11, 3-3-3, 6-3-3, etc.
In this page, for example, the Using Grid Layout Classes area is assigned 9 columns, whereas the Fruit List occupies 3. Together these fill 12 columns. By contrast, the four Column areas on the bottom of the page are each assigned 3 columns, which adds up to 12 also. To see a graphic that depicts some of the layout options for a 12 column grid, click to see this image.
The CSS that helps us apply grid principles to this page comes from a website called tinyfluidgrid.com. That site is linked to this page dynamically, providing CSS to the browser to help it format this page. You can click here to see the CSS code that is being obtained from their site using the following parameters (included in the URL):
- gutter_percentage=40
- grid_columns=12
- min_width=960
- max_width=1200
The 99lime.com people borrowed their ideas for the 12 column grid system from the people at tinyfluidgrid.com. 99lime claims it provides "Ultra-Lean" website building tools. The CSS provided by tinyfluidgrid.com is MUCH leaner than the examples provided by 99lime.com. The HTML KickStarter package is a useful bundle, but only once you begin to understand what it is providing. One component – a very important component – of what HTML KickStarter provides is this grid system. Without understanding 12 column layout principles, all the other elements that 99lime.com provides are going to lead nowhere.
Fruit List
- Apple
- Banana
- Orange
- Pear
Column
One difference about the way the grid system is implemented by tinyfluidgrid.com: they call their classes grid_12, grid_11, etc. 99lime.com calls theirs col_12, col_11, etc. Another difference: 99lime.com doesn't use the container class.
Column
A note about the placeholder images that are used in this page. They are provided by a website named placehold.it
It lets you color and size placeholder images without downloading or uploading them anywhere.Column
Let's practice using this grid system from tinyfluidgrid.com before we begin working with HTML KickStart. It is important to understand how to lay -out the blocks of HTML before dealing with the many options in the KickStart toolkit.
Column
You'll notice that a "clear" class is provided by the CSS to force the layout to do a "carriage return" to the next line. Without it, content is liable to get bunched up in weird ways under some browser widths.
© Put your info here