Rise and Fall of Bootstrap themes

The Sunrise

Twitter Bootstrap is one of the most popular libraries to work with user interface. Thanks to variety of themes developers can create nice websites with little effort. It is a great solution for the backend developers because all the components are ready to be used out of the box. And no design skills or creativity needed. What is more a new project can be created within a really short period of time.

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

The popularity of Twitter Bootstrap has given an impulse to the never-ending theme releases. 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 the 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.

The Noon

A full theme package is a huge time saver. You can open a working copy of the files that you want to customize and start adding needed content right of the bat. 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 the theme, you don’t even need to know JS and touch those files. So developing a website with a Bootstrap theme is incredibly fast comparing to writing a project manually from scratch. You can modify and adjust the theme to your own or client’s needs.

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

The Sunset

There can be situations when you are not the only one who applied a specific theme. And the website that you develop might look like someone else’s. Unfortunately using default theme is not the best way to achieve great design. The main problem in this case is using an outside-in approach. Putting content into predefined boxes results in design that seems to be made by a robot, without any proportions or harmony. The same story fits to typography. No matter what font you use the grid stays the same, which results in a non-harmonic typography.

Another issue is that theme packages can fail to follow best practices and style guides of your team. A theme 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, but their existence can seriously slow the DOM down.

Another point which must be mentioned 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 it and remove battery-draining scripts. To solve this problem you should remove unnecessary things and always check if anything is broken, because some dependencies can be hidden deeply inside the package.

Bootstrap theme has its own approach towards 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 used in the template files. By using these functions developers can write clean code more efficiently. 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 the existing app friendly to the theme package. Thus more code has to be written, which is less efficient and requires more development time.

The Midnight

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 good things we were talking about? 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 can 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. Webpack is a module bundler. 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.

So to summarize: 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.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.