Learning Sass with CodePen

If you’ve been working with CSS for a while, you’ve probably heard of Sass and even switched to it by now. Using Sass allows you to code much faster and efficiently. Getting started can be a bit daunting though. Tools like CodeKit can help or if you’re familiar with the command line then installing Sass is a breeze, but if you’re not, then you’re stuck. That is, until now.

Dudley Storey, at The New Code has created a free comprehensive course that allows you to learn Sass while using CodePen. Because Sass is built into CodePen, you can get started right away. His excellent tutorial series, takes you through the basics,  nesting, extends and imports and concludes with loops.  If you’re just getting your toes wet, this is a great place to start.


Flexbox fundamentals with Wes Bos

I’ve had the chance to play with Flexbox for a while on a few different projects and it’s been super handy. Flexbox allows you to do things that floats just make you scream and pull your hair out.

Although very simple, flexbox can be a bit tricky, especially when using it in a WordPress theme where you may not have full control of how the HTML is generated ( i.e. menus and search box). One of the best guide for using flexbox is Chris Coyier’s “Complete Guide to Flexbox“. I constantly refer back to this guide every time I’m using flexbox.

A few months ago, Wes Bos released a series of videos at Flexbox.io. I was curious about these and so signed up, got the videos, but hadn’t had the chance to go through them until this week. I spent a couple of days listening and playing around with the code. Although, most of the information was a review for me, the videos clarified quite a few things and highlighted very important points. I even burst out laughing when Wes said, “now this is when people normally say, What? This flexbox stuff doesn’t work“. I had literally just said something very similar.

I must admit, I’m not a big fan of video tutorials. I would rather just see code and read a brief explanation, but these were fabulous. Wes explains things very well, he’s very clear and repeats the most important points frequently. Best of all, the videos are free, so you should really check them out if you haven’t had a chance yet.

In Video 13, Wes introduces gulp and node which he uses for auto prefixing. I had some issues installing all of this and since I never write CSS, but work with Sass instead, I opted to use mixins instead and as always, a quick search lead me to a great collection that fits the bill.

A big thanks to all you fabulous people sharing knowledge online. You’re awesome.

Foundations Icons

Foundation IconsA few weeks ago, I discussed the changes on the Bluelime Media site and talked about genericons.

This week, I discovered another great source of icon fonts distributed by Zurb. The social set is particularly interesting, since they have a few icons which are missing from genericons.

One of the best thing about teaching is learning from my students. I’m glad one of them introduced me to this great resource.

Introducing CSS/HTML for Graphic Designers

As any professional will know, the best way to stay current and in the know is to teach. I’ve been teaching a couple of classes at Langara and I’ve learned a great deal about the industry and myself.

The hardest part about teaching is the course preparation. Planning slides, handouts, exercises and solutions takes a lot of effort and it’s never perfect. Following feedback from both past students and teachers, I’ve put together a website to accompany my introduction to CSS/HTML course for graphic designers. Aimed at teachers wishing to use my curriculum, this website has all of the slides and exercises used during my 6 week class. This website is also a great tool for students wishing to learn on their own.

If you’re a graphic designer, teacher or just curious, feel free to have a look at the site and download the teaching material. If you were one of my past students you may also want to have a look. You’ll find that the course material has changed drastically.


Customizing widget areas to display different page and post sidebars

Don’t you just hate it when you launch a site, hand it off, get paid and a few weeks later the client says, you know… I think I want to change the templates now. This is not working for me.

My first reaction when I hear this is, “crap, I didn’t do my job properly, how can I fix it“. And the reality is, that without user interaction, it’s often difficult to anticipate what they and the client will want and so this type of feedback should be expected and in fact welcomed.

My last project with Tod Maffin allowed me to learn a great deal from such a request for change.

Read more…

Add unique styles to your pages using the body_class() function

When WordPress 2.8 was released, a new function called body_class() was made available to developers allowing us to style our pages differently. This new function places a location-specific class on the opening <body> tag. I must admit, I missed this function when it came out and only discovered it recently. But it’s proved very useful. I can now specify different background images for my pages and posts.

Here’s how to do it.

Open up your header.php file and change <body> to <body <?php body_class(); ?>>

The function will automatically generate extra html code. Have a look at the source code to see what classes are available to you and simply create new styles.

For example if you have an about page which has a page id equal to 2, you will notice the following code:

<body class="page page-id-2">

In your css, you could add a new style such as

body.page {background:yellow;}

This would change the background of all your pages to yellow.


body.page-id-2 {background:yellow;}

And now the yellow background will only be applied to the page with id #2.

Nathan Rice wrote up a great article about the body_class() function and you can, of course, get more information by visiting the Codex.

Better Coda Slider with image rollover

Bluelime Coda Slider ExampleIn my last post I talked about using the “Better Coda Slider” created by Remy to create the testimonial slide show on the Enhance Dental Centre. While working on this, I ran into a problem. Instead of using a single image when moving from image to image, I wanted to use a rollover image. I looked at the thread of comments on Remy’s blog post and noticed that I was not alone in wanting this and that no one had offered a solution.

Possibly because of my stubbornness I tried all sorts of CSS tricks and hacks and couldn’t get the damn rollovers to work. In the end, the solution was pretty obvious, in fact a bit embarrassing.

I asked Ben to look at my code and in my coda-slider.js file, he simply changed

.before('<img class="scrollButtons left" src="/images/left.gif" alt="" />')
.after('<img class="scrollButtons right" src="/images/right.gif" alt="" />');

to this:

.before('<img class="scrollButtons left" onmouseover="this.src=\'images/left_hover.gif\'"
onmouseout="this.src=\'images/left.gif\'" src="images/left.gif" alt="" />')
.after('<img class="scrollButtons right" onmouseover="this.src=\'images/right_hover.gif\'" onmouseout="this.src=\'images/right.gif\'" src="images/right.gif" alt="" />');

Doh! I was trying so hard to do my rollovers with css, that I forgot the “old school” way of doing this.

In case anybody is interested in re-creating this example, here are the files are zipped up for you to play with.

Why should you care if your website is built with tables or CSS?

Yesterday, I was invited to have lunch at Twin Fish Creative‘s monthly staff get together. Since, I’ve been doing a lot of work with them, I thought I would take the opportunity to explain what I do to their Photoshop files and more specifically how CSS is used.

What’s this CSS?
HTML tags were originally designed to define the content of a document. They were supposed to say “This is a header”, “This is a paragraph”, “This is a table”, by using tags like <h1>, <p>, <table>, and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.

Read more…