This page shows the source for this entry, with WebCore formatting language tags and attributes highlighted.

Title

Why you shouldn't use Bootstrap when you have a styleguide

Description

From a customer, we got the request to apply a visual style guide (VSG) to a <a href="http://getbootstrap.com/">Bootstrap</a>-based application. Since we do have a lot of experience with applying style guides on web applications and styling in general, we accepted the job and started to evaluate the details. <h>Which version of Bootstrap to use</h> The most recent stable version of Bootstrap is 3.3.6. However, when you go to the Bootstrap website, there is an announcement that Bootstrap 4 "is coming". The current state of Bootstrap 4 is alpha and the last blog post is from December 2015 which is almost half a year ago. It also is not clear, when version 4 finally will be available and stable and so we had to use the old Bootstrap 3 for this project. But even here, there is some obscurity going on: Bootstrap was initially developed with <a href="http://lesscss.org/">LESS</a> but for <a href="http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/">some reason</a> they decided to switch to <a href="http://sass-lang.com/">SASS</a>. Even if we prefer to use LESS at Encodo, we decided to use SASS for this project to be able to upgrade to Bootstrap 4 more easily when it's available. There is also a <a href="https://github.com/twbs/bootstrap-sass">SASS version of Bootstrap</a> available which we decided to use as the base for this project. <h>How to customize Bootstrap</h> Bootstrap is a GUI library that is intended to be as simple as possible to use for the consuming developer. Unfortunately, this does not mean that it is also simple to create a theme for it or to modify some of the existing components. There is a <a href="https://getbootstrap.com/customize/">customization section</a> on the Bootstrap website that allows you to select the needed components and change some basic thing like colors and a few other options. This might be very nice if you just want to use Bootstrap with your own colors but since we had a style guide with a layout quite different from Bootstrap, we could not use this option. So we decided to clone the entire Bootstrap library, make our changes and then build our custom Bootstrap version. This makes it possible to add some custom components and change the appearance of existing elements. <h>Problems we ran into</h> Bootstrap provides support for <a href="https://getbootstrap.com/getting-started/#support">all kinds of browsers</a>, including Internet Explorer down to version 8. While this is nice for developing an application that runs anywhere, it makes the SASS styling code very hard to read and edit. Also, you cannot use modern technologies such as <a href="http://caniuse.com/#search=flexbox">Flexbox</a> that makes the styling a lot easier and is the base of every layout we have created in the recent past. Another important point is that the modularity of components is not really given. For example, the styles for the button are defined in one file, but there are many other locations where you can find styles for buttons and that modify the appearance of the button based on the container. Also, the styles are defined "inside-out" which means that the size of a container is defined by its content. Styleguides normally work the other way around. All these points make it hard to change the structure of the page without affecting everything else. Especially when you try to use the original Bootstrap HTML markup that may not match the needs of the desired layout. To increase the struggles, there is also the complex build- and documentation system used in the Bootstrap project. It might be great that Bootstrap itself is used for the documentation but I cannot understand why there is another CSS file with 1600 lines of code that changes some things especially for the documentation. Of course this messes up our painstakingly crafted Bootstrap styles again. In the end, we had to remove this file from our demo site, which broke styling for some documentation-specific features (like the sidebar menu). Another point of concern is that Bootstrap uses <a href="https://jquery.com/">jQuery</a> plugins for controls that require JavaScript interaction. This might be good for simple websites that just need some basic interaction but is counterproductive for real web applications because the jQuery event handling can interfere with web application frameworks such as React or Angular. <h>When to use bootstrap</h> I do not think that Bootstrap is a bad library but it is not really suitable for projects like this. The main use case of Bootstrap is to provide a good-looking layout for a website with little effort and little foreknowledge required. If you just want to put some information in the web and do not really care how it looks as long as it looks good, then Bootstrap is a good option for you. If you'd like more information about this, then please feel free to contact us!