szantog's sandbox: Zen less css starterkit

This project is depricated, the author like the zen's built in SASS support now.

------------------------------------------------------------------------------
The drupal.org instuctions tell you above, how to clone this project, but:

Use this the latest version:

git clone --branch 6.x-1.x http://git.drupal.org/sandbox/szantog/1101840.git zen_less_css_starterkit

Now, there is 7.x branch too.
------------------------------------------------------------------------------

This base theme combines the Zen's power with 960gs simplicity and less css flexibility. Using this, you can define the main elements properties within minutes!

How does it works?

The less css may use variables, and you can reuse the previous declared classes as property, like this:

//This is a simple variable
@varible= 12px;

//This is a simple class
.my-class {
  font-size= @variable;
  font-weight: bold;
}

.my-reused-class {
  .my-class; //This class will use all declaration in .my-class
  width: 300px;
}

In this base theme the key file is base.less. It contains a lot's of useful classes, and declare some variables. Just change these, and your theme will have full layout and typo within minutes.

960gs support

How is this 960gs?

Working with 960gs layout is not too simpy in zen because of Zen layout method. This theme keeps the Zen layout, but set some variables, and everything will works as 960gs.

Like this, in base.css:

@grid-count: 16; /* 12, 16, or 24 */
@width: 960px;
@grid-margin: 10px; /* 12 and 16 columns margin */
@left-sidebar: 240px; /* Left sidebar width */
@right-sidebar: 240px; /* Right sidebar width */

Some other predefined 960gs class:

• .prefix(@count: 1) - type .prefix(2) in other element class declaration in your less file, and it has the same behaviour, once you have entered in some .tpl.php: class="prefix-2"
• .suffix(@count: 1)
• .prefix(@count: 1)
• .push(@count: 1)
• .pull(@count: 1)

Useful classes & aliases

In base.less there are declared useful classes, and aliases section. It's simplify to work with css @todo: create cheatsheet.

Some alias: .align-left - text-align: left, .bold - font-weight: bold, .uppercase - text-transform: uppercase

Some useful class:

• .link-block - Using on div, it creates a layer from the child link.
• .no-marding - Force reset margin and padding
• .left(@margin: @margin-left-default;) - Float an element left, and set its margin. If it hasn't parameter, a default settings is used

Sprite support

If you want use sprite technique, it's easier than ever: Just set your background picture in .sprite declaration:

.sprite(@background-position) {
  background: url(../images/your-background.png) no-repeat @background-position;
  display: block;
}

Then enumerate your own classes, like this:

    .search-button {
      .sprite(-530px 0);
      height: 66px;
      width: 70px;
    }

Then you can use the .search-button everywhere in your css, eg the form.less file:

    #search-block-form {
    // other styles to search block form
    button {
      .search-button;
      }
    }

Dependencies

• Zen
• less css

I created this theme to simplify my theme development. I think, it could be useful for other theme developers
This project is not fully (just cc 90%) tested, but it can be used on production site, if you used less css earlier - it won't break anything :)