#CSScaffold
Not ready for proper use just yet :)
A dynamic CSS framework built on top of Shaun Inman's CSS Cacheer. Favouring convention over configuration, it aims to speed up development time by reducing the number of times you need to repeat yourself. It extends into the markup to make sure everything is consistent. By standardizing the markup, it makes it extremely easy to create templates and frameworks for common items.
- Constants
- Base a selector on another selector
- Assign classes to selectors within your CSS (In development)
- Easy grid layout system (no more floats or positioning - we use columns instead)
- Generated and included utility classes
- Easy image replacement (using image-replace:url('url');)
- Embed images in your CSS using Base64 to save http requests
- Tidy and Compress your CSS on the fly
- Cached and Gzipped for speedy download
- Nested Selectors
- Form Framework for building forms quickly
- Global reset
- Development styles for debugging and testing
- Module-based css, broken up into common areas.
##Installation
To install Scaffold, all you need to do is placed everything from the www directory into your servers www directory or root directory. You also need to make sure these files are set to CHMOD 777 (Read and Write):
- css/images/*
- css/fonts/
- css/browser-specific/
- css/sections/
- css/snippets/
- css/system/cache
- css/system/tests/xml
- css/
If you want a speedy setup, just make css/ and everything in it read/write so you can have a play with it quicker :) I wouldn't do this on a live site though...
##Test Styles
You can access the tests by directing your browser to:
http://localhost/css/system/tests/
##Directory Structure
The directories promote convention across sites. Here is an explanation of each of the directories and their contents.
###Browser-Specific
The browser specific folder is used for the stylesheets for particular browsers, usually ie6 and ie7. These are referenced in the markup in the head in conditional comments.
Where you can put the docs for your CSS - usage etc.
###Fonts
Holds custom .ttf and .eot font files for use with the css. Supported browsers will grab these fonts directly, however, non-supported browsers will be given an image from these fonts generated by PHP.
###Images
Images used specifically by the css.
###Plugins
Any CSS file you put in here will be appended to your file css. This is for things like JQuery plugins that have css files you need, just drop them in here and they're available.
###Sections
Major generic areas of the CSS are placed here. This includes forms and typography by default and may contain layout at a later date.
###Snippets
Small bits of css used during development or that are used across many projects and are unchanged. This includes reset.css.
###System
The CSS-Cacheer folder which processes the css. This shouldn't need to be touched by the user.
Once you've 'installed' Scaffold, any css file inside the root level of css/ will be processed by CSS Cacheer. So link to the screen and print stylesheets like so in your HTML:
<link href="css/screen.css?recache" media="screen" rel="stylesheet" type="text/css" />
<link href="css/print.css?recache" media="print" rel="stylesheet" type="text/css" />
?recache is used at the end of the file name to tell the script to recache it everytime. When you are putting your site live, remove this otherwise you won't actually be benefitting from the cached files.
The best part about Scaffold is its layout technique. I should mention that the layout module in particular is best used by people who actually know what it is doing in terms of CSS layouts. You'll still run into problems if you just try to use this and have no idea of how to build a grid layout with CSS. If you've used Blueprint, or any other CSS framework, you should be good.
The first thing you need to do, is define your grid at the top of your css:
@grid
{
column-width:23;
grid-width:966; /* Not needed if you specified column-width */
gutter-width:18;
column-count:24;
format:newline;
}
You may want to comment these out if you run into some problems, but most browsers should just ignore it. What CSSExtra does is process your CSS and looks for special properties which it can process. These are written just like any other CSS property. For example, here is the basic layout module columns property:
#myid
{
columns:4;
}
The class will process this, and transform it into valid, working css:
#myid
{
width:400px;
float:left;
display:inline;
overflow:hidden;
margin-right:18px;
}
Although this looks like a simple find and replace, the script actually accounts for extra width within the property as well to provide dynamic values. So you can add padding or border values and it will be factored in. I'll go into this a bit later. This lets you create layouts easily, and not have to worry about how you are going to even create it.
You are given a number of special tags/syntax/properties (whatever you feel like calling them), which render different aspects of a layout.
####@grid Settings
These settings must be placed somewhere in your css for the script to find. It takes this form:
@grid
{
column-width:23;
gutter-width:18;
column-count:24;
baseline:18;
}
Here's a rundown of each option.
#####column-width
The width of each individual column, without the gutter. In Blueprint, this is 30px.
#####gutter-width
The width of the margin separating the columns. This takes form as margin-right on your columns
#####column-count
The number of columns in your grid - 12, 16, 18, 24 are usually good numbers.
#####baseline
Set the baseline for your grid, ie, the line-height of text.
#####columns:x;
The columns:x; property outputs everything you need to make a functioning layout, as you've seen previously. It's fairly simple:
#myid
{
columns:4;
}
Is transformed into this:
#myid
{
width:400px;
float:left;
display:inline;
overflow:hidden;
margin-right:18px;
}
In the latest version, I've included the ability to not output any of the properties except the width, by adding a ! like so:
#myid
{
columns:4!;
}
This will just output a width property, but still calculate the additional width from padding and border. In practice, I've found this to be extremely useful, as you can do this:
.column { float:left; margin: 0 18px 18px 0; }
.ie6 .column { overflow:hidden; display:inline; }
#primary-content { columns:20!; padding:20px; }
#secondary-content { columns:4!; margin-right: 0; }
#tertiary-content { columns:24!; }
This means you can define your own column properties like I've done here. It results in much cleaner code and is great for anyone who really likes efficient css.
#####grid(xcol)
grid(xcol) functions like a variable. It will simply output the width of x number of columns, not factoring in border and padding. So you could use it like so:
.class { padding: grid(2col) grid(1col); }
So your class would have a top and bottom padding of 2 columns, and a left and right of 1 column. This makes your layout extremely consistent.
#####grid(gutter)
Another variable that outputs the gutter-width which you specified in your @grid settings. This is useful for creating a vertical rhythm or simply making sure all your spacing is the same.
####Constants
Constants are much easier.
@constants {
baseColor: #314159;
}
selector {
color: const(baseColor);
}
###Bases
Bases are like classes you can give to your selectors. The aim is to make it easier for developments. You'll end up with some bloated code, but thats what the built in optimizer and compressor are for. For example, lets say you have properties you want to use over multiple selectors.
@base(basename) {
color:#fff;
background:#000;
margin:10px;
}
...
#id {
based-on:base(basename);
}
Then you can add the based-on property to your selectors. Of course, you could always just use the comma separated selectors for it, but this has some benefits.
##Notes:
- Paths are always relative to screen.css, even in deeper folders, if they are imported.