To use this website fully, you first need to accept the use of cookies. By agreeing to the use of cookies you consent to the use of functional cookies. For more information read this page.

The Girder FrameworkJamie Balfour's web framework

Setup difficulty: easy

Meet Girder: a lightweight front-end framework that is getting more and more features day by day.

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.

Example

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)

A
B

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

A
B
C

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

A

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. 👍

Comments

There are no comments on this page.

New comment
Reply
Code previewClose