CSS

A pie chart is a great way of showing the relationship between numbers, especially when showing percentages. Drawing a pie chart from scratch takes a fair amount of maths to get working and so people usually go for third party charting libraries in order to add charts to the page.

I recently came across a technique that allows you to create a pie chart using just CSS, which means you can create simple charts without including massive charting libraries into your page loads. This makes use of just a few lines of CSS, using conic-gradient() CSS function.

The conic-gradient() CSS function is part of the background style attribute and is part of a family of functions like radial-gradient() and linear-gradient(). It is used to create a gradient rotated around a central point and is opposite the radial-gradient() function that draws the gradients radiating away from the centre.

Bar charts are powerful ways to show the relationships between different data items. If the data you want to show is discrete then a simple horizontal segmented bar chart is a good idea. You can easily change a collection of numbers into a related set of attributes.

To display this bar chart you don't need a large JavaScript library or an backend charting system, you just need a few lines of markup and some styles. Here is all of the markup needed to generate the bar chart. This consists of a wrapper element and four inner elements that make up the data of the bar chart. Note that the width of each element is pre-calculated to be 25%. I'll address the maths involved in this later in the post.

The experience of using tables in websites whilst on a mobile can be pretty poor. Things tend to get a bit squashed and displaying the information can be a challenge just to fit the table onto the screen.

I was recently faced with a similar problem where I had a particular design in mind for the mobile version of the table. The solution I found was base based on some responsive table designs from CSS-tricks. I'm certainly no designer, but the what I created worked for the situation I was trying to solve.

The basic idea is that instead of treating the table like a table, change all of the table elements to block elements when displaying on mobile. This meant that when viewing the table in a mobile view it would be rendered in a different way, allowing it to be shown in a mode that was more mobile friendly.

Let's use the following table filled with some data.

A common design method is to use list elements to create the layout of a menu or a section on a page. This is all fine until the users come along and create lots of list items that mess up the layout of the page. In CSS it is possible to show only the first few items in the list so that your users can't mess up the layout.

To show only the first 2 items in a list use the adjacent sibling combinator to hide the third element and everything after that.

li + li + li {display: none;}

You can add as many li items to this list as you need to to ensure that the layout of your page works with the correct number of elements.

You can also do the same thing in CSS3 using a default display:none on all list items and then just showing the first 2 items in the list using the :nth-child pseudo-class.