Tons of front end frameworks lying around the web for quite some time now, and the number is growing while we talk. Twitter bootstrap, Foundation, Pure by Yahoo, to name some famous ones. They suppose to boost your development, having all goodies that a modern front end developer needs, ready for use. From grid systems and carousels, to tables, forms and buttons. They are all there! Think about it though, do you really need all that modules? I mean, in all of your projects? And if so, didn’t you ever wanted something more customized to your needs?
Designed for everyone, everywhere?
A couple of months ago, I needed nice looking tooltips for a website I was working on.
It was a quite simple website for a friend, but had some custom functionality. I “customised” the twitter bootstrap to download only the code I needed for the tooltip module. Those tooltips fitted well in the design of my site, so I kept them. Success, so far. Then the design had an area that the scrollspy module would match perfectly! I thought I should give scrollspy a chance. After hours of trying to implement it in my project, I gave up. Note that I had quite good control of the HTML markup the CMS was generating, nevertheless, scrollspy wasn’t cooperating. Maybe I should have given it some more time, maybe I was missing something, or maybe I am not good enough developer to use it. But, isn’t that the case with bootstrapping your project?
Let me quote what the header from getbootstrap.com oulines:
Designed for everyone, everywhere.
Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.
Sure, but still it’s not for this very project? Duh..!
I am not saying that these frameworks are useless, quite the opposite! In fact, I have learned many things from them while I was struggling to implement various modules. I also find Twitter bootstrap and Pure very attractive, from the design perspective.
What I say, is that their usefulness is debatable per project. If we are talking about a landing page with some extra info, cool! It’s easy and fast to employ one of these frameworks. If it’s a dead simple website with not much of custom functionality, it’s great to choose one again.
If either you don’t have a CMS behind your site, or you can completely intrude to the HTML that the CMS is generating, should be easy as well. Of course, if for some reason using such a framework is the only way, with a CMS like Wordpress, or Drupal, you can grab one of the numerous themes out there that are based on your favourite framework.
Take some time to think
What should we think before making the decision to use a sparkling bootstrap or not?
The most obvious yet the most subjective one, is the design. Personally, as I said before, there are a couple of frameworks that I really like their design. Then, and most important, we have to consider the amount of code we really need out of that framework. How much code do we actually need, is there any possibility that most of the code is useless for our project? Or are there too many things we have to customise to fit our needs?
Does our CMS (if we have one) plays nice with that bootstrap?
If you answer the above questions, you will know from the beginning if using a bootstrap framework is going to add extra effort to the overall exertion you spend on your project, resulting in more headaches and problems to solve.
So be careful not to end up solving problems, which wouldn’t be there if you had never used the “problem solver” bootstrap.
Here is what I choose to do instead. Again, I don’t assume that this is the best path for every single project, it’s just what I personally ended up doing on most of my recent works.
There is CSS code that I use over and over again. This code is pretty much a completely naked, micro-framework on its own. I call it this way, because it has nothing to do with real styling yet it's the foundations of a site. So, let’s get started.
I do use normalize.css, save that in a file. I also make use of a very simple and basic grid-system that I have authored on my own. Save this too. Then, there are CSS rules like box-sizing, font-smoothing and such, that can be found in every work of mine. Cool, get them into that file too! A few basic breakpoints to start with? Sure, breakpoints are in! And so on so forth.. I have probably forgot many things that this “file” has in it (or maybe not), but I think you can get the picture. To be honest, there doesn’t even exist that “file”, most of the above are Compass imports and mixins I (or someone else) wrote once and I use them all the times.
On top of my naked micro-framework, sits the project specific another-simple-micro-framework.
No kidding! Things like font sizes, spacings, form elements and other basic stuff should go and complete the bootstrap framework I am going to use! If I can have all of them from the beginning of my development, I am going to be a really happy developer!
While following the above steps, what I am actually doing is following the atomic design methodology, for which Brad Frost have spoken, without even noticed it. And if he says that this is a good thing to do, who am I to disagree?
In the same amount of time (if not less), struggling to fit a bootstrap framework into my work, I have made my own project-specific bootstrap, with only the pieces I am actually going to use, and nothing more.. If I made it correctly, this “bootstrap” will be the base to build the actual theme on it, it will be expandable and easily maintained, it’s my own code after all.
I have not mentioned anything about cross browser support so far. Frameworks like twitter bootstrap should be good at it. Meanwhile, take a look at your calendar. If while you are reading this blog post, the year is at least 2014, and you are not a time traveler from 2001, why would you bother supporting IE6 or IE7? And even if -for any reason- you are forced to support those browsers, then you have tons of things to worry about, and the choice of the correct bootstrap framework is not one of them!
Know your needs
This is not a blog post about “not using a bootstrap framework”. Instead, this is more about “think before you act”. You may be the best front-end developer out there, and yet you may have never used one of the latest trends of bootstrapping. Or you may be that best front-end developer again, and you actually are the biggest contributor to one of those frameworks. Both situations are equally thrilling as long as you know what you are doing!