Brain Food for Web Developers

SIdeways header

May 21, 2014
by Graham
Comments Off on Sideways Text Header

Sideways Text Header

I was recently playing around with the idea of having the header for a block turned sideways.
In my example I created a thick left border for the heading. After rotating the text using the CSS transform (I used bourbon in my example to cover vendor prefixes) I had to sort out the positioning with transform-origin set to 0, 0. Then I used a margin left to place it in the border space. Continue reading


December 19, 2013
by Graham

Pseudo Element CSS Sprites

CSS sprites are a great way to cut down on page size and increase website performance. It may not always seem like a lot but every bit helps and the less http requests made the better. Ideally, you want to keep decoration separate from the markup and that’s where CSS pseudo elements come in, specifically :before and :after.
Now we have a way of combining spiriting with pseudo elements. Continue reading

HTML5 Logo

November 14, 2013
by Graham
Comments Off on Custom Data Attributes in HTML5

Custom Data Attributes in HTML5

One of the new abilities of HTML5 is that it allows you to add a custom data attribute to your markup. This is useful for when you want to include some metadata in your markup.
The new data attribute look like this: data-file=”stylesheet1″
The attribute must be prefixed with “data-” and should be all lower case.
Read more for an example of the data attribute in action. Continue reading

RSS Feed

April 16, 2013
by Graham
Comments Off on RSS Not Dead Yet

RSS Not Dead Yet

It’s been over a month now since Google announced that it was shutting down Google Reader. The closing of the much loved RSS client has caused a lot of ripples in the online community. This post talks about a few of the alternatives to Google Reader. Continue reading