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.

Or

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.