Archive for the ‘CSS’ category

My notes on Rachel Andrew’s “The New CSS Layout”

9 October 2018, in CSS, Resources, Reviews | Add a comment »

“The New CSS Layout” was released when I was about to embark on the challenge of refactoring an old site to be responsive and have grid support and support for old browsers. Yikes! I wasn’t looking forward to the faff that I assumed this kind of challenge involved, so I was more than pleased to have a book to guide me.

By the time I read the book in preparation for my adventure, I had already watched all of Rachel’s video tutorials, and I still found the book filled in gaps in my knowledge. Maybe it’s because I read books more carefully than watch videos or read blog posts but I recommend it to anyone who’s starting to work with grid (which, by now, should be all of us).

I like that the book starts with a brief trip down memory lane, helping to contextualise and explain how CSS layout was achieved previously to the advent of grid and flexbox.

I found the chapter which delves deeper into the subject of old browser support (“Chapter 7: Embrace the future”) particularly useful for my task at hand. I still can’t believe how painless it was to add basic support with only a few lines of CSS.

Just like other A Book Apart publications, “The New CSS Layout” does an excellent job at taking you from newbie to confident at its subject. The book won’t turn you automatically into a pro at CSS Grid Layout, which, as you may have guessed, only practice, trial and error, many times over will.

I only fairly recently started using grid in production and client work and am completely converted. And this wouldn’t have been possible without Rachel Andrew’s relentless publishing of resources on the subject.

These days, when creating CSS layouts, I keep 3 tabs open at all times:

And “The New CSS Layout” gave me the foundational knowledge that I needed to get started with grid more confidently. Thank you, Rachel. ????????

The wonderful calc() function

13 June 2011, in CSS | 37 comments »

Sitting right at the top of my CSS wishlist was always the implementation of the calc() function. With it now being supported by not only Firefox 4 but Internet Explorer 9, I think it’s time for a quick overview on how useful calc() can be and why it would be great to see more usage of it.


Are CSS frameworks evil?

21 September 2010, in CSS, HTML, Tools | 91 comments »

CSS frameworks have a tendency to be dismissed by many CSS authors; code bloat and non-semantic class names are usually at the top of the list of reasons why. Even without ever using one, I shared the same opinion, but that might have changed after trying a few of them out while doing some research recently…


My thoughts on LESS

19 July 2010, in CSS, Tools | 26 comments »

I’ve started using LESS a few months ago on a few projects. LESS allows you to extend the way you write CSS, letting you use variables, nested selectors, operations and mixins. It sounds great — and it is great — but there are a few things that can make it work against you. These are some of my thoughts on LESS.


Books: “HTML and CSS Web Standards Solutions”

14 April 2010, in CSS, HTML, Project 52, Reviews | 8 comments »

The second book I’m reviewing is “HTML and CSS Web Standards Solutions”, by web standardistas Christopher Murphy and Nicklas Persson.


The little known font-size-adjust CSS3 property

25 March 2010, in CSS, Project 52 | 90 comments »

Ever wanted to use fallback fonts on your CSS with different aspect ratios without them looking huge (or tiny)? The sparkling new CSS3 font-size-adjust property could do just that, maybe.


A quick note about the :empty pseudo-class

14 March 2010, in CSS, HTML, Project 52 | 25 comments »

I’m in love with the simplicity that CSS3 selectors can bring to our stylesheets. Here’s a brief explanation of one of my favourites: the :empty pseudo-class.


Book Review: “CSS Mastery — 2nd Edition”

24 January 2010, in CSS, Project 52, Resources, Reviews | 3 comments »

I’m frequently confronted with the question of “which CSS books would you recommend?” and CSS Mastery is always at the top of the list. Here’s the audio review I did for the Boagworld podcast.


The CSS3 :target pseudo-class and CSS animations

11 January 2010, in CSS, Project 52 | 111 comments »

It’s no secret that I’m always looking for an easy way out using CSS instead of trying to replicate things with convoluted code — there are so many underused techniques that we could be applying to our designs as an enhancement layer! In this experience, I take a brief look into the :target pseudo-class and a very simple CSS animation.


Remembering: the CSS3 multi-column layout module

29 November 2009, in CSS | 58 comments »

Because I will not shut up about CSS3, this time I’ve decided to show you a little bit of the multi-column layout module. This module allows you to layout the content of an element in multiple columns, like flowing text on a newspaper-type layout.