Pros and Cons of Bootstrap Themes

JetRuby Agency
JetRuby Agency
Published in
6 min readDec 6, 2015

The Pros

Twitter Bootstrap is one of the most popular libraries for UI development. With lots of themes available you can create nice websites with a little effort. Bootstrap is also a great solution for backend developers, because it has everything needed right out of the box. No design skills or creativity required. What is more, a new project can be created within a really short period.

It has a lot of built-in features which save your time of writing necessary code by yourself. Among main benefits are responsive layout, custom form elements, typography, JS interaction, cross-browser compatibility and so on.

The popularity of Twitter Bootstrap has given a push to never-ending theme releases. With these themes, you can even apply a design which is created by someone else. Theme packages contain many plugins and libraries which will add even more interactivity to your app.

All you need to do is to pay for the theme you like and download it. By default, a theme folder contains HTML pages which you can edit and add your own content, CSS files with styles, a JS folder with necessary plugins to enhance the theme. In some cases, there are multiple folders with various styles to choose.

Now you are ready to customize your app. But make sure you have a copy of all files before you begin customizing them.

A full theme package is a huge time saver. You can open a working copy of the files that you want to customize and straightway start adding needed content. You should have just some basic knowledge of HTML and CSS if you want to make changes and understand what is going on under the hood. If you are satisfied with all interactive elements that are bundled in theme, you don’t even need to know JS and touch those files. So developing a website with Bootstrap themes is incredibly fast comparing to writing a project manually from scratch. You can modify and adjust theme to your own or client’s needs.

Today responsiveness is one of the first requirements that a client would want. By using full theme package, you don’t have to worry about this because everything is done by theme developers. This saves you a lot of time that you would have spent with cross browser testing, responsiveness, devices compatibility.

The Cons

There can be situations when you are not the only one who liked and applied a specific theme. And the website that you develop might look like a twin brother to someone else’s one. Unfortunately using a default theme is not the best way to get a great design. The main problem is that you are using outside-in approach. You put content into predefined boxes and it results in a design that feels like it is made by a robot, without any proportions or harmony. The same story fits to typography. Whether you use one font or another the grid stays the same, which results in a non-harmonic typography.

The other issue is that theme packages can not follow best practices and style guides that have been settled in your team. It can have a lot of DOM elements with a large amount of CSS classes in the markup. It is clear that they are there for some reason, and do the right things but their existence can seriously slow down the DOM.

Another point which is important to mention is that theme packages are incredibly heavy. It doesn’t matter whether you think or not about resources loading time, mobile users would be thankful if you decrease loading time and remove battery-draining scripts. To solve this problem you should remove unnecessary things and always check whether nothing is broken. Because some dependencies can be hidden deeply inside the package.

Bootstrap themes have their own approach to the HTML structure, and it does not fit well to what is done by a developer. For example Ruby on Rails provides a set of help methods to be used in template files. By using these functions developers can write more efficient and clean code. It would also be a problem to add dynamic data to such package. In this case, developers have to write additional code, remove unnecessary one, modify its behavior to make existing app a good friend to the theme package. This approach results in more code to be written, it is less efficient and requires more development time.

Anything else?

What if you have to work on a project when it has already been lasting for a while and you want to implement all that sweet theme goodness? Telling the truth there is a lot of problems here. You will encounter conflicts while adding HTML, CSS or JS from the package to your app. A huge amount of conflicts. A monstrous amount!!! So now you have to dig into that dark and scary place and find out which scripts and styles need to be removed or replaced, and which ones may remain. This will potentially create even more work as you should go through the theme package installing. Because you will inevitably find weird bugs which have to be fixed. Thus it won’t be fast development anymore.

Let’s look at the example of such theme usage in our latest project. We started developing it on ReactJS with Ruby on Rails API of our own design, but soon the client offered to use a Bootstrap theme to speed up the development and forget about time consuming design. The theme was bought on ThemeForest and delivered to us as it was. And that was a starting point where the difficulties began. First, we needed hardly 20% of what was packed in the theme. Another problem was that JS code was mainly represented by jQuery plugins, which in our case, badly suited to the app. Because React works with a virtual DOM representation it isn’t very good to manipulate the objects on the actual DOM in parallel. So in this way, jQuery is not a good fit to React. Of Course we removed all of these libraries and used similar components for React or wrote our own. In case of datepicker we needed to use the one provided by the theme. Even if it was a bad idea but it could be done by referencing the actual DOM through getDOMNode(), it would allow you to integrate existing jQuery plugins from Bootstrap theme with React.

Next tool which helped us a lot was Webpack. Basically, it is a module bundler. Here is the article about our experience in using Webpack with single page apps. It actually makes things simpler since you use just NPM and share dependencies between a server and a client. It also helps to deal with the problem of loading JS files in the correct order. It gets imports specified in each file and correctly connects all of them to one loadable script. And this applies not only to JS files. Webpack can handle other asset types as well. With the help of loaders you can transform any asset file into a JS function that loads the referenced file. So you can forget about manual preprocessing. And it helped us a lot because we originally used CoffeeScript and SASS, while the theme was bundled with Vanilla JS and LESS files. With the help of Webpack you can just request your assets files and it takes care of the rest using a simple config file.

Conclusion

Using themes fits well in case you leave things as they are bundled and do not want to change anything. Otherwise, you will have a lot of work to integrate it fully into your application and fix all the bugs that can be revealed.

Sign up to discover human stories that deepen your understanding of the world.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in JetRuby Agency

We believe sharing knowledge pushes the industry forward and creates communication bridges. Our technical expertise includes Agritech, Healthcare, and many more.

Written by JetRuby Agency

JetRuby is a Digital Agency that doesn’t stop moving. We expound on subjects as varied as developing a mobile app and through to disruptive technologies.

No responses yet