When creating a new webpage or app, there comes a time to decide: should I use a front-end framework (like Bootstrap) or write my own CSS (front-end code) from scratch?
As a front-end developer, I get asked this question a lot. I have worked on many projects in a number of different ways and, like anything, there are pros and cons to both. I will go through a few factors to consider, and review some front-end frameworks that I have used in the past.
Do you Have a Very Specific Design in Mind?
If the design that you or your designer have come up with is very specific, and has aspects that are different or unique, it will likely be difficult to replicate with an out-of-the-box front-end framework. In this case, I would recommend writing the CSS from scratch so you have more control over the code. It does, however, mean more testing on your part to ensure that it looks consistent across all browsers and devices (some browsers will ignore or render CSS code differently).
If the design is more of a guideline, or is one of the two types of websites in fashion at the moment, then using a framework is a quick way to get the website set up. They are also well-tested, so you don’t have to worry about it looking strange on Internet Explorer.
Understanding the f-layout in web design
Themes plus quality lead generation
Who is Going to Maintain the Code Base?
If the person writing and maintaining the code base has a high proficiency with the front-end code stack (HTML, CSS, JS), it’s likely to be quicker and easier for them maintain a custom code base. It can be tricky here if the one developer who wrote it all sudden leaves. I recommend writing and maintaining code style guides for the front-end developers to use and to have when handing over a project so everyone can get up to speed quickly. It can also help when doing code reviews.
Frameworks are strong here as they come with plenty of documentation so people can get on-boarded quickly. They are also a good option if you are not fully proficient with front-end code as you can learn a lot through using and making changes. If they use the framework well, and make predictable changes, it can be very easy to maintain.
Where it can also get difficult is if you use a framework for a custom project and make a lot of custom changes and overrides. You can quickly end up with a very confusing and difficult to maintain code base. When it is time to upgrade to the latest version of the framework, some poor person will have to go through a lot of pain.
Alright, I’m Going to Use a Framework, Which One?
Bootstrap
One that you’ve probably heard of the most is Bootstrap. Bootstrap has been around for about six years now and works with a number of platforms including Ruby on Rails projects. It’s also very versatile working with SASS, LESS, and jQuery. It provides responsive layouts for mobile and desktop, and their HTML often comes with a bunch of accessibility features. It also has pretty much every web component you can think of, from sticky headers, nav bars to modal pop ups and tooltips.
Its strength is also its weakness, however. Once you add bootstrap to your project, your project will look like a bootstrap website. It makes it easy to update a few things like colours, fonts and spacing, but I have found it quite difficult to stick to a specific design without the code base becoming unrecognisable and thus difficult to update and maintain. As it comes with so many features, your code base will also become quite large and slow with a lot of code that won’t ever be used.
Foundation
A lesser-known framework that I’ve used is Foundation. It is similar to Bootstrap in that it applies styling to the whole site and has several templates and web components that you can use. It also has a number of tutorials to help you get started. As it’s more recent, the styling is a bit more modern and it is built to handle other new frameworks such as AngularJS and React, as well as Ruby on Rails projects. However it doesn’t have as many features, so I found myself having to pull in custom features that other developers had made that weren’t quite a perfect fit.
Bulma
A fairly new CSS framework that uses flexbox as a base is Bulma. It installs using npm and also has a Ruby gem. I haven’t had a chance to use it yet.
Unlike the others, this is a very lightweight CSS-only framework mostly used to help make a responsive layout as well as the standard set of component styling (buttons, navigation).
What do Framework’s Know? I’m Going to Write my Own Code!
It usually doesn’t take me too long into a project until I come to this decision. After trying (and failing) to mould a framework into the shape I want, I usually end up scratching it and building my own.
What has Worked for Me
I really enjoy the level of control and detail you can put into a project when you write your own code. You can get it to look exactly like the design and have a clean code base, with all the code being used somewhere in the project. You can also structure it to make it readable, using similar conventions with each project and improving them with each iteration. This way, when you need to update it in the future, it’s all set up and any changes are trivial.
What hasn’t Worked as Well
When I write my own, I often find myself saying “But it looks good on my machine!”
One of the the biggest things I’ve learnt is that it is not just a case of making something look nice, it has to look nice on all the browsers and devices. For example here is some code that would make a text input look great on Chrome but unusable on Firefox.
css
input {
padding: 15px;
}
In Chrome it looks like this:
But in Firefox:
(FYI specifying a height instead of padding fixes this.)
Frameworks have already done this work for you, so it looks consistent everywhere. I often find myself ducking over to their sites and borrowing small snippets of what they’ve done.
What I End up Doing
While I enjoy writing my own code, some aspects are easier than others. I often borrow bits and pieces from various frameworks and other peoples projects. Even going to another website and taking a look at their code if possible.
I find this is a great way to learn. There are so many cool things out there that people have built and adapting them to your own style, or using them as a guide to build your own component, is really valuable (crediting them in the code comments of course). They don’t always work out but you learn a bit more every time.
If the project is complicated, I often have a bit of a Frankenstein code base, combining other peoples components with my own in the nicest way I can. Along the way I’ve also written quite a bit that I set aside to reuse when needed.
Tools
Here are some of the better resources I’ve found that you can incorporate if needed:
- browser hacks (how to target code to a specific browser)
- media queries in SASS
- individual CSS only components
- jQuery components library
- search autocomplete
- drag and drop library
