Jamie Balfour

Welcome to my personal website.

Find out more about me, my personal projects, reviews, courses and much more here.

The Girder FrameworkJamie Balfour's web framework

The Girder FrameworkJamie Balfour's web framework
Setup difficulty: easy

Meet Girder: a lightweight front-end framework that is easy to use, follows a column design, similar to Bootstrap and makes it easy to build a website quickly.

Girder aims to remain a fraction of the size of frameworks that exist currently and only provide what is necessary to build a website that can then be built upon.

The problem

Bootstrap, Foundation and all the rest - they all have one inherent problem, they are all too styled to one design. Girder aims to break the wheel with this, as with all of my Web Neutral Project tools.

The solution

Girder does not provide any styling, instead, it's just a framework that can be used as the basis of the website. It forces no styles or colours (other than grey on banners, which can be overwritten) onto the website and it is built with Sass so that it can be easily customised.

Girder uses columns like Bootstrap and Foundation to make building websites faster. These columns are responsive too - you can specify multiple columns for an element. As well as this, there are other responsive classes such as ones that float on the right only on desktop devices and ones that center text only on mobile devices etc.

In 2018, Jambour Digital (my own web development company) moved to use Girder as the front-end framework used on every hosted website. Production time for the websites went down considerably by using the Girder framework.


This website is powered by the Girder framework so it's a pretty good example. Below is an example showing the grid system in action:

Large, medium and small 6 wide column (col_lg_6 col_md_6 col_sm_6)


Large, medium and small 4 wide column (col_lg_4 col_md_4 col_sm_4)


Large and medium right align (lg_right_float md_right_float) and cleared using the row class clearfix properties


Girder does provide a form of styling for success, danger, positive and warnings, which can be applied very easily to div or button elements:

This is a positive box. This is used to denote a positive piece of information.
This is a success box. Something has happened successfully.
This is a warning box. Something should be looked at first.
This is a danger box. Something has happened unsuccessfully.

For more examples, take a look at the Jambour Digital website and some of the work in the portfolio or view the sample webpage below.

If you want an unminified version of it get in touch with me and I can send the latest version to you. 👍