CSS
Gridded Layouts and Simplified Markup
Mar 4th
Really sold on gridded layouts lately. Loving the SASS version of 960.gs provided as a plugin for Compass. Albeit, have made some of my own improvements to it so my custom one is a little better. Will share that later.
For now, recommended you check out the following projects:
- Compass; specifically video demo
- SASS markup language; better than CSS
- HAML markup language; better than (X)HTML
- 960.gs, its sketch pdf, and its SASS Compass Plugin equivalent
- 960 Gridder javascript overlay bookmark
- A List Apart: Setting Type on the Web to a Baseline Grid article
- Text Gridder javascript overlay bookmark (my own)
- Sparkup markup language; specifically video demo
- Sparky my Compass-like compiler for Sparkup
Very cool combination for Rapid Application Development (RAD). Especially applied to web design.
IE Tester: Encapsulates Internet Explorer 5.5 to 8
Feb 27th
IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process. Runs on Windows. If you’re on Linux you can just run it in VirtualBox. Very nice tool to have.
Blueprint: A CSS Framework
Feb 4th
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:
You may also be interested in 960 Grid System, or Yahoo! User Interface Library (YUI).
CSS Sprite Generator
Feb 4th
My PHP-CLI CSS Sprite Generator allows you to combine any number of images in a given directory into a select few composite CSS Sprite images. Also generates a stylesheet.
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.
Compass: CSS Stylesheet Framework
Feb 4th
Compass is a stylesheet authoring framework that makes your stylesheets and markup easier to build and maintain. With compass, you write your stylesheets in Sass instead of CSS. Using the power of Sass Mixins and the Compass community, you can apply battle-tested styles from frameworks like Blueprint to your stylesheets instead of your markup.
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.





