Whenever I’m browsing the web and come across a certain website where something is interesting or I’m curious as to how something has been done, I’ll take a look in the source code and CSS to see how the designer solved a certain problem or created part of the page.
This morning I came across an interesting idea on 456 Berea Street whilst looking at the CSS created by Roger Johansson.
My method of working usually involves creating or using a Photoshop document to create the HTML and CSS and one of the most time consuming tasks is using the eye-dropper tool in Photoshop to find out the hex value.
As the CSS gets larger, I’ll then need to either hunt through the file to find the hex value (which inevitably takes a couple of attempts at finding the right one) or means going back to Photoshop and repeating the eyedropper task again.
An easy solution to this would be to jot the hex values down on a piece of paper but this would probably get lost during a big project and certainly wouldn’t be easy to use across a team of designers.
However, what Roger has done is made a comment at the top of the CSS which displays all the colours that are used within his CSS file with descriptions making them easily identifiable with other aspects of the page.
Dark green headings (Main articles): 8A8E27
Light green headings (Home page sections): 828368
Green headings (Secondary): 578A1C
Green border colour: b6c8b0
Link hover: D03900
Heading link border: cfcfa0
Beige background colour: f1efe7
Light green background colour: f4f6e0 */
This may not seem like a huge deal and is probably something a lot of designers already do but thought it would be worth sharing as it’s something I’ll definitely be using in future and will certainly save me a little bit of time over the course of a project.