Doing Grids Right - Lose The Classes

Lee Theobald — Thu, 11 Dec 2014 21:44:26 GMT

This one popped up at work the other day and it surprised me how many of the web developers in our company didn't know the best way of using a CSS based grid.

But First A History Lesson

Back when the everyone was first creating websites, layouts were tricky. You'd see a lot of things like the below:


  Left
  Right

Then people like Jeffrey Zeldman and Dave Shea came along and showed us the power of CSS & how code like this was a bad idea. If you wanted to change the proportions of that 'header', you'd have to find every instance of that code in your website & change it. We learnt to separate our presentation from our markup.

Back To The Present

Back to the current day and CSS frameworks like Bootstrap & Foundation have made it even easier to craft a beautiful website with little effort. Now all you have to do is to add a few CSS classes & you get your lovely layouts:


  Left
  Right

The above code is very similar to the ones they show in the Bootstrap documentation. Because of this, it's become common to see that code repeated all over the web.

But take a look at it again. In our first example, we said that putting the width's inline was bad as we'd have to make a lot of changes when we wanted to change an item's layout. Is this code any better? Sure it doesn't have width's inline but as soon as you decided that you want a 50/50 split on that row, you only have one choice - change the HTML everywhere that code occurs.

CSS Preprocessors To The Rescue

And here's what a CSS preprocessor comes in and really helps out. I won't go over exactly what a preprocessor is as that's been covered in a lot of different posts (here's a tutorial for Less and here's one for Sass).

So let's take another look at that HTML from the Bootstrap code. Remove the non semantic classes, add one of your own & you simply end up with:


  Left content
  Right content

Much simpler. And here's the LESS file for this:

div.featurebox {
  .row();

  p {
    .make-md-col(9);

    &:first-child {
      .make-md-col(3);
    }
  }
}

Now when I want to change the width's of the "featurebox" element I have created, all I do is change the one CSS file that's defined in & not the 10 places it may be used in my site.

Makes Responsive Designs Nicer Too

And to solidify my point, imagine the earlier code if you were attempting a responsive design:


  Left
  Right

That's starting to get really messy & it's only 2 elements. So what would the tidied HTML & preprocessed CSS look like here? Well the HTML is below:


  Left content
  Right content

Yep, it's exactly the same as before & that's the point. If you want to make layout changes, you really shouldn't have to edit your HTML. It can all be done in that CSS file:

div.featurebox {
  .row();

  p {
    .make-xs-col(12);
    .make-sm-col(12);
    .make-md-col(9);
    .make-lg-col(6);

    &:first-child {
      .make-xs-col(12);
      .make-sm-col(12);
      .make-md-col(3);
      .make-lg-col(6);
    }
  }
}

So please, take that little bit of extra time & use your CSS frameworks responsibly!

On Conference Side Events

Lee Theobald — Tue, 04 Nov 2014 22:33:24 GMT

Last week I was in Cardiff for The Web Is. There were a lot of great talks and a good number of them really struck a chord with me. It's certainly stirred enough in my head to get me to finally start writing!

One of the talks was from first time speaker Benjamin Hollway, a 16 year old web developer. Benjamin's talk, The Web Is Young talked about troubles younger people may have when trying to get into our industry. One thing he touched on was the social aspects of conferences & how he often has difficulty joining in. These side events are often in pubs or bars and for someone like Benjamin, who is two years under the UK drinking age, this causes an unrequired barrier for him interacting with his peers.

I'm double Benjamin's age so that is not an issue for me. But I also find these side events trickier to attend than they need to be because of the choice to hold them in pubs and bars.

As an RP sufferer, low light situations are not my friend. In fact, to pick an example from the week, upon walking into one of the talks Craig, one of the event's organisers, tried to hand me a small device. But I simply didn't notice him because of the typically low theatre lighting and almost blanked him (Sorry Craig!). This is the kind of trouble I have in these side events too. Pubs & bars tend to be dully lit & reasonably loud. For me to walk into one of these unfamiliar places, find some people who I have potentially never met before & strike up a conversation is a lot trickier than it needs to be.

Now they did a great job at The Web Is of putting on some side events that didn't involve sitting in the dark drinking! There was a games night, a music night & a number of fitness related events on Saturday morning too. But conferences that do these kind of events are definitely in the minority.

If any conference organisers are out there reading this, why not consider some of the following suggestions for social events at your conference:

Don't Make The Pub Your First Social Event

Why does your primary social event have to be in the pub? I'm all for a pub social but don't make it the #1 event. It doesn't send a great message to those that can't/don't drink or are not a fan of the atmosphere of bars.

Do Something In The Mornings

Your conference doesn't start till 9 or 10 & your attendees will need to get breakfast somewhere. Why not organise a popular restaurant for people to meet at for a pre-event meetup? Runs, bike rides & other early morning fitness events are also great fun.

Look For Alternative Venues

Pubs are often picked for the social event because they are the easy option. But there's a lot of other venues that will be happy to host your event: theatres, cafes, office buildings of local large companies, university & college buildings. There's more choice out there than you think.

Cover image by Marc Roberts