"Spend your time innovating, not replicating."

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

Blueprint offers:

• A CSS reset that eliminates the discrepancies across browsers.
• A solid grid that can support the most complex of layouts.
• Typography based on expert principles that predate the web.
• Form styles for great looking user interfaces.
• Print styles for making any webpage ready for paper.
• Plugins for buttons, tabs and sprites.
• Tools, editors, and templates for every step in your workflow.

Of course, Blueprint isn’t the only choice. It’s just the most popular, according to Google Trends:

keyword searches on Google

You may also be interested in 960 Grid System, or Yahoo! User Interface Library (YUI).

Source code documentation snippet explains details:

/**
 * CSS Sprite Generator
 *
 * Combine any number of images in a given directory into a select few composite
 * CSS Sprite images. (e.g. one for horizontally-repeating, one for vertically-
 * repeating, and one for images that do not repeat like buttons.)
 *
 * Also generates an accompanying CSS stylesheet you can copy/paste from and use
 * as a guide in obtaining the x-y coordinates as well as the width/height
 * dimensions of your sliced images as they are located in the corresponding
 * composite image.
 */

CSS Sprite Generator
Usage: css-sprite.php [OPTION]... [PATH]

 --path <path> Path where sliced images reside. Default is current working
 directory where the program is launched.
 --prefix <prefix> Optional prefix used in output filenames for composite
 images. Default is "sprites".
 --matte <rgb> RGB color matte. Default is "255,255,255" which is white.
 For PNG 24-bit transparency, use "transparent".

Naming files:

 The suffix of your sliced image filenames determines how they are composited:

 -x = horizontally repeating (repeat-x)
 -y = vertically repeating (repeat-y)
 -n = not repeating (no-repeat)

 Filename examples:

 border1-bottomleftcorner-n.png
 border1-bottommiddle-x.png
 border1-middleright-y.png

 Note that images which repeat on BOTH the X and Y axis, such as tiled
 backgrounds, must be contained within their own image and cannot be used in
 CSS sprites for obvious reasons.

 You can also modify the files as they are composited:

 -pr<pixels> = add padding to the right of the image
 -pl<pixels> = add padding to the left of the image

 Filename examples:

 border1-middleleft-y-pr300.png
 border1-middleright-y-pl300.png

Check it out:

mikesmullin’s CSS-Sprite-Generator at master – GitHub.

Will add more documentation soon.

Git is a free & open source, distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Every Git clone is a full-fledged repository with complete history and full revision tracking capabilities, not dependent on network access or a central server. Branching and merging are fast and easy to do.

Install on Debian / Ubuntu 9.10 Karmic:

sudo aptitude install git git-core

Then you may find this Git tutorial useful.

I use gitg or gitk for quick-reference visualizing of history:

sudo aptitude install gitg

Gitstats project is interesting. See demo here.

Also Gource is another interesting git visualizer. See demo via YouTube.

I should mention Github as they are pretty awesome and you have no doubt seen their website before. Here’s my page on Github, for those interested. I love their proprietary reports; the charts and graphs are awesome ways to visualize repositories. And their push-button publishing, donations, and social networking aspects are the best.

My ~/.gitconfig file looks like this:

[core]
        editor = vim
[user]
        name = YOUR NAME
        email = YOUR.EMAIL@DOMAIN.TLD
[color]
        branch = auto
        diff = auto
        interactive = auto
        status = auto
        ui = auto
[color "branch"]
        current = yellow reverse
        local = yellow
        remote = green
[color "diff"]
        meta = yellow bold
        frag = magenta bold
        old = red bold
        new = green bold
[color "status"]
        added = yellow
        changed = green
        untracked = cyan
[alias]
        st = status
        ci = commit
        br = branch
        co = checkout
        df = diff
        lg = log -p
        who = shortlog -s --
        up = pull --rebase
[push]
        default = matching

It’s a Ruby on Rails project. You run a CLI utility that watches a directory where your .css and .sass reside. The changes you make to your .sass files get automatically parsed and translated to .css files. The .sass format allows you to have a simplified less repetitive stylesheet markup, in addition to the ability to use variables, functions, mathematic operations, and more.

• In CSS, ever wished you could store the color palette for your site design in a few variables and then just reference those variables through the stylesheet?
• Ever wished you could perform cross-browser compatible mathematical addition on layout column widths?
• Ever wished you could easily gather a library of commonly used CSS, and then selectively include them in your various designs with a single line?

Now you can, with Compass.

Installation on Debian/Ubuntu 9.10 Karmic is like:

sudo aptitude install ruby gem; # dependencies
sudo gem sources --add http://gems.github.com/
sudo gem install chriseppstein-compass; # install
sudo gem install chriseppstein-compass-960-plugin; #optional plugin
compass -f blueprint project; # example usage
compass -r ninesixty -f 960 project; # example plugin usage

Looks promising! See more detailed Compass install instructions.

UPDATE: Since I posted this, I realized that using the Ubuntu/debian package management system (Aptitude) to try to install Ruby and Rubygems is a huge hassle and ultimately will not work. Now I use RVM. Like so for Ubuntu 10.04 64-bit server:

# installing rvm
# see also: http://rohitarondekar.com/articles/installing-rails3-beta3-on-ubuntu-using-rvm
sudo aptitude install curl git-core
bash < <( curl http://rvm.beginrescueend.com/releases/rvm-install-head )
sed -i 's/^\[/# [/' ~/.bashrc
echo '[[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm"' >> ~/.bashrc
source ~/.bashrc

# dependencies for compiling Ruby
sudo apt-get install curl bison build-essential autoconf zlib1g-dev libssl-dev libxml2-dev libreadline6-dev
# dependencies for compiling my RubyGems gems
sudo aptitude install libpq-dev libmysql-ruby libmysqlclient-dev sqlite3 libsqlite3-dev libxslt-dev libxml2-dev imagemagick

# openssl package for RVM
rvm package install openssl

# readline package for RVM
rvm package install readline

# installing ruby
rvm install 1.9.2 -C --with-openssl-dir=$rvm_path/usr,--with-readline-dir=$rvm_path/usr
sudo -i
echo "gem: --no-ri --no-rdoc" >> /etc/gemrc
rvm use 1.9.2 --default
sudo ln -s `which ruby` /usr/bin/ruby1.9.2

This will get you on edge Rails and Ruby. Then from there its as simple as:

gem install compass
compass watch

‘

And I no longer use 960gs. I prefer Susy now.

Hope this helps!