Strapless
On Friday, Kelly and I were having a conversation over lunch about the ubiquity of Bootstrap. It’s a topic we’ve been kvetching about for the the last few years—we’ve grown tired of seeing the same site everywhere we look.
It’s not that we have any issues with Bootstrap specifically. It’s a solid framework for rapidly prototyping an idea before deciding if it’s got legs. It’s also a great tool to learn from when considering your own pattern library. That said, we don’t think it should be used in the way it so often is: as the entirety of your front end design with only a teensiest amount of theming applied.
The reasons we aren’t big Bootstrap fans are manifold. Steve Fisher, Yesenia Perez-Cruz, Samantha Warren and I hashed out a bunch of them in our SXSW panel “The Real Responsive Process?”. Here are a few of the highlights:
- Bootstrap doesn’t solve your problems. Design is problem solving. The design decisions made by the creators/maintainers of Bootstrap solve their problems, not yours. You may share some of those problems—a need for responsive layouts, for example—but not others. You need a system that is tailored to solve your problems and only you (and your team) know what those problems are. Have you ever tried on an article of clothing that’s “one size fits all”? How well did it fit your body type? Unless you are absolutely average in all respects, probably not all that well. Solve your problems with your own Bootstrap-esque pattern library.
- Bootstrap offers more than you’ll need. Bootstrap contains a lot of components and design patterns. It was created to address a wide array of project needs (“one size fits all”, see above). As such, there’s a lot of code in there. The defaults with some basic theming put you at a minimum of around 200KB for the CSS, JavaScript, and fonts (and that doesn’t include jQuery, which is also required). Customizing your Bootstrap build can help, but if you’re gonna use Bootstrap in production, you need to ruthlessly rip out anything you aren’t using. That takes time. And then you need to maintain your customized version of Bootstrap, making upgrading to new versions of the framework painful.
- Differentiating yourself from you competition is harder. Bootstrap sites have a very common look to them. You can easily pick them out of a lineup and they are especially prolific within the startup space. If you’re trying to separate your company from the pack, having a site that looks just like every other startup (including your competition) is probably not a great idea. Spend some time (and, yes, money) creating a design that matches your brand and reflects who you are.
I’m not saying these things because I’m a Bootstrap hater. I’m not, I just think it’s a crutch for a lot of people and it’s led to an era of bland, look-alike design on the web I’d love to see us transcend.
In my conversation with Kelly, I jokingly said it would be funny to create a browser extension that removed Bootstrap’s CSS and JavaScript from any page that included it. Something subversive along the lines of Eric Meyer’s hilariously destructive table layout and font
demolishing user stylesheet or Richard Harrington’s “disrupt” to “bullshit” converter. On Friday I decided to see what I could throw together in 15 minutes and I dubbed the result “Strapless”. Using Crossrider, I converted some simple JavaScript into an extension for Chrome and Firefox. I didn’t bother with Safari as I couldn’t justify spending $99 to add a prank extension to their catalog. I have a version for Internet Explorer, but the installer is failing, which I suspect is an issue with Crossrider.
Enjoy!
Webmentions
That @AaronGustafson goes Strapless aaron-gustafson.com/notebook/strap… - extension to remove bootstrap from sites.
Strapless. Groß! aaron-gustafson.com/notebook/strap… #bootcrap
“Strapless” (A web without Bootstrap) aaron-gustafson.com/notebook/strap… +@AaronGustafson // This is hilarious.
A browser extension to remove bootstrap from websites. I LIKE YOU! aaron-gustafson.com/notebook/strap…
@aarongustafson So once I install the extension, it automatically will turn it off when I encounter a Bootstrap site?
@aarongustafson That’s awesome!
@webcraftsman It’ll remove the Bootstrap CSS and reload the HTML without Bootstrap’s JS. You can try it out on getbootstrap.com.
@aarongustafson Adding a toggle feature might be a good addition just so you could then see what they did with it.
@webcraftsman I thought about making a button for it so you could turn it on and off. Maybe in v2.
Strapless, @AaronGustafson’s thoughts on the use of Bootstrap bit.ly/1PCsVES
@reybango @AaronGustafson Expect me to click a link about what you and/or Aaron do ‘strapless’? NNN…OK FINE
Strapless ow.ly/TB1UK
@reybango @AaronGustafson I wrote this cos I was sick of the same old designs and poor accessibility. responsivebp.com
Strapless, From the Notebook of Aaron Gustafson aaron-gustafson.com/notebook/strap…
I’m on-board with the ideas here Strapless aaron-gustafson.com/notebook/strap… Only problem for me is not having dev chops to make up the difference.
.. some of the reasons I’m not a big Bootstrap fan ~ Strapless dlvr.it/CVSZlL
.. some of the reasons I’m not a big Bootstrap fan ~ Strapless dlvr.it/CVSTVy
@lydiamann Methinks you sell yourself short.
If you are going to use #bootstrap, use wisely : aaron-gustafson.com/notebook/strap…
Strapless – Is Bootstrap really the right solution for you | bit.ly/1RowUTD
Strapless, From the Notebook of Aaron Gustafson bit.ly/1GirEAY #WebDev #CSS
Why not to use Bootstrap: Strapless abid.es/1LFeTgq
@ivanoats agreed, we don’t use it at my current job
As an agency I think you want to differentiate and think out of lego blocks. Bootstrap is sometimes overkill. goo.gl/fY1mr0
“Bootstrap doesn’t solve your problems.” aaron-gustafson.com/notebook/strap…
“The reasons we aren’t big Bootstrap fans are manifold” aaron-gustafson.com/notebook/strap…
Amen, @aarongustafson - Strapless, on the ubiquity of Bootstrap: aaron-gustafson.com/notebook/strap…
Strapless -Arguments for Not Using Bootstrap (& a protest browser extension to remove Bootstrap styles from sites) aaron-gustafson.com/notebook/strap…
Strapless (why you should not use Twitter Bootstrap) buff.ly/1QVkzqa
Strapless - A discussion on the merits of not using Bootstrap buff.ly/200aoH5
Strapless – Is Bootstrap really the right solution for you | bit.ly/1RowUTD
@ivanoats Tooling marches on. Always a niche for people that understand the layer down, a niche for people that can grok the next layer up
Strapless = going “cold turkey” 4 the #CodeNewbie addiction to #frameworks aaron-gustafson.com/notebook/strap…
Strapless: Arguments for Not Using Bootstrap - aaron-gustafson.com/notebook/strap…
Strapless bit.ly/1kxodwe
Strapless: The reasons we aren’t big #Bootstrap fans bit.ly/1RbQdjq @aaron-gustafson #programacionweb
Nothing new here but I agree with some of the author’s point.
Problems of using Bootstrap in your app:
aaron-gustafson.com/notebook/strap…
Totally understand. #Bootstrap is great, but in the end might be overkill. To me it is. aaron-gustafson.com/notebook/strap… (also read the comments)
Talking about using bootstrap or not by @aarongustafson ow.ly/TLz8U
Talking about using bootstrap or not by @aarongustafson ow.ly/TLz8Z
Talking about using bootstrap or not by @aarongustafson ow.ly/TLz4J
Bootstrap. Why you should not use it. Really good article. aaron-gustafson.com/notebook/strap…
The Bootstrap Framework … Should You Use It or Not? aaron-gustafson.com/notebook/strap…
Strapless - why you shouldn’t use Bootstrap j.mp/1ORfEsV
Already moved away from jQuery & towards VanillaJS? Now it’s time to go Strapless & drop Bootstrap. bit.ly/1SzPyZP
Likes
Shares