“Bootstrap” Bill Turner (Stellan Skarsgard) in Pirates of the Caribbean: At World’s End© Disney Enterprises, Inc. All Rights Reserved.

Why Twitter’s Bootstrap is Seriously Important

Back in late 2011, some Twitter (now-ex) employees released Bootstrap which, in their words, is a “front-end framework for faster and easier web development.” I can vouch for it, this is true.

To the end-user, Bootstrap looks great because it’s simple. Everyone likes design they understand immediately. That said, that is not the best part of it. There are many projects that look great.

The ulimate success of Twitter’s Bootstrap was the standardization of HTML syntax. This HTML syntax targeted the most commonly used collection of HTML elements (tables, forms, etc) and got everyone to write them the same.

Whether a startup or a fortune 500, websites need to output HTML. Relying on a standard syntax to do that allows front-end engineers to focus on the interaction component and less on how to construct standard views of data. This means, if a site is using Bootstrap, on an engineers first day (the ultimate litmus test), they should know the exact HTML for building a list of users and the CSS stylesheet should inform how the brand wants to have that list look like.

Twitter’s Bootstrap can easily be extended or replicated to your needs. Flat UI and Boot Metro are excellent examples of CSS built on top of Twitter’s Bootstrap that makes the user experience seem totally different. Pure is an example of an alternative which uses YUI to create a standardization of HTML syntax. But, that said, you don’t necessarily need their code to build a standard HTML syntax for your development team.

At Tip or Skip, I rolled my own because I was more worried about mobile than desktop. I sat down and wrote out standard HTML for lists, icons, buttons, navigation, and forms. Then, I wrote the CSS to match our designs. This was the greatest investment of time I made to the project of the front-end. And, as a bonus, we wound up using the same informed styles when designing our iOS and Android apps.

Design styles change much faster than the HTML spec. iOS 7, for example, is about to change the standards of design. Keep your HTML standard so you can adapt to a modern style simply by updating your CSS.

*note: at the time of writing this, Twitter’s Bootstrap is the most popular repository on Github.