Instructions:

1. After downloading the atck project from Drupal.org you will need to access OR download the grid builder and the style.css file separately. They cannot be hosted on Drupal.org because they are not gpl licensed. (BSD and MIT)

Access the gridbuilder online: http://atck.highervisibilitywebsites.com/builder/

...or download the grid builder so you can run it locally (you'll need to set up a virtual host): http://atck.highervisibilitywebsites.com/atck-builder.zip

2. Download the style.css file, and place in your atck theme folder:
http://highervisibilitywebsites.com/downloads/style.css.zip

3. All of the files themselves are commented fairly well, please refer to them for guidance on how to implement things. Use the included sample page.tpl.php file to model your own page.tpl.php file, using the output the grid builder provided.

====

ATCK (Advance Theme Construction Kit)

atck was developed in a production environment for purposes of quickly building css and xtml valid Drupal themes from scratch without having to un-theme an existing Drupal theme to do it.

atck components:

1. A browser-based grid builder which produces starter code for a page.tpl.php file. The grid builder itself was originially built by Christos Constandinou (http://layout.constantology.com/) and it uses a modified version of Yahoo Grids which is more flexible and easier to customize. With Christos' permission (thanks, Christos!) it, and it's supporting css, has been customized so that it works for for Drupal themes and so that it is css3 valid. [access online or separate download]

2. style.css [separate download]
style.css contains only the css needed to supports what grid buider, as well as some 'resets'. The only modifications one should need to make here would be if they want to make their layout a fixed width and/or a different width (default widths are in %).

3. page-layout.css and template.php
These files are where the visual styling of the site happens. The source of these files is from a combination of code from the Hunchbaque theme and some changes/additions which I added in order to provide baseline settings I prefer and/or provide more granular settings. The beauty of these files is the simplicty of them - they include as little markup/styling as possible to avoid complexity, while at the same time putting many helpful tools/comments at your finger tips so that you can accomplish what you want.

4. page.tpl.php
A sample page.tpl.file is included as a reference for finishing your own page.tpl.php file using code output from the grid builder. Note particularly the variable names for the blocks, regions, menus, etc. (at this point the builder does not include those items)

5. fix-ie-6.css and fix-ie-7.css
These files are included for purposes of providing IE-only CSS to each of the respective versions. By using conditional comments like this we keep the main css files hack-free and atck css3 valid.

6. A special note on .clear-block and adding display-inline on floats: If you see things in IE6 that are being pushed down the page (e.g., an element which is floated to the right of another element is instead of being pushed all the way down to the bottom of the page), it is likely being caused by HTML by an IE6 bug which affects floats: http://www.positioniseverything.net/explorer/dup-characters.html (or possibly by #7 below). Using .clear-block and adding display:inline; to the div/float preceeding the float that is pushed down is the way to cure this frequently. More on clear-block at: http://drupal.org/node/135098 (this issue is not an ATCK specific bug, but rather a tip on one of the more frequently seen IE6-specific bugs in general)

7. Another IE6 specific bug - whitespace or even plain HTML comments in tpl.php files can cause extra space to appear between divs stacked on top or beside one another. (e.g., a div on top of another div that has extra space betweent the divs that only shows up in IE). The way to test for this is to temporarily delete all whitespace and/or HTML comments from the tpl.php file(s) and reload. Yes, this is annoying, and no, this is not specific to ATCK either. (google 'IE6 whitespace' for more)

===

While building your theme from an image-based mockup, it may be helpful to add a tracing image to your page.tpl.php file in the production stages. Add this to the <head></head> section of your page.tpl.php file like below. Note, you may need to adjust the background-position settings of the statement if your page is not centered.

     <style type="text/css">
        <!--
          body {
        	background-image: url(<?php print base_path() . path_to_theme() ?>/trace.jpg);
          background-repeat:no-repeat;
          background-position: top center;
          }
        -->
    </style>

===

atck maintained by:
Caleb Gilbert - http://highervisibilitywebsites.com