To boot or not to boot?

That is the question

March 3, 2015 /

These days I see a lot of jobs listing Twitter Bootstrap as a requirement, and while I love it, I also feel its not always the best bet for production. You do not need Bootstrap as the foundation (haha see what I did there: Foundation) of your site. For me it’s all about the content and producing a layout which supports it. When it comes to Bootstrap there are endless pros and some cons. I could make a big list but instead present this:

Pros: You are using Twitter Bootstrap
Cons: You are using Twitter Bootstrap

How can the pros and cons be the same? Well, on the plus side you have a ton of cool grid styles (new post coming on “the grid”),  JS components, headers, footers, navigation, and hero’s to choose from but you are limited to doing it the Bootstrap way, so in my book this is a con. Bootstrap comes with overhead and dependencies and, while it can be extended, there are walls in place. Any experienced developer with any chops can extend it with a few lines of well thought out code, but what about those with less experience? I see those support posts “Using twitter bootstrap need help getting navigation to work on iphone”, so while it saves time and setup, it can lead us down an overgrown garden path in the end.

The key word on everyone tongue is “Responsive”, and Bootstrap provides that out of the box. I find it useful for prototyping and UX planning sessions, but the simple nature of ‘responsive’ can be coded in just a few lines:

The HTML

<section class="my-post my-post--awesome">
	<div class="wrapper">
		<h1>You're awesome!</h1>
		<p>Thanks, so are you.</p>
	</div>
</section>

The CSS

/* ----------
LAYOUT CLASSES
---------- */
.my-post { /* no base CSS - extend if needed */ }

.wrapper {
	width: 90%;
	max-width: 1400px;
	margin: auto;
}

.wrapper.full {
	width: 100%;
	max-width: 100%;
}

.wrapper.restrict {
	max-width: 960px;
}

.wrapper.mobile-full {
	width: 100%;
}

@media only screen and (min-width:768px) {
	.wrapper.mobile-full { width: 90%; }
}

The explanation

The above codes creates four cases with centre aligned wrapper:

  1. wrapper » content is 90% of window but has max-width of 1400px
  2. wrapper.full » content is always 100% (no max)
  3. wrapper.mobile-full » content is 100% below 768px and 90% above
  4. wrapper.restrict » content is 90% of window but has max-width of 960px

Check out the working example.

Of course this an over simplified example, but illustrates my point: understand the simple version first. If we constantly deploy frameworks we are undermining our basic understanding and are forced into a singular perception of code.

Years of experience has taught me that even the best laid plans can fail in the end. This is not because of lack of skill, but rather a case of the pieces not fitting together very well.

Case: “Our design was on point with FPO but after entering the epic copy deck things just fell flat.”

Case:  “We deployed Bootstrap (early days V1) and then the designer came up with a cool new concept and so we had to hack it into Frankenstrap”

At the end of day you have to answer the question of “To boot or not to boot” yourself. I personally have a love/hate relationship with it along with many other frameworks, but tend towards deploying simple customized layouts. The tools and concepts of web development progress at an alarming rate and it’s hard to keep up. I say become the Zen master: “embrace simplicity… meditate on the details”. There is always a new tool out there that may change your development life for the better or worse.

Happy coding and enjoy today’s cat video:

« »