___layouts is not only inspired by YUI grids I've also used — probably more than just used their documentation as guide — seeing as it's so damn good!
First off I want to give full credit to YUI grids for coming up with a brilliant idea and please don't sue me if I'm infringing on any copyright laws.
The reason ___layouts was created; I felt YUI grids was a little too difficult to implement, especially when implementing pixel perfect width layouts. Which as contractor is a lot of what I need to end up doing unfortunately.
I'm not saying ___layouts is better than YUI grids, it's probably not even AS good. It is definately not as tested.
I just think it is an easier system for developers to over-write and invite developers to help break it in any browser and version they can so it can become better; eventually allowing humanity to rid the earth of itself. :)
The foundational ___layouts file offers five preset page widths, the option to have a fixed width or a text "zoom" style scaling effect and two core templates which give you the ability to nest subdivided regions of one to four columns.
Other features include:
div.section will clear correctly.Check out a complex grid created with ___layouts
I don't care, I couldn't be bothere coming up with something cool and if you wanna rip it off, which I'm hoping you do, then it's easy to change! :)
We use and recommend this !DOCTYPE if your work is going to be used for distributed content authoring where users may be able to put in their own HTML
Otherwise you should use this !DOCTYPE to trigger Standards Mode in browsers with multiple rendering modes:
To use ___layouts CSS, include the following source file in your web page with the link element.
Layouts rely on the width of an "em" provided by Fonts CSS; therefore, that file must be included. For the sake of this document, the level playing field provided by YUI's Reset CSS are also assumed.
Available for ease of use is the file base.css which imports the YUI reset.css and the ___layout's font.css
Including the doctype declaration and links to the files, the top and head of your document should contain the following information:
In addition to the recommended doctype and ___layout's foundational CSS files, we find it useful to construct a page in three stacked regions. We define one region for the header (or masthead), one for the body region, and one for the footer. These regions aren't strictly required, but we will use them in our examples. Including the above, the base markup looks like this:
Note: The id's assigned to each div.section can be changed at your whim.
You may also put as many div.section's as you like, they will clear:both sides of themselves.
The outer div with an id of container is where you adjust the width and scale mode of your page.
There are two scaling modes, no horizontal scaling (i.e. fixed width) and flexible in response to user initiated font-size adjustments, these are, respectivaly:
There are four sizes to choose from:
Note: Remember 1em = 10px so which ever you choose they will always start out the same width if the user's font-size is set to its default.
So when you decide which Scale mode and size you want you simply combine the two as a hyphen (-) separated word (e.g. fixed-lg).
Alternatively you can use a class of "fluid" or leave the class blank, to make the width 100% of the browser viewport.
The page is aligned to the left by default. If you would like the page to appear in the center of the browser's viewport then add a class of "center to the body tag:
___layouts do not come with any predefined margins or padding between layouts or columns.
The reason for this is that they are purely to align items on your page. Margins and padding are determined by the page design of your site — as opposed to the page architecture — and should be added in post layout construction.
Currently there are two predefined layout types:
On their own they do nothing and whatever you put in to them will have the ability to fill the div.
Each layout div will have a class of "layout" along with one more class that will define the amount of columns and the widths of each column in the layout (relative to the outer layout type).
___layouts support layouts of one to four columns, the depending on how many columns you wish to include in your layout you would use:
Each column in a layout will have a class of "gr" along with one more class "a", "b", "c" or "d"; depending on the type of layout and amount of columns
When using these in conjunction with a layout type you can achieve the following column styles
View examples of the a-b layout
View examples of the b-c layout
View an example of the a-c layout
View examples of the a-b-c layout
View an example of the a-b-c-d layout
Nesting layouts is relatively simple, providing you know what you want your layout to look like.
All you have to do is insert one of the previously defined layouts within on of the div.gr's. The "layout" class takes care of clearing anything below or beneath the layout.
View an example of this layout
View an example of this layout
Note: You can reduce the amount of div's in the above seeing as it repeats the same layout types within nested layouts.
View an example of this layout
The standard 3 and 4 column layouts in ___layouts do not support "any order columns". They are all floated left to allow for a reduction of code when doing simple layouts (e.g. nested within another layout) that not require a specific source order.
HOWEVER this does not mean you cannot create layouts of any of the specified column amounts — and more!
If you use any of the 2 column layouts with some clever nesting to achieve you end means. See the examples below:
View an example of this layout
View an example of this layout
So depending on what you would like to do and how your content needs to be structured you can always achieve you final goal!
You may have noticed in a couple of the examples above that some layout types also had a class of "tidy".
Tidy is a way to achieve equal column heights when using background colours on columns.
However, due to the way CSS Cascades in case you would not like every nested layout to also have equal column heights; an "untidy" class is also provided to undo the hack.
View an example of this layout
More than occassionally, in fact almost always, when working with graphic designers; you will need to create layouts where columns are pixel perfect in width.
Especially when working for corporate sites and/ or sites that have a lot of advertising and incorporate IAB's Ad Unit Guidelines for common ad dimensions.
Though it may seem daunting at first, over-writing ___layouts predefined widths is quite simple. Making it easier for you to modify was the main reason it was decided to only use floats and not incorporate negative margins into the layouts.
To make it easier for you to over-write the base CSS!
Note: Be aware of the correct way to calculate a selector's specificity in order to get the desired widths for nested layouts.
View an example of over-writing the base CSS of ___layouts
Alternatively you can assign IDs to your layouts so you don't have to worry about selector specificity
View an example of over-writing the base CSS of ___layouts using IDs
Note: The IDs can be whatever you want. I'm just really bad at coming up with names for them, so those are the ones I chose
Layout builder is a tool that helps you build complex nested layouts. It is still in it's very early stages and will eventually allow you to add pixel perfect widths to columns and generate the custom over-writing CSS for you.
Note: For speedier and easier development, layout builder only works in Firefox.
Note: ___layouts has been tested in IE5-7, FF1.5-2.0 and Safari 2.something.
Everything you need to use ___layouts is contained in this zip file!
No copyrights! I don't care what you do! :D