pros and cons of twitter bootstrap
DESCRIPTION
Bootstrap presents a convenient means of organizing your front-end code, allowing for more efficient implementation of a unified look across your website. However, it is not without its downsides, as introducing an external framework to your code base can raise a number of issues. In this article we’ll look at the pros – and cons – of Twitter Bootstrap, and how they affect development for your website.TRANSCRIPT
www.backand.com
Pros and Cons of Twitter Bootstrap
Bootstrap presents a convenient means of organizing your front-end code, allowing for more efficient implementation of a unified look across your website. However, it is not without its downsides, as introducing an external framework to your code base can raise a number of issues. In this article we’ll look at the pros – and cons – of Twitter Bootstrap, and how they affect development for your website.
Pro – Rapid Front-end DevelopmentBootstrap relies upon a grid layout that takes a lot of the guesswork out of front-end HTML code, and allows for responsive pages organized to match your data. This makes setting up an appropriate presentation layer a snap, allowing you to create a clean interface from the first few lines of code. The 12-column grid that Bootstrap provides is cross-browser compatible, meaning you don’t need to waste as much time sorting out inconsistencies in the display across multiple platforms, and relies upon well-separated source elements that can be quickly updated via JavaScript as your data changes.
Con – Auto-generated HTMLWhile this may not seem a major concern at first, it is important to note that Bootstrap’s ease of use comes at a cost, and that that cost is non-compliant
www.backand.com
HTML. The HTML generated by Bootstrap is very div-heavy, resulting in a highly nested and confusingly-organized source structure. Furthermore, Bootstrap can rely heavily upon specific classes being assigned to your elements, which are used as flags to enable various features of the framework. In many ways this violates one of the core precepts of web design – that your presentation should be truly independent of your data. Both of these factors can conspire to make troubleshooting and maintenance of your site challenging, and reduce re-usability of your code.
Pro – Robust Development CommunityBootstrap has a large development community, including developers working on everything from reusable components to ready-made templates. Bootstrap’s customizable nature means that you don’t need to download the entire project if you only need a portion of the functionality, and there is a good chance that any non-included functionality has already been developed as a plug-in for the framework. The active community, coupled with the many available templates, makes getting a Bootstrap-driven site running a quick and painless endeavor.
Con – Questionable Organization of Source CodeAs with any truly flexible front-end development framework, the Bootstrap source code can be rather complex. While this is not necessarily a major concern, there are a couple considerations brought on by adopting Bootstrap that should be taken into account. The first is that the memory footprint of Bootstrap can be fairly significant – the CSS consumes around 126 KB of data, while the JavaScript source itself is 29 KB. This can increase load-times and, in some cases, be the major contributor to your site’s responsiveness over slow connections. Another concern is the internal structure of Bootstrap – the JavaScript source code is largely written without the use of the semicolon (‘;’). While this is not a problem in terms of JavaScript coding practices, this lack of semicolons can cause Bootstrap to break when minimized using a tool such as JSMin. This keeps the size of the Bootstrap JavaScript unnecessarily large, removing one of the common tools used to fight source code size. Finally, it’s important to note that Bootstrap doesn’t play well with SASS, meaning that if you are driving your data back-end using something like node-sass you are likely to encounter issues when presenting your data when the JSON gets to the front-end.
www.backand.com
ConclusionTwitter Bootstrap is a powerful tool that allows you to quickly create a visually-coherent website that is cross-browser compatible and responsive. However, this flexibility and ease of implementation comes at a price – namely the readability of your HTML, violation of web development best practices, and large auxiliary files that increase your sites load times. One thing to note, though, is that most of the potential negatives of Bootstrap development are specifically focused on the code, and not the functionality. Bootstrap works well when used as designed, and can save a lot of time on front-end development tasks at the price of a slightly larger website footprint. The functionality implemented is often worth the bloat that is introduced into the code base, and proper use of Bootstrap can mitigate – or in some cases completely obviate – the most common complaints about the framework.
Contact InformationBackand [email protected]