Design your way

Wednesday, September 11, 2013

Bootstrap is as their authors call it, a sleek, intuitive, and powerful front-end framework for faster and easier web development. For this reason it has been the go-to front-end framework for many people due to the rapidity in which a project can be made, be it a website or a web app.


So, how has it gotten so popular? That’s not at all difficult to find out. It has a lot of built-in features that save you the hassle of writing the code yourself. Its main attractions are its responsive layout, custom form elements, typography, JavaScript interaction, cross-browser compatibility and buttons.


Bootstrap


It is a great solution for developers thanks to the fact that all the pieces are laid out nicely just to be picked and used as they please, without a design being needed or having involved creativity. Skipping the designing part of a project made it a really good alternative to teaming up with a designer for a website or web app.


Why use it?


Time saver


There are reasons to use it as much as there are reasons not to. If you are asking yourselves if you have to use Bootstrap or one of its alternatives, like Foundation, for example, the answer is, well, “depends”.


Developing a website or a web app with Bootstrap is incredibly fast comparing to actually starting the project from scratch. There are numerous templates for Bootstrap from which you can choose one that is appropriate and then modify, stylize, and adapt it to your client’s needs.


While this sounds incredibly bad, the end result is much more pleasing than you would have thought. This saves you a lot of time that you would have spent with cross browser testing, device compatibility and debugging.


The downturn, however is that the site that you have developed might look a little like everyone else’s who used Bootstrap.


Responsive


Nowadays, the term responsive web design is starting to be incredibly annoying due to the countless times that you hear or read about it daily, and it is a feature that you have to consider when doing work for your clients.


By using Bootstrap, you don’t have to bother with writing media queries for the divs that you have, because they are built in the standard CSS that the framework has.


Customizing it is easy


It is known that Bootstrap has a huge number of components and you don’t really need them all. For that, they implemented a customize page where you can select and modify easily exactly what you need for your project.


Bootstrap customizer


Why not use it?


The very messy markup


A lot of people have been complaining about this and surely made some waves. Bootstrap has a really messy markup because it bloats up your website with a large amount of CSS classes by specifying them in the markup. In a way, this is really useful, because those classes actually do something there, but having them around can seriously slow down the DOM.


It’s incredibly heavy


There are a lot of alternatives to Bootstrap which focus on the exact thing that Bootstrap doesn’t, load time. Bootstrap comes with a lot of lines of CSS and JS, which is a good thing if you think about what those lines of CSS and JS can do, but a bad thing if you consider that many people have really bad internet connection. Also, there’s that problem with your server that will take all the heat for using such a heavy framework.


To solve this problem you should use the customize page that they’re providing and use only the necessary options.


Sass support


Bootstrap is built with LESS and that means that normally it doesn’t have support for Sass or Compass. This thing has made a lot of people uncomfortable due to their addiction to Sass. This would be a big reason why not to use for some people, if it wouldn’t be for Sass Bootstrap.


Sass Bootstrap


The “design trend” of Bootstrap


I’m calling sarcastically this paragraph the design trend of Bootstrap because having so many website that look almost the same due to Bootstrap’s features makes it a trend… almost.


Some designers take that upon themselves the task of customizing the framework and its elements not to look like the standard Bootstrap theme, but most of the designers/developers who use it don’t customize anything which means that the end result will be a ton of websites that have more similarities than their owners would want.


Limited JavaScript components


I’m not particularly a fan of JavaScript, but when there’s a need for a client, it must be used. The problem with Bootstrap’s plugins is that they are limited and a lot of developers are complaining about them, especially about the Tooltip plugin, who doesn’t have a fallback for Internet Explorer (even IE 10) for some features.


Examples of proper usage of Bootstrap


Even if there are some problems with Bootstrap or, rather, its usage, it is still an amazing framework and you can use it to create incredible websites or web apps with it, if you customize it and not just use the defaults. The proof lies in the examples below.


divshot.com


designedtomove.org


colibritool.com


atfirstsightfilms.com


stephaniehider.com


getflywheel.com


invoice.am


uberflip.com


learndot.com


jitbit.com


postagramapp.com


alexpeattie.com


themuse.com


Alternatives


Although it is a good framework, it has attracted a lot of negative opinions from some people due to its downfalls or poor usage that made it look in their eyes like the default framework that everyone uses like a religion, or, how Joshua Gross called it: “Twitter Bootstrap’s success has turned it into the Times New Roman of design. It has a time and a place, but you wouldn’t use Times New Roman on your startup’s website, would you?”.


Like any product that has been used till saturation, it is perceived negatively by some groups of designers or developers and are looking for alternatives to it, alternatives that offer things that Bootstrap can’t or doesn’t properly. These are just a few of the alternative frameworks that you can use. There are a lot more to be found if you search thoroughly on Github.


Foundation

Foundation


Pure

Pure


Ink

Ink


Blueprint

Blueprint


Skeleton

Skeleton


Gumby

Gumby


inuit.css

inuit.css


HTML5 Boilerplate

HTML5 Boilerplate


Neat

Neat


Workless

Workless


Conclusion


I know the title of this article might look like a propaganda against Bootstrap, but the article simply shows the good and the bad of this framework. I’ve decided to make this article because of all the blind followers of Bootstrap who use it just because the next guy uses it.


Knowing the whole picture of a product that you are using as a designer or developer is better for your clients, because in this way you can adapt and use the proper framework for their needs.


I like the fact that there’s a competition at the top between Bootstrap and Foundation, because this means for us, the framework users, and our clients, that each of them is trying to deliver the better framework.








Source: http://feedproxy.google.com/~r/DesignResourceBox/~3/-6bho5s92oM/

No comments:

Post a Comment

 

The Cash Box Blueprint

Most Reading