The first thing I had to do was convert the main 960 grid CSS classes/ids into m4 macros. This was a simple copy and paste, and I used some macro magic in Emacs to clean it up. Here’s how the macros look like:
dnl m4 macros for 960 grid system written by Rudolf Olah
dnl learn more about 960 grid system here: http://960.gs/
dnl
define(`_container', `margin: 0 auto; width: 960px;') dnl
define(`_grid', `display: inline; float: left; position: relative; margin-left: 10px; margin-right: 10px') dnl
define(`_alpha', `margin-left: 0;') dnl
define(`_omega', `margin-right: 0;') dnl
define(`_grid_1', `_grid; width: 60px;') dnl
define(`_grid_2', `_grid; width: 140px;') dnl
define(`_grid_3', `_grid; width: 220px;') dnl
define(`_grid_4', `_grid; width: 300px;') dnl
define(`_grid_5', `_grid; width: 380px;') dnl
define(`_grid_6', `_grid; width: 460px;') dnl
define(`_grid_7', `_grid; width: 540px;') dnl
define(`_grid_8', `_grid; width: 620px;') dnl
define(`_grid_9', `_grid; width: 700px;') dnl
define(`_grid_10', `_grid; width: 780px;') dnl
define(`_grid_11', `_grid; width: 860px;') dnl
define(`_grid_12', `_grid; width: 940px;') dnl
define(`_prefix_1', `padding-left: 80x;') dnl
define(`_clear', `clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0') dnl used to fix height
The function define is how you define a macro in the m4 language, and the keyword dnl means ignore everything up until the next new line (basically, everything after dnl is a comment).
The second thing I did was create a utility file with general macros that would be used all over the website. A few of these macros define the background colour and the text colour used. m4 macros make it easy to make up for the lack of variables in CSS.
Here’s how the utility file looks like:
include(`960_macros.m4') dnl
changecom(`/*', `*/') dnl
changequote(`^', `^') dnl
dnl Copyright (C) 2010 Rudolf Olah
dnl Colour palette
dnl dark teal 0c6847
dnl teal 85d4b7
dnl light yellow f1cb76
dnl grey 333333
define(^background_color^, ^#ffffff^) dnl
define(^text_color^, ^#333333^) dnl
define(^link_color^, ^#0c6847^) dnl
define(^light_background_color^, ^#f1cb76^) dnl
define(^light_link_color^, ^#85d4b7^) dnl
dnl
define(^_round_corners^, ^border-radius: $1; -moz-border-radius: $1; -webkit-border-radius: $1;^) dnl Rounded corners
define(^_invert^, ^border-bottom: 1px solid #dddddd;
padding-left: 6px;
padding-right: 6px;
padding-bottom: 0.75em;
color: text_color;^ ) dnl Inverted color scheme
define(^_opacity^,^opacity: 0.$1; filter: alpha(opacity=$1); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=$1)";^) dnl Adjusts opacity using opacity and MSIE filters, specified as an integer
The function changecom changes the way m4 recognizes comments. In this case, comments begin with /* and end with */. The changequote function changes how m4 recognizes quotes used as part of defining a macro. Typically you use a backtick/backquote as in the 960 grid macros file above, but in my utility file I changed it so it uses the ^ character instead. This way it doesn’t interfere with urls in CSS.
So now that I have variables defined, it’s easy to change the colour that’s being used in different CSS classes.
