My Love/Hate Relationship with Frameworks (Bootstrap)


I’ve used Twitter Bootstrap for almost two years now and loved every second of it. As a beginner to web design or development, learning bootstrap can be instrumental to User Interface design, learning how a framework is structured, and overall some CSS tricks and techniques to get you on your way. It really is fun despite all the classes you will eventually type X_X.

What is Bootstrap?

Bootstrap is a UI framework designed by Twitter with a mobile first approach (starting from mobile phones working all the way to the desktop) in mind. It’s filled with a lot of UI elements for beginners to web design to get started with. Heres a link to to get started! http://getbootstrap.com/

Everything is built upon two CSS pre processors (LESS && SASS) and is class based so you will be adding all your stylings in the class attributes with pre existing classes. All the UI and grid work done for me sounds glorious

The Pros

  • Easy to pick up and install
  • Prototype layouts with ease
  • Grid System is very powerful
  • Simple pop out UI elements
  • Responsive Typography

The grid is honestly the best part in my opinion

Bootstrap has a twelve column grid system that depends on the class container where the width of that container depends on your viewport. If you use a fixed container class, both your margin-left and margin-right will sport 15px on each side (which kinda makes it a “fake” grid in some eyes) next is a class called row which negates that padding by using a negative margin value of -15px on both the left and right sides. You are now able to map out your grid based on different sizes

col-xs-xx is for small phones

col-sm-xx is for standard mobile devices (bigger phones and tablets)

col-md-xx is for medium sized desktops

col-lg-xx is for bigger desktops

Here’s where the hate comes in…

Lets say I want to change some stuff down the line. If you dont know SASS you will probably build your own stylesheet on top of bootstrap to add your own styles. And if you do know SASS you have to go through all of that code to modify the smallest things. WHEN ALL MOST PEOPLE NEED IS A DAMN GRID.

So in short…

Hard to maintain

Doesnt scale very well in production

Slowwwwwwwwwwwwwwww

Eventually as you learn bootstrap and what to do you’re own thing you may want to break free from bootstrap.

Like I said 99.999999999% of the time. All you want are the following things :

A responsive grid

Responsive Typography

Multiple browser support(except IE cause F**k IE)

The styles you can do on your own eventually but the above are the usually the building blocks people want

Suzy FTW

Suzy is pre processor for building out your grid in a very clean semantic way. No reliance on classes just Object Oriented SASS and math. A lot of math….But I wont go into that now. Just know its awesome and that it will eventually save your life.

Currently working on a grid system using Suzy just to have so I can retire from Bootstrap once and for all ^_^

Conclusion

If new to building layouts, bootstrap is your friend and you should learn it. A LOT of people use it for production (some so well I cant believe it is bootstrap I’m looking at)

If you’ve used it for a while stop for a bit and build something new.

But for the former, heres a quick way to practice learning the classes. I learned a lot from this too #themagicisreal

https://gist.github.com/DanFerrer/e9e1f2c12c7c6bfd87d2

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.