Category: Code


What I did with my summer

University tomorrow. Yikes. Here’s what I’ve done with my summer.

Responsive design

I’ve finally got the hang of this, and it’s completely changed the way I think about web design. It’s pretty straight forward. Start with one of the extremes. If your project’s mobile focused start with hand-held devices; if it’s desktop focused start with a standard or widescreen monitor. Build your website, and then scale it up or down as you come across your breakpoints. Add some media queries, and do it again. You might need lots of media queries, or you might only need one or two. View full article »

I was reading an article on Mark Boulton’s website, the first time I’ve visited it since the redesign. The article, A Richer Canvas, was interesting but that’s not what this blog post is about.

The website is very minimal, with typography the focus. The navigation is in a sidebar on the right and just simple, grey text. Until you mouse over the sidebar. When you do, all the links turn from grey to green. It’s a really effective technique and quite eye-catching. It’s simple, but elegant, and not something I’ve seen before.

Now all I need to do is work out how he did it and then steal the idea.

*** Update ***

I gave it a go, and it’s very easy. Took me 15 minutes to find out how he did it and then code my own (very rough) example: Trick navigation example.

All you need to do is apply a hover pseudo-class to a div, and target each anchor within that div (see code in comment below). That way the anchor changes when you hover over the div, not the anchor. Use some CSS3 transitions to add a little easing and that’s it.

CSS: Inspiration and Desperation

Inspiration and Desperation

So, CSS resources. I’ve decided to split this blog post into two parts, Inspiration and Desperation. View full article »