home resources search newsjoinmembers: 6958
PHP Flash Java Ruby Windows Linux

ATCK Drupal Template Creator

drupal's picture

drupal | Mon, 2008-09-08 15:17  tags: , , , , , , , ,
Leave a commentsubscribe to feedfriendly: printshare: delicious, digg, reddit, icerocket

Try layout builder

On this page:

Credit where credit is due

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

Disclaimer

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.

About atck

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:

  • Supports fluid-width (100%) layouts.
  • Supports preset fixed-width layouts at:
    • 640px
    • 760px
    • 900px
    • 1000px
  • Supports easy customization of the width for fixed-width layouts.
  • Option to make layout flexible in response to user initiated font-size adjustments

  • Self-clearing sections. No matter which column is longer, each div.section will clear correctly.
  • Option to center within the viewport pages less than 100%.

  • Supports easy to over-write CSS classes for people who require "pixel perfect" layouts
  • font.css based on YUI fonts.css though changed slightly to rid you of having to look up calculations for different font-sizes (so now: 1em = 10px, 1.3em = 13px, etc...).

Check out a complex grid created with atck

Getting Started

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Otherwise you should use this !DOCTYPE to trigger Standards Mode in browsers with multiple rendering modes:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

To use atck CSS, include the following source file in your web page with the link element.

  1. <link href="layout.css" rel="stylesheet" type="text/css" />

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:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <title>Really cool title</title>
  5. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
  6. <link href="base.css" media="all" rel="stylesheet" type="text/css" />
  7. <link href="layout.css" media="screen" rel="stylesheet" type="text/css" />
  8. </head>

Using layout.css

Starting Base Markup

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:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <title>Grid layouts</title>
  5. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
  6. <link href="base.css" media="all" rel="stylesheet" type="text/css" />
  7. <link href="layout.css" media="screen" rel="stylesheet" type="text/css" />
  8. </head>
  9. <body>
  10. <div id="container">
  11. <div class="section" id="h"><!-- header --></div>
  12. <div class="section" id="b"><!-- body --></div>
  13. <div class="section" id="f"><!-- footer --></div>
  14. </div>
  15. </body>
  16. </html>

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.

Choosing Overall Page Width and Scaling

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:

  • fixed
  • zoom

There are four sizes to choose from:

  • sm (640px | 64em)
  • md (760px | 76em)
  • lg (900px | 90em)
  • xlg (1000px | 100em)

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.

  1. <!-- fixed 640px -->
  2. <div class="fixed-sm" id="container"></div>
  4. <!-- fixed 760px -->
  5. <div class="fixed-md" id="container"></div>
  7. <!-- fixed 900px -->
  8. <div class="fixed-lg" id="container"></div>
  10. <!-- fixed 1000px -->
  11. <div class="fixed-xlg" id="container"></div>
  13. <!-- initial 640px then relative to the user's font-size adjustments -->
  14. <div class="zoom-sm" id="container"></div>
  16. <!-- initial 760px then relative to the user's font-size adjustments -->
  17. <div class="zoom-md" id="container"></div>
  19. <!-- initial 900px then relative to the user's font-size adjustments -->
  20. <div class="zoom-lg" id="container"></div>
  22. <!-- initial 1000px then relative to the user's font-size adjustments -->
  23. <div class="zoom-xlg" id="container"></div>
  25. <!-- 100% of the browser window -->
  26. <div class="fluid" id="container"></div>

Choosing Page Alignment

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:

  1. <!-- left aligned -->
  2. <body>
  4. <!-- centered -->
  5. <body class="center">

Using Predefined Layouts

No Predefined Margins or Padding

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.

Types of layout

Currently there are two predefined layout types:

  1. <div class="classic">
  3. <div class="standard">

On their own they do nothing and whatever you put in to them will have the ability to fill the div.

Column numbers

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:

  • a-b (2 column)
  • b-c (2 column)
  • a-c (2 column)
  • a-b-c (3 column)
  • a-b-c-d (4 column)

Columns

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

Putting it all together

When using these in conjunction with a layout type you can achieve the following column styles

.layout .a-b
  1. <!-- .standard .a-b -->
  2. <div class="standard">
  3. <div class="layout a-b">
  4. <div class="gr a"><!-- 33% of layout - floated left --></div>
  5. <div class="gr b"><!-- 67% of layout - floated right --></div>
  6. </div>
  7. </div>
  9. <!-- .classic .a-b -->
  10. <div class="classic">
  11. <div class="layout a-b">
  12. <div class="gr a"><!-- 25% of layout - floated left --></div>
  13. <div class="gr b"><!-- 75% of layout - floated right --></div>
  14. </div>
  15. </div>

View examples of the a-b layout

.layout .b-c
  1. <!-- .standard .b-c -->
  2. <div class="standard">
  3. <div class="layout b-c">
  4. <div class="gr b"><!-- 67% of layout - floated left --></div>
  5. <div class="gr c"><!-- 33% of layout - floated right --></div>
  6. </div>
  7. </div>
  9. <!-- .classic .b-c -->
  10. <div class="classic">
  11. <div class="layout b-c">
  12. <div class="gr b"><!-- 75% of layout - floated left --></div>
  13. <div class="gr c"><!-- 25% of layout - floated right --></div>
  14. </div>
  15. </div>

View examples of the b-c layout

.layout .a-c
  1. <!-- .standard .a-c -->
  2. <div class="standard">
  3. <div class="layout a-c">
  4. <div class="gr a"><!-- 50% of layout - floated left --></div>
  5. <div class="gr c"><!-- 50% of layout - floated right --></div>
  6. </div>
  7. </div>

View an example of the a-c layout

.layout .a-b-c
  1. <!-- .standard .a-b-c -->
  2. <div class="standard">
  3. <div class="layout a-b-c">
  4. <div class="gr a"><!-- 33% of layout - floated left --></div>
  5. <div class="gr b"><!-- 33% of layout - floated left --></div>
  6. <div class="gr c"><!-- 33% of layout - floated left --></div>
  7. </div>
  8. </div>
  10. <!-- .classic .a-b-c -->
  11. <div class="classic">
  12. <div class="layout a-b-c">
  13. <div class="gr a"><!-- 25% of layout - floated left --></div>
  14. <div class="gr b"><!-- 50% of layout - floated left --></div>
  15. <div class="gr c"><!-- 25% of layout - floated left --></div>
  16. </div>
  17. </div>

View examples of the a-b-c layout

.layout .a-b-c-d
  1. <!-- .standard .a-b-c-d -->
  2. <div class="standard">
  3. <div class="layout a-b-c-d">
  4. <div class="gr a"><!-- 25% of layout - floated left --></div>
  5. <div class="gr b"><!-- 25% of layout - floated left --></div>
  6. <div class="gr c"><!-- 25% of layout - floated left --></div>
  7. <div class="gr d"><!-- 25% of layout - floated left --></div>
  8. </div>
  9. </div>

View an example of the a-b-c-d layout

Nested Layouts

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.

Simple nested layout

  1. <div class="classic">
  2. <div class="layout a-b-c">
  3. <div class="gr a"></div>
  4. <div class="gr b">
  5. <div class="standard">
  6. <div class="layout a-c">
  7. <div class="gr a"></div>
  8. <div class="gr c"></div>
  9. </div>
  10. </div>
  11. </div>
  12. <div class="gr c"></div>
  13. </div>
  14. </div>

View an example of this layout

More complex nested layout

  1. <div class="classic tidy">
  2. <div class="layout b-c">
  3. <div class="gr b">
  4. <div class="classic">
  5. <div class="layout a-b">
  6. <div class="gr b">
  7. <div class="standard">
  8. <div class="layout a-c">
  9. <div class="gr a">
  10. <div class="standard">
  11. <div class="layout a-c">
  12. <div class="gr a"></div>
  13. <div class="gr c"></div>
  14. </div>
  15. </div>
  16. </div>
  17. <div class="gr c"></div>
  18. </div>
  19. <div class="standard">
  20. <div class="layout a-b-c-d">
  21. <div class="gr a"></div>
  22. <div class="gr b"></div>
  23. <div class="gr c"></div>
  24. <div class="gr d"></div>
  25. </div>
  26. </div>
  27. </div>
  28. </div>
  29. <div class="gr a"></div>
  30. </div>
  31. </div>
  32. </div>
  33. <div class="gr c"></div>
  34. </div>
  35. </div>

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.

  1. <div class="classic tidy">
  2. <div class="layout b-c">
  3. <div class="gr b">
  4. <div class="layout a-b">
  5. <div class="gr b">
  6. <div class="standard">
  7. <div class="layout a-c">
  8. <div class="gr a">
  9. <div class="layout a-c">
  10. <div class="gr a"></div>
  11. <div class="gr c"></div>
  12. </div>
  13. </div>
  14. <div class="gr c"></div>
  15. </div>
  16. <div class="layout a-b-c-d">
  17. <div class="gr a"></div>
  18. <div class="gr b"></div>
  19. <div class="gr c"></div>
  20. <div class="gr d"></div>
  21. </div>
  22. </div>
  23. </div>
  24. <div class="gr a"></div>
  25. </div>
  26. </div>
  27. <div class="gr c"></div>
  28. </div>
  29. </div>

View an example of this layout

Source Order

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:

Basic 3 column layout (25/50/25) - no source order

  1. <div class="classic">
  2. <div class="layout a-b-c">
  3. <div class="gr a"><!-- left column - 25% of layout --></div>
  4. <div class="gr b"><!-- middle column - 25% of layout --></div>
  5. <div class="gr c"><!-- right column - 25% of layout --></div>
  6. </div>
  7. </div>

View an example of this layout

Advanced 3 column layout (25/50/25) - specific source order of middle, left, right

  1. <!-- will give the same width as above -->
  2. <div class="classic">
  3. <div class="layout b-c">
  4. <div class="gr b">
  5. <div class="standard">
  6. <div class="layout a-b">
  7. <div class="gr b"><!-- middle column - 67% of layout - floated right --></div>
  8. <div class="gr a"><!-- left column - 33% of layout - floated left --></div>
  9. </div>
  10. </div>
  11. </div>
  12. <div class="gr c"><!-- right column - 25% of layout - floated right --></div>
  13. </div>
  14. </div>

View an example of this layout

Compare the two

  1. <div class="classic">
  2. <div class="layout a-b-c">
  3. <div class="gr a"><!-- left column - 25% of layout --></div>
  4. <div class="gr b"><!-- middle column - 25% of layout --></div>
  5. <div class="gr c"><!-- right column - 25% of layout --></div>
  6. </div>
  7. </div>
  8. <div class="classic">
  9. <div class="layout b-c">
  10. <div class="gr b">
  11. <div class="standard">
  12. <div class="layout a-b">
  13. <div class="gr b"><!-- middle column - 67% of layout - floated right --></div>
  14. <div class="gr a"><!-- left column - 33% of layout - floated left --></div>
  15. </div>
  16. </div>
  17. </div>
  18. <div class="gr c"><!-- right column - 25% of layout - floated right --></div>
  19. </div>
  20. </div>

Compare the two layouts

So depending on what you would like to do and how your content needs to be structured you can always achieve you final goal!

Tidy and Untidy columns

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.

Tidy columns

  1. <div class="classic tidy">
  2. <div class="layout b-c">
  3. <div class="gr b">
  4. <div class="layout a-b">
  5. <div class="gr b">
  6. <div class="standard">
  7. <div class="layout a-c">
  8. <div class="gr a">
  9. <div class="layout a-c">
  10. <div class="gr a">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  11. <div class="gr c">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
  12. </div>
  13. </div>
  14. <div class="gr c">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  15. </div>
  16. <div class="layout a-b-c-d">
  17. <div class="gr a">Lorem ipsum dolor sit amet, </div>
  18. <div class="gr b">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  19. <div class="gr c">Lorem ipsum</div>
  20. <div class="gr d"></div>
  21. </div>
  22. </div>
  23. </div>
  24. <div class="gr a">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  25. </div>
  26. </div>
  27. <div class="gr c">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  28. </div>
  29. </div>

View an example of this layout

Untidy columns

  1. <div class="classic untidy">
  2. <div class="layout b-c">
  3. <div class="gr b">
  4. <div class="layout a-b">
  5. <div class="gr b">
  6. <div class="standard">
  7. <div class="layout a-c">
  8. <div class="gr a">
  9. <div class="layout a-c">
  10. <div class="gr a">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  11. <div class="gr c">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
  12. </div>
  13. </div>
  14. <div class="gr c">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  15. </div>
  16. <div class="layout a-b-c-d">
  17. <div class="gr a">Lorem ipsum dolor sit amet, </div>
  18. <div class="gr b">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  19. <div class="gr c">Lorem ipsum</div>
  20. <div class="gr d"></div>
  21. </div>
  22. </div>
  23. </div>
  24. <div class="gr a">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  25. </div>
  26. </div>
  27. <div class="gr c">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  28. </div>
  29. </div>

View an example of this layout

Over-writing atck

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

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.

Try layout builder

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.

drupal's picture
Join Hiveminds and link to your website or blog.
Thoughtbox - So what did you think?
Leave a commentsubscribe to feedfriendly: printshare: delicious, digg, reddit, icerocket
 
CMS Comparison Matrix
 
Popular Tags
Content Management Systems Adobe Flex Drupal Web Developers Wordpress Silverlight Adobe Flex eRuby
 
Staff
Home » blogs » drupal's blogs
 videos
 articles
 blogs
 comments
 downloads
sitemap

Newsletter

Get updates on Hiveminds services, articles and downloads by signing up for the newsletter.

Editor's choice

Some of the better articles, stories and tutorials found at Hiveminds.

Find more

Find more of Hiveminds articles, stories, tutorials and user comments by searching.

Picked links

Hand picked websites and articles from around the web that provide quality reading.