dKit - Drupal Theme Framework

dKit is a flexible Drupal theme framework that should make it easy to build nearly any kind of design.
And in order to test this approach, I decided to code two subthemes before I released the framework itself.

HTML features:

The framework comes with a three column and source ordered layout with fixed width. The theme is structured the "traditional" way: Header - Main area (with three collapsible columns) - Footer.
Nevertheless any kind of layout can be applied to subthemes by modifying page.tpl.php.

CSS features:

The CSS definitions consist of three main parts:

1. Global reset-font settings that are based on the YUI library.
2. Numerous enhancements to Drupal's default styles that pursue a consistent look not only throughout the Admin pages but also in all of Drupal's core modules.
3. Very minimalistic visual styles that are specific to dKit's unique look.

All settings can easily be overwritten by your own styles.

The layout.css file is extensively well commented and is meant for documentation purposes. layout-min.css contains the minified styles for production use.
When you open the info file, you will see that both CSS files have been set. This makes it possible to use either one of them in subthemes by disabling the other one.

How can you use the theme?

• As a standalone theme for your website. Though it comes with minimalistic styling, it can be used the way it is.
• As an admin theme.
• To build a new theme by modifying the files directly.
• To create subthemes - the recommended approach.

How to build a subtheme

Download the blank subtheme from this page, rename the dkit-subtheme folder and the dkit-subtheme.info file to your desired theme name.

The blank subtheme contains an empty style.css file and a page.tpl.php that is identical to the one in the dkit theme package.

When you build your own subtheme you will probably want to start working with the non-minified file that is loaded into the subtheme's info file by default. After finishing the theme, you can load layout-min.css.

Follow those steps to load layout-min.css:

Remove the semicolon before stylesheets[all][] = css/layout-min.css
and add a semicolon before stylesheets[all][] = css/layout.css
Don't forget to clear Drupal's cache after modifying the info file.

A few customization tips:

• To change the width and/or background colours of the sidebars: take a look at layout.css where the corresponding code lines are commented.
• To make the theme fluid: change the width of the wrapping #page div to 98% for example. But remember to add a min-width and a min-width hack for IE 6.
• To overwrite the overall font-family: set the font for

  body, input, select, textarea, button {
     font-family: ...;
  }
  

• To customize the font sizes for different parts of the theme: Follow YUI's font table.

The theme is dual licensed under the GPL and MIT licenses.