A friday afternoon with HTML5, Sass and jQuery

A peek at my Friday afternoon mini-project

Sometimes I like when I get a really small project to do, so that I can focus on using it to try out a few new things, or doing things I do now a little bit better.

We're currently working on a site refresh at my company, rolling out some new styles on the website. One thing I think is always super useful to have is a style guide, for your brand generally of course, but also for the "web assets" side of it. This might include things like the main colours (hex codes) and when they are used on the site, text styles, heading styles, button styles etc. It serves not just as a good reminder and document of the new colours/styles but also something so that if anyone new is working on the site, they have something to refer to.

As someone who tends to straddle the design/development fence, I think this is useful for people working on both aspects of the site. Our new brand style/colours are currently in the form of some PSDs from a designer, but that's not particularly clear on it's own of how to carry that style across other pages of the site. Our site has been pretty inconsistent in the past because of a result of people (including myself when I worked on the design side), designing "new pages" for the site and not basing this on using existing elements. Years worth of massive CSS files worked on by many multiple developers also mean that our CSS isn't in the best state and using this for base styles is pretty impossible right now - there's never really been strict consistency.

And that consistency is something I want to get better at retaining from a CSS and page design point of view, particularly as we clean up a lot of the pages on our site and bring them into the new style.

Everything's better with html

During my Graphic Designer days, I generally created style guide PDFs for sites or mini-sites I designed on using Photoshop or InDesign, but this time I thought, surely the best medium for a web style guide, is a html document? ;)

I decided it would also be another great chance to practice some Sass and get back to playing with some jQuery. I've not had to do any jQuery at work in the past couple of months and I really need to keep doing it regularly so I don't get rusty! It seemed like a useful little Friday afternoon project.

I started with a nice, semantic html document, using some of the new HTML5 tags. I'm still getting used to the best times to use each HTML5 tag. I currently have this format:

I would call it Yaytch-tml personally..

Looking at it now, I'm not sure <article> is the right tag. I was going to have "Colours" as an article, "Font Styles", "Button Styles" as an article, etc. So, the definition of the article tag is, a piece of content that would make sense if you took it out of this document and placed it somewhere else. If that is the case, I think the entire document is more of the article, because if you don't know what the "colours" refer to, does it still make sense?

First of all I thought maybe a <section> tag would make more sense for each type of element group on the site. But then I wanted to split them into sections, for each colour as you can see.

Anyway, I'm not sure! I think when I've done more of the guide, it might make sense to me which tags to use. Or I should probably go back and read the specs more ;) I find that often articles or books explaining how to use HTML5 tags use a blog as an example, and that's fairly easy to understand how a blog post would be an article, and so on, but I think when working with other types of webpage it can still be a bit fuzzy.

I also just started using the "role" attribute, after reading about it in Dan Cederholm's "Bulletproof Web Design" book, and also reading an article by Jeremy Keith about it. As Jeremy said, when using multiple headers/sections in a document, we still need unique styling hooks for those, and ID doesn't really feel quite right. Role on the other hand, has semantic meaning, is good for accessibility, and generally feels much better! It's saying that the role of this particular section is to describe the colours - and well, that makes sense to me :)

Sexy awesome stylesheets

So, back to Sass. If you haven't heard of it, Sass stands for "syntactically awesome stylesheets" (not sexy awesome stylesheets, though I quite like my version..) and is in their own words:

"...a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets."

I'd been hearing of it through a few colleagues and acquaintances lately and finally got round to trying it out. At first I was unsure because I was worried of sort of "giving up control" of how my CSS is written and letting something generate code because y'know, frontpage express and dreamweaver.. ;)

But I've found that it's really not giving up control at all. I read somewhere (maybe today actually), that you should be writing Sass in the way you want your CSS to be generated. I think that's very true, and it's not too hard to understand what Sass is doing. I found today that just having my Sass file and the generated css file side by side in my text editor, I could easily keep flicking between them and looking at how Sass outputs things.

And when you start writing it, it's really nice, and very familiar if you've ever used things like variables in programming languages such as Javascript. Being able to use variables in CSS is pretty awesome. And it seemed particularly suitable for something like this style guide because the colours and fonts are the sort of consistent variables we want to have control over. You can read more and start using Sass at http://sass-lang.com.

Here's an example of some of the variables I created with Sass, in order to define these styles.

How very sassy

I can then refer to these anywhere in the CSS, but know that they're always in that useful place at the top of my file if we decide to change that site-wide colour, or decide not to have headings in uppercase anymore.

As well as variables, Sass has things called mixins, allowing you to define a style for something like rounded corners once, and then just import that style into a bunch of places.

Mixin it up baby

You'll see we can also use variables in this, making the CSS yet more manageable. Now if I want to use rounded corners on an element, I just have to "import" the rounded statement, like so:

No more typing "border-radius" with various browser extensions over and over! Yay!!

The other thing I'm finding super lovely so far is NESTING. No, not sitting on eggs, but writing CSS like this (yes there is a reason I'm a web developer not a comedian..):

It makes the CSS much more readable, and lets you write less! W00t. You'll notice I've used another variation of the rounded corners mixin, this one lets you define which corners you want, if you're only using it for some. My paragraph only needed a rounded corner on the bottom left to fit in nicely with my swatch. Yet again - no repeated writing of "border-radius" properties :D (btw, I realise I'm still mixing pixels and ems here with the font properties. I'm slowly trying to stop clinging to pixel values, but I have to get used to it, hehe).

I still have more to experiment with the advanced features of Sass but far from taking any control out of your hands it simply helps you to not repeat stuff (very DRY :), making your stylesheets way more manageable and letting you get on with writing nice CSS.

The jQuery icing on the web cake

Anyway, so far I'd just added some of the main colours to the guide, in nice little divs with CSS rounded corners, the hex code displayed on top of them. But if you're like me, you don't memorise many hex codes (I pretty much only remember shades of grey xD), so how could I ensure that the right hex code was being displayed on the style guide? There's nothing worse than having to wait for Photoshop to load in order to pick that colour and make sure I'm actually writing down the right one again. I like to use Photoshop as little as possible these days (yay for designing in the browser). Bit of a sidenote, but these days I love this eye-dropper extension for Chrome, as it allows me to use Photoshop even less! Although I believe it doesn't work on local files, like most extensions.

So, what would be cool in the style guide is if I could update that value shown every time the CSS was changed, to ensure that it definately showed the right hex code of the colour shown. Okay so, the colours might not change much right now but - I thought it would be a fun little thing to do anyway ;)

I started off by checking if you could grab a CSS property via jQuery, something I've not done before. You could - yay! Is there anything jQuery can't do? ;) I grabbed the background-color property from one of my swatches and alerted it to check what it was picking up. The first thing I noticed was that it indeed gave me the background colour, but it gave me the RGB value. That's pretty nice, but I really want the hex code so the designer or developer can paste it into their Photoshop doc/CSS.

So I googled it.

Sidenote - Google has to be the most powerful tool we have as web developers, and I think a lot of other professions could learn from how we utilise it. If you get stuck or you have a problem - surely someone else has had that problem before? Google = access to the world's problems and very likely solutions! Really, it seems obvious to developers but I think it's useful whatever you are stuck on. Imo, there's not really a need to sit down and learn every single aspect and property of jQuery in one go, just check what you need when you need it. Easy.

Anyway, I found that indeed - others before me have asked this question! And http://wowmotty.blogspot.com had written a nice little function to convert the RGB value to hex. Yay!

Now I had this, I knew that I just had to grab the background-color for each swatch (using the each function which I had used previously - that looks at each div on the page with the swatch class and runs the function on it). Putting the grabbed css into a variable wasn't *essential* but it's always easier to manage code, by using one and then referring to it in the next part. It makes it easy to see where we've stored that hex code.

What lovely coloured icing. Yay for Cobalt

So for each swatch div, we can just grab the paragraph that's within it and append the paragraph to have the value of our bgcolor variable. Nice! With jQuery I still tend to get a little confused over when to use .text , .html .append to insert dynamic text but I think in some cases more than one of them will work.

If someone chooses this lovely yellow, at least we'll all know.

html + css + jquery + pretty = nice web things

So the first bit of my style guide is done, and I think it's a nice little example at how you can combine some nice simple design, with clean semantic html, easily managable CSS, and jQuery for some useful and nice dynamic functions. If somebody decides to change the main colour, then can just change the "main-color" variable we created in Sass, which will then change that value wherever we might use it in the stylesheet, and at the same time update the swatch - and the hex code shown to the viewer. Simple, but nice.

Well, that's about it for now, but I hope that some of this was useful and/or interesting! Apologies for all my code samples being screenshots, I'm 100% sure there's a better way of showing my code but I haven't googled that yet ;)

Thanks for reading!