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
- 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
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
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 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 ^_^
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