FontAwsome Bulleted Lists

As I’ve mentioned before, I like to the use Font Awesome icon set because it’s so awesome.

This CSS snippet allows you to use Font Awesome icons as bullets in lists by applying a class to the list wrapper, e.g. <ul class="list-fa-check">

The class is simply list- plus the CSS class name of the Font Awesome icon.

See the Pen Font Awsome icons as bullets by Dan (@dgifford) on CodePen.0

Most of the icons which I think you’d want to use as bullets are there, including the check mark, chevron, caret, plus etc.


Change error reporting during the execution of a class

It’s generally not a good idea to mess about with error reporting levels – just turn them on while developing and off in production.

However, I recently came across a situation where I wanted to suppress the error notices being generated while developing a particular class.

An autoloader class was generating notices while looking for files – a useful feature as it shows the paths where it wasn’t finding the files, so I didn’t want to change the source of the error notices.

Instead, the solution was to change the error reporting levels in the class using the autoloader using PHP’s error_reporting function. This function returns the previous error reporting level when called, allowing it to be set back later on.

The code:

function __construct( \PDO $db, $p = array() )
	// Change error reporting level
	$this->old_error_reporting_level = error_reporting( E_ERROR | E_WARNING | E_PARSE );


function __destruct()
	// Change error reporting level back
	error_reporting( $this->old_error_reporting_level );

Maybe someone else will find this useful!

CSS Percentage Grid System

There are a few CSS grid systems out there, some as part of frameworks, some stand alone, most of which use a column system – splitting the overall container width into a number of columns and then using classes like col-2 to give an element a width equal to 2 columns.

Quite early on in my HTML coding days, I got to grips with percentage widths in CSS so I find these columns a bit too removed from the actual width and the relative dimensions of elements in a design.

Instead, I like using fractional CSS classes to define widths, e.g. width_half which applies the CSS width: 50%;, and started re-using these classes in various projects… which led to this mini CSS framework.

It provides classes like w_1_2 and w_1_8 which give an element a width of one half and one eighth of it’s container respectively.

Combined with a border box reset which I first read about here and simple container, row and gutter classes, it makes for a simple and small CSS grid system.

It’s on BitBucket if anyone is interested: CSS Percentage Grid System