Published by urs on 22. Jun 2016 13:46:58
------------------------------------------------------------------------

From a customer, we got the request to apply a visual style guide (VSG) to a
"Bootstrap" -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.

[Which version of Bootstrap to use]

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 "LESS"  but for "some reason"
 they decided to
switch to "SASS" . 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 "SASS version of
Bootstrap"  available which we decided
to use as the base for this project.

[How to customize Bootstrap]

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 "customization section"  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.

[Problems we ran into]

Bootstrap provides support for "all kinds of browsers"
, 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 "Flexbox"
 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 "jQuery" 
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.

[When to use bootstrap]

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!