Four Things You Should Never Do When Using Bootstrap To Build A Site

I was recently working on a pretty small basic 6 page responsive project. The front-end developer quoted about 2 weeks to do the work, however, after about 5 weeks the work still wasn't finished and what we had seen had lots of issues, the grid breaking, things looking wrong compared to the wire-frames (again this was a 6 page very simple design and only IE9+ support). I'm not a front end developer but I do know enough about CSS to make something look like what the client wants... just. When I started to go through the CSS code for the project I was amazed to see some really fundamental issues in the code. This front end developer is pretty experienced which is why I was so shocked about some of the fundamental issues with the site. I did a quick Google search and I couldn't see this advice written anywhere so I thought I'd vent my frustrations: 1. Do Not Write Code in the Bootstrap files. SCSS was used on the project which is usually fine (I'll get to that later). Our front-end designer had added custom styles within the bootstrap form framework. If we ever upgraded bootstrap the site would have broken. 2. Do Not Override the Bootstrap framework. After a peek through the CSS I saw a lot of code like the snippet below. What this does is resize the grid and break it.  If you need to write a custom grid, use a custom one.  Overriding bootstrap will only give you hours of headaches.  As a result of these snippets, a lot of things just didn't work in the grid correctly.  The resolution... delete all the overrides and the site started working correctly again.

width: 30px;
3. Don't Include The Kitchen Sink When It's Not Needed. After looking in our style sheet for our basic 6 page site, the CSS file was over 10,000 lines long!  If you are using bootstrap you do not need to include everything just for the sake of it.  If you don't need a feature don't include it. You can also add it in later. 4. Don't use SCSS just for the sake of it. Writing easier to understand and more flexible code is brilliant... I'm in! In our project, however, we had one big SCSS file, it didn't use variables, or media query variables, the site wasn't split modularly... nothing! Our project didn't harness the benefits from SCSS so using SCSS in this situation only made debugging more lengthy. If you want to write modular CSS - cool, if you're just going to stick your custom CSS in one file, not use variables, or the media query variables... why use it? You're adding complexity with no reward! My biggest tip from my years of development.  If you're trying to get something to work and you have the whack-a-mole affect. You fix one bug only to find another one pop-up somewhere else.  Generally, it's because you've done something wrong or the approach you are using is wrong.  At these times it's also good to take a step back.. assess if what you are doing is right.  If not, even if you have a deadline usually the best course is to take a step back, maybe start again and learn from your initial fixes.  Repeatedly trying the same thing over and over and failing won't get you anywhere.

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top
var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-35662136-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + ''; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();