Great thanks to Christos Constandinou who put the original version and this grid system together. It has been modified by Caleb Gilbert while adapting it to atck project. It could still use some more smoothing, but should still be useful for anyone using atck.
Please note: All comments on this page pertain specifically to styles.css
atck is inspired by YUI grids. Yahoo Grids is released under the BSD license, atck claims no copyrights of its own, but the files which are available on Drupal.org (which include no Yahoo Grids code) are released under the GPL.
The reason atck 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.
The foundational atck 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.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 atck 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:
atck 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).
atck 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 atck 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 atck 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 atck
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 atck 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: atck has been tested in IE5-7, FF1.5-2.0 and Safari 2.something.
No copyrights! I don't care what you do! :D