Showing all articles matching css

Making segmented circles and pie charts in CSS

Circles, made with CSS

It's been possible to make circles, semi circles and quarter circles using only CSS ever since the border radius property came along. But what if you wanted to make a circle with more than four segments?

I've seen it done but only occasionally and in a very fixed way. If there was a way of generating a single segment of a circle based on a mathematical formula, would it be possible to write a CSS mixin to generate a circle containing any number of required segments? Short answer: yes.

Saturday 14th of May 2016

Read more

Dealing with bad front end code

I've worked on a lot of websites and seen a lot of front end code. Some good, some bad. Some... really bad.

More often than I'd like, I encounter the same patterns of badness. Here's a few examples of the kind of things that some front end developers do that drive me to despair. Warning: this is going to get technical.

Thursday 12th of February 2015

Read more

A simpler interactive HTML map

The world, beautifully rendered by my hasty hand

Making a map interactive on a webpage has always been a bit of a pain. The basic problem is that elements on a webpage are rectangular, whereas countries and regions of the world are, well, lots of different random intersecting shapes. Clicking on a part of the map and turning that into a meaningful location isn't so hard, but highlighting regions when you hover over them is more difficult.

There's various ways around this problem, from the simple (using an imagemap) to the complex (licensing some complex SVG plugin). But how about good ol' fashioned straightforward HTML, CSS and JavaScript?

Thursday 9th of October 2014

Read more

A front end convention for class use and JavaScript

Whenever I get asked to work on an existing website I haven't worked on before I tend to find a lot of CSS classes on elements that on first glance don't appear to do anything. As a naturally tidy person, this irks me. Why are they there? Is there some element much further down in the DOM that relies upon that class, or is there some bit of JavaScript somewhere that acts on it? Or is it simply an unused class that can be safely removed?

A quick search through the CSS and JS should answer this question pretty quickly, unless the class in question is a generic word, like 'select' or 'option'. Believe it or not, this happens more often than you'd think.

This isn't a huge problem, it's a small pain that adds a few extra minutes here and there. I'm just tired of it. I'd like to propose the following convention to remove this problem entirely.

Friday 5th of September 2014

Read more