css

CSS Logo

Simple Horizontal Segmented Bar Chart With CSS

13th March 2021 - 9 minutes read time

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.

CSS Logo

Displaying Tables As Block Elements On Mobile

2nd February 2021 - 5 minutes read time

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.

HTML Logo

The iframe srcdoc Attribute

6th December 2020 - 6 minutes read time

I was working on a web page generation program recently and was looking for a way to present different versions of the same page with slight differences in the markup and styles. Although using the iframe element came to mind I wasn't keen on rendering out lots of different versions of the page and then referencing them individually in each iframe. I did think about creating using an API to send back each page on request but I thought that this might just overcomplicate the program.

After a little bit of research I came across the srcdoc attribute of the iframe, which solved the problem quite neatly.

The iframe is normally used with a src attribute, which points to some external page. The following example will render the page at example.com within the page.

CSS Logo

Show The First N Items In A List With CSS

1st December 2020 - 2 minutes read time

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.

Drupal Logo

Drupal 8: Theming With Tailwind CSS

8th March 2020 - 13 minutes read time

Upon a recommendation from someone in my local Drupal user group I decided to give Tailwind CSS a go. The ultimate aim of this was to replace the base theme I am using here with a more stripped down theme. At the time of writing this I am using the Cog theme, and whilst it has it's merits, I find that it's a little too much for this simple site.

I decided, therefore, to create a new theme and use Tailwind CSS to alter the site a little. This meant an exercise in integrating Tailwind CSS into a Drupal theme.

Tailwind CSS?

In case you haven't heard of Tailwind CSS I'll quote the site here.

"Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override."

CSS Logo

What Browser Supports What CSS Styles?

4th March 2013 - 2 minutes read time

Ever sat there and pondered which browsers support what css styles? If so I’d like to quickly introduce http://www.caniuse.com. This is a great tool and sometimes the quickest way to find answers to your questions. But what about W3Schools; I hear you say. W3Schools does have a comprehensive list of styles, complete with examples of how to use them and a list of properties that you can use. However, what I find W3Schools fails on is a comprehensive outline of browser support.

caniuse.com

caniuse.com provides you with a fool-proof table of browser support. It also outlines support for mobile browsers. Possibly one of the quieter features of caniuse.com is the ‘Known Issues’ tab underneath the table. So, ever tried to get rounded corners to work on a table with a background colour on the table header cells? These known issues can help you quickly debug your css.

#! code Logo

7 Tips To Improve Website Usability

26th January 2009 - 8 minutes read time

Website usability should be an essential part of your online strategy, but it is so easily overlooked or overshadowed by pretty design. Here is a quick list of 7 things that can cause your users to get frustrated and go elsewhere.

1. Search
Search is a very important part of any site, and if it doesn't work then your users will just get frustrated and go to another company. Website search usability comes in two parts, the search box itself and the results.

When creating a search box you need to have a single text box and a button labelled "Search". That is about as complicated as you need to go, although it is okay to have a drop down box of categories, as long as the default is "All Categories". When the user has done a search, the search box should contain what they searched for, so that they can refine their query if the need to.

JavaScript Logo

Nofollow Highlighting In Google Chrome

28th November 2008 - 1 minute read time

I found this excellent bookmarklet the other day which allows you to see nofollow links quickly and easily in Chrome most modern browsers.

Nofollow?

The bookmarklet consists of the following JavaScript.