We’d like to share something really exciting. Along with all the client projects we’ve been beavering away delivering over the last couple of years, we’ve also been working hard in the background on some important internal projects.
Our internal R&D investment and culture of innovation has led to the launch of something pretty special. The BetterBiolerplate is our front end web framework that helps to deliver a consistent approach to meeting and exceeding standards at the cutting edge of the web.
As an agency, and as our name suggests, we’re always looking to evolve and improve the work we do and the client services we deliver. We’re also a collaborative bunch who love sharing our knowledge and contributing to the digital community around us. As many agencies do, we’ve made use of many Open Source projects ourselves over the years (such as WordPress CMS platform) and as the Open Source community turns 20, we feel it’s time to give something back.
We’re very proud to announce that we’ve made our BetterBoilerplate Open Source and invite other agencies and developers to benefit, use and contribute to the project.
Introducing the BetterBoilerplate
Innovation, quality and consistency are at the heart of our values and some of things that sets us apart from our competition. As all agencies will know, the web is a challenging and evolving place to work, from frequent changes in web design trends through to ever-changing updates with browser support and capabilities. Additionally, there isn’t a week that goes by on the web without the launch of another framework, technology or technique to try out.
When building the frontend of websites at Better, we abide by a few simple principles in order to produce maintainable and reusable code. With varying project sizes and shared team resources it’s easy to end up with a few inconsistencies across the project. Minor changes such as using different shades of the same colour or using different spacing values for elements, can easily disrupt the ‘rhythm’ or appearance of the page. Over the years we’ve tried many frontend frameworks, but never found something to suit all of our requirements, so we decided to build our own.
Read on if you want get into the technicalities.
Principles
The first of these principles is the separation of style and content, this isn’t anything new but is something all developers should be abiding by. DRY or Don’t Repeat Yourself is another of these principles, we apply DRY to CSS by abstracting a number of style rules into reusable classes, by doing this we keep the outputted code to minimum.
BEM or Block Element Modifier is the methodology we use for naming. This methodology is a naming convention used to scope styles to a specific block and again helps us to scope styles and output less code in the end.
By utilising these principles we can produce websites and apps that work on all devices, styles that are scoped to each block element and minimise the code we output for any given project.
Other Frameworks
Frameworks in web development are pre-prepared software intended to make the job of the developer easier. Almost everyone is using some kind of framework. They can be utilised to get up and running quickly on a project with much of the code needed already written. There are a number of different frameworks. The two most popular in frontend are Bootstrap and Foundation.
Bootstrap contains a number of pre-styled components and although these can be updated and changed a lot of the time developers don’t bother and instead just use these pre-styled components in their websites and apps. Unfortunately this has lead to much of the web looking and feeling the same.
Both of these frameworks are amazing and provide a number of pre-styled elements and patterns and both are somewhat customisable and have a number of different versions of the framework. These frameworks are jam packed with features but this comes at a cost; Bootstrap is 125kb (minified stylesheet) and Foundation is 117kb (minified stylesheet). We’re an agency, we produce a bunch of websites each year, most of which are simple brochure websites, and although we’re only talking kilobytes both of these frameworks are pretty heavy and contain a number of elements we won’t use on the majority of the websites we produce for our clients.
Roll your own
The closest we could find to the framework we needed was InuitCSS created by Harry Roberts. We started using Inuit around 3 years ago for building the frontend of our projects, this lasted for a few months before we began heavily modifying it to be more suited to the websites we were creating. After a year we had our own BetterBoilerplate, based heavily on Inuit.
We used this boilerplate for a large number of projects and it served us well for a few years. Since we bastardised the BetterBoilerplate the web has moved on and a number of new features are available to developers in CSS and JS and we’d spent a lot of time updating the framework to try and incorporate these new features. Over time the boilerplate became bloated and provided support for older browsers we no longer support with the outputted code being 71kb (minified stylesheet) before we’d wrote any of the styles needed for the project.
Evolving BetterBoilerplate
At the beginning of 2017 we decided to rewrite the boilerplate, this time from scratch with scalability and the future in mind as well as all the things we’d learned from previous iterations and with the intent to release the BetterBoilerplate publicly early 2018.
So we’ve decided we’re rebuilding but where do you start with such a mammoth project. We decided to list the features we needed from the boilerplate; what we needed it to do, what basic styles and components should be included, which parts of the build process are the most difficult/painful and how can we mitigate these and what else do we want from this custom framework.
File Structure
The file structure for any project is important; web or not. File structure for websites and apps is critical, these projects are usually made up of hundreds of files so organisation is key. Our file structure is simple and easy to follow, utilising ITCSS for the CSS framework and using simple directory names written in plain english.
Build Tool
Building websites and apps requires a lot of arduous work from creating icon sprites to optimising images and minifying code. All of these tasks can be performed manually but we have streamlined many of them into the build tool. This tool will do a lot of the heavy lifting for us freeing up developers to concentrate on building the project this also cuts the cost of a project by removing this time from the scope of the project.
CSS Framework
The CSS framework is the bulk of many frontend frameworks/boilerplates. Our CSS framework utilises SASS in order to give us a myriad of extra tools not normally available to us in vanilla CSS, such as variables for keeping colour hex codes and keeping spacing values consistent throughout the project. On top of the extra functionality given to us by SASS we’ve also built a number of other tools into the CSS framework allowing us to create complex calculations and provide shortcuts to providing support to as many browsers as possible.
File Size
Due to the manner in which the new BetterBoilerPlate has been built it allows us a lot of control over the outputted file sizes. Comparing the CSS frameworks file sizes;
- Bootstrap – 125kb
- Foundation – 117kb
- BetterBoilerplate – 28kb
As you can see our code is nearly 4.5x smaller than Bootstrap, this small file size translates to faster websites.
So what next
Now the BetterBoilerplate has been completely re-written it is now open to the public. The code is available from GitHub and allows developers from all around the world to use and contribute to the framework.
Building this software has been a labour of love, we love the web and want to keep pushing the boundaries of frontend, our boilerplate allows us to do so, while still providing support to as many browsers as possible.
If you’re already a client of ours and your website was built in the last three years then your website was built using some version of the BetterBoilerplate and it’s through these websites we’ve learned and refined our processes and code and we will continue to do so as we improve and iterate on this version of the BetterBoilerplate.
The BetterBoilerplate is now available publicly via GitHub. If you’d like to find out more about our web design and development services, please get in touch by dropping us an email or giving us a call on 01642 989158.
