Bootstrap for Version 1.0

28 Nov 2014, by Moe in Developer

With the rapid cycles that Scrum provides, I find the product changes a lot over a short period of time. I believe it’s great that scrum can be so flexible and allow the product owner to make changes to the product quickly. I recently outlined how using AngularJS and Bootstrap is great for prototyping but I want to take that a step further and discuss design and user interface for a potentially shippable product. Plain Bootstrap is the way to go for version 1.0 of a product.

The case is this, I find that change happens often and that’s awesome, but the main issue that comes with that is digging through old code, making changes, and making sure my changes didn’t break anything. This change process can be easy and fairly painless or extremely difficult and painful for HTML and CSS. The difference lies in how heavily invested into the look and feel of the product initially. Let’s say we agreed on creating a stylized user interface for our initial version of the product and decide to make a change. While creating the changed user interface from the start would have been simple, changing it is much more difficult. The nature of the problem comes from trying to create reusable and maintainable styles. We write our style sheet to have a certain look and feel across the board but now we want to change something on one screen but not change it elsewhere or maybe we do. Now we have figure out where else this style is used, decide on what to change, do we add more styles or change the existing style? Will this change affect other things on the screen? Will it push something somewhere it’s not supposed to be? Do we need to run through the entire application and make sure that style change didn’t break any screens? As we can see a lot of headache is involved when making changes to a stylized user interface because of the nature of CSS, it is after all, a “style sheet” which means it’s meant to act as a sort of filter for our HTML and typically changing one affects the other – a filter that is difficult to change when trying to write simple and clean CSS.

The problem lies not only in style changes, but changes in pure functionality can expose problems that our current user interface style cannot handle. Certain cases where we need to create a special style specifically for that case and hope that nothing breaks due to that style change. For example, it turns out we have some data that has more text and we need to handle that case, after making that change in the CSS we later find out it caused a bug with a previous use case. Adding a new functionality to a page may affect our style and we will be forced to change it which now makes out simple task of adding a new feature into a messy, “let’s try to remember what’s using this CSS class here so that we don’t break anything when we change it.” Enter, the fix a bug create a bug classic programmer problem from the dark ages of technology. We are no longer in such an age with new tools at our disposal.

Now I love a great looking application just as much as the next guy and I love working on them as well, but I feel that for an initial product that is not focusing on a custom user interfaces part of the business value should stick to something like Bootstrap.

When utilizing Bootstrap we have a plethora of components to choose from to create our application and all through predefined CSS classes that maximize our browser and platform support to boot! Now, as a developer, I can focus on churning out functionality quickly. By the same token, my PO can make changes and I don’t have to worry about much when making that change. Since we are using Bootstrap we don’t have to worry about breaking the style at all, making a change to the style is as simple as changing a class in the HTML to another. Again, we are talking version 1.0 or earlier and who knows, maybe the product owner will like the simple and clean Bootstrap look and feel, and minimalistic design seems to be trending these days after all.

Bootstrap supports the rapid development cycle of scrum and supports frequent changes by reducing the amount of overhead involved with customized styles. The best part is that once version 2.0 comes around we can easily apply a custom style on top of Bootstrap and with minimal effort, transform our generic application into a crisp and refreshing experience.

Some examples of Bootstrap designs that caught my eye which follow bootstrap constraints with a customized theme: