PNG and CSS colour matching

Whilst working on my new site layout I came across a couple of issues.

Firstly, at least on a mac, if you create a PNG with a certain colour and then use that same colour in a stylesheet the likelyhood is that the colour won't look the same in a browser. If you want to see this for yourself, have a look at the various test pages at libpng.org.

One way to get around this problem is to use a single pixel image as a repeating background instead of setting a colour in the stylesheet.

This brings me to the second and far more bizarre issue. In Chrome (but not firefox) a single pixel background image displays as a different colour to a background image made up of two or more pixels of the same colour. I have tested this by creating a two pixel image viewing it, then cutting it down to one pixel and viewing it again so I'm pretty sure it's not some subtle issue to do with the image itself.

My best guess is that Chrome is optimising single pixel background images somehow. However, it's not just turning it into a CSS background colour as it displays as yet another different colour.

So for now I'll have to make do with 2 pixel background images to be able to match my  backgrounds to my other graphics.

Static Sites with Haml, Sass, and ScriptMatic

I was listening to an episode of the "Herding Code" podcast recently, and they had a guest on who was singing the praises of Haml. Haml is a language for creating HTML documents that is supposedly neater and easier to use than HTML itself. Haml is also packaged with another project called Sass (although either can be used without the other) which is a language for creating CSS documents. Again Sass is supposed to be easier and quicker to write than CSS, but it also supports variables and arithmetic which can be very useful.

Since my website is currently in need of a refresh I thought I'd try using these languages and see how it went.

Haml and Sass are often used with dynamic pages generated by Rails. My site is a simple static affair, and whilst it is possible to run both Haml and Sass from the command line it's quickly going to get tedious. So, I had a look for a tool to help. My requirements were:

• Must support Haml and Sass
• Must have a live preview - automatic regeneration of the site whilst developing
• Must support partial files - so that common sections can be split out and re-used
• Must be able to export the site to HTML and CSS when it's done

I found a few recommendations, but these two seemed to be the closest match to what I wanted:

• StaticMatic
• MiddleMan

For no particular reason I've gone for StaticMatic.

So, assuming that you have ruby and gem set up, you can get things working, by running the following commands from a terminal window:

• sudo gem install haml
• sudo gem install staticmatic
• staticmatic setup mySite
• staticmatic preview mySite

At this point you should be able to go to http://localhost:3000 and see the default staticmatic page.

Now that the site is up and running we can change it a bit. By default the main files are:

• src/layout/application.haml - The default template, page content replaces "=yield"
• src/pages/index.haml - Default index content
• src/stylesheets/application.sass - Default stylesheet

As you change the Haml and Sass files in mySite/src the site should update dynamically.
Once you've got things looking how you like run "staticmatic build mySite" to build the html and css files under mySite/site which you can then upload to your live site.