Inline styling via classes is just as bad

Something that has really started to bug me about frontend development recently is how it seems so common to stick a class on something that only applies one style. For example

Using tables for layout purposes

Okay let's start off by saying using tables for layout purposes is a terrible idea - the web has largely moved on from that sort of thinking. The focuses on semantics and responsive design have become much more important than "that works" could ever be. The reduction in tables nested in tables nested in tables nested in wrapper tables is a huge step in a very positive direction in my opinion. However, this dodogy HTML did make some layout desires very very easy and some of those are quite awkward with sensible HTML and CSS. Apparently we need some sort of middle-ground compromise. Time for an example.

Explosion effect in only CSS

Had a go at some more CSS only animations recently. Turned out kinda cool.

Abusing pseudo elements to create a page with no HTML

I recently had the idea to try and create a simple page layout without any HTML at all except for the <html> and <body> tags. After a few minutes of playing around I had something working, it was actually weirdly easy!

Fancy radio and checkbox inputs

Before I explain this neat little trick I'd like to make it clear that this was not my original idea, I first saw it on the Halifax website but I'd image it's been done in a load of other places too.

Grid layouts are not complicated

There are lot of frameworks available to help with building grid layout based websites. They all vary in features, complexity and weight but focus on the same thing in the end. Creating a grid layout from scratch is not that complicated if you don't need any crazy features, you also save a lot of bloat which will help with page load times.

Ruthless semantic markup

I've recently overhauled the markup of this site to make it more accessible and generally better. The purpose of a HTML document is to describe the content of the page, in an ideal world it would be completely decoupled from the styling and layout of the page. It's very easy to fall in to the trap of adding meaningless elements to a page to make a styling problem easier, these tiny concessions add up and you eventually end up with a meaningless div soup!

CSS animations are awesome!

Yet another not-so-new-tech to talk about; CSS keyframe animations. Browser support is just about good enough to use these for things on actual websites now, they've been around for a long time but as usual IE is the sticking point with only version 10 and above offering support.