Bootstrap – David Ball's blog

6 reasons why I still prefer Bootstrap to Foundation

bootstrap vs Foundation

The versions I’m comparing are Bootstrap 3, and Foundation 5. Although I’m aware Foundation 6 has recently been released, which makes up for some of the shortcomings in this article – which is better late than never! But I’m still locked into Foundation 5 for many projects.

Bootstrap 3 has sliding animations out of the box

Both Foundation and Bootstrap have accordion components that expand and collapse. But only Bootstrap’s animate nicely out of the box. You can probably change this in Foundation but it’d involve rewriting the component – which is annoying when I’d rather have it working the best way possible right out of the box (that’s why we use frameworks right?!).

Same problem with the navbar. Bootstrap’s mobile nav slides down nicely, allowing you to see where it appears from. Foundation’s just appears and overlays the content, which is sometimes surprising.

I’m glad to see the new Foundation 6 does have an animated slidey accordion and navbar.

Foundation’s config variables

Foundation is very customisable, which is great! And in some ways it’s better than Bootstrap because you can change the look and feel of a component without having to override it’s basic styles.

The way it does this is by using config variables, and plenty of them! Each component has at least 10 variables, about sizing, fonts, colours, background colours etc, which when you compile all your SASS will style the component as you need. Without having to override any styles (and overriding some of Foundation’s styles is a horrible battle of specificity!).

Problem is – you’ve got to figure out what variables there are, what each do, and type them our (or copy & paste), which is more time consuming than writing CSS, because I’ve got CSS styles committed to memory, not Foundation’s arbitrary variable names.

It’s a good idea, but sometimes it’s faster to write normal css.

Bootstrap has glyphicons

I use Bootstrap’s glyphicons all the time. In my Foundation projects I’ve been using FontAwesome, which is great, but it’s nice to have decent icons built-in.

Foundation’s installation process

The tutorial for installing Foundation uses commandline functions to get it installed. Maybe if you’re used to using commandline all the time, you’ll see the advantage in this. But for a light user like me, I feel much more comfortable copying and pasting files into the correct directories.

The ability to @extend more stuff

I use @extend all the time, and find it useful to extend the styles of a class into another. But many places I’ve found in Foundation this errors, for example I was trying to @extend the .show-for-sr class into a new class that did the same thing and more, so that I didn’t have to type out all the styles (SASS will also smush these together in the css for optimisation), but this didn’t work in Foundation because of how these styles are written. Whereas extending .sr-only in Bootstrap is easy.

By default Foundation looks like ass

So out of the box, Foundation looks quite basic, and Bootstrap looks… well… like Bootstrap. This isn’t really a problem which is why I left it til last. There’s a very valid argument that a framework shouldn’t make your site look like anything – and you don’t have to look very far to see the impact Bootstrap has had on the web – many websites that all look the same!

Foundation is deliberately basic so you can apply your own styles, although I quite enjoy working on a site that looks nice right from the start.

All this being said…

…Foundation is decent, and I still think it’s much better to work with a framework than no framework. It does also have some cool things that Bootstrap doesn’t, like Joyride built in (although I’ve not used it yet), and Equalizer, a bit of JavaScript that makes all columns the same height – something that’s been an annoyance in CSS for so many years! (although has been finally fixed with Flexbox).

My opinions on using or not using Bootstrap

I found an article today titled “Strapless” by Aaron Gustafson (read it here) with some arguments for not using Bootstrap in your project. I use Bootstrap all the time, and I feel it saves a lot of time when starting a new project. Here’s my opinions on his points:

1. 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.

I actually agree with this point, but Bootstrap is a starting point, not a full solution. I like it because I can get something working really quickly, and can make the structure of a page, then refine it and change the look and feel later.

2. 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

Okay yeah, it is a bit bloated. It’s crammed full of stuff that you might never need – but actually that’s something I really like about it! If you suddenly need to add a carousel, there’s one built in. If you suddenly need to add a responsive wrapper for a Youtube video, it’s there. If you suddenly need to add a modal, it’s there. Same for lots of other really standard stuff.

Plus as long as you’re using the Bootstrap SCSS files and not the final exported version, you can pick and choose which sections you want, and comment-out the ones you don’t need. Here’s the _bootstrap.scss file for one of my projects where I’ve just uncommented the components that aren’t needed. These won’t be compiled into the final css, so there’s no bloat. But I can add them back in really easy if I need them.

If this isn’t how you include Bootstrap, you should (IMO anyway), and here’s an example project to get your started.

3. Differentiating yourself from you competition is harder. Bootstrap sites have a very common look to them.

Yeah but a Bootstrap site doesn’t have to look like a Bootstrap site! It’s a starting point, a framework. Sure if you keep the default theme, it will look like a Bootstrap site, but you can expand on that and add your own styles.

The major benefit I find is that it makes your markup standard, which means anyone who’s familiar with the Bootstrap classnames will save time when switching between projects and having to figure out how it all works!

Check out the rest of Aaron’s arguments here.

Adding to Bootstrap’s breakpoints variables

In Bootstrap projects you can use the default breakpoint sizes as variables, like this:

/* ================================================
Screen sizes
=================================================== */

$screen-sm-min: 768px;
$screen-md-min: 992px;
$screen-lg-min: 1200px;

$screen-sm-max: 767px;
$screen-md-max: 991px;
$screen-lg-max: 1199px;

…which is useful when writing media queries, like this:

@media (min-width: $screen-sm-min) {
    .upload-item {
        font-size:1.2em;
    }
}

@media (min-width: $screen-md-min) {
    .upload-item {
        font-size:1.5em;
    }
}

I could have chosen any sizes as breakpoints really, but it made sense to match them to the default grid sizes in Bootstrap (col-sm-6, col-md-6 etc).

Although sometimes I find the size range before $screen-sm-min a bit too large, especially when you think about the range of phone sizes. So I add an additional:

screen-s-min: 500px;
screen-s-max:499px;

SCSS boilerplate with Bootstrap baked in

I know starter projects using Bootstrap are common enough, but I’ve added to the plethora this week by adding my own to Github in a public repo.

What is it?

It’s a dead basic project using Bootstrap which compiles all of Bootstrap’s SCSS plus your own SCSS styles into a single CSS file. It’s component-based, so useful features like buttons, forms, etc are in separate scss files for ease of finding. Because it’s all compiled as one big project using SCSS, you can @extend Bootstrap’s classes so you don’t have to add all their zillions of classes all over the place, cluttering your markup.

All the files are in the hierarchy I wrote about in this article.

Why?

I’ve been working on a few projects recently that all needed a sensible starting place. It saves all that setup time I guess. It’s not like this is amazing or anything. It’s just how I’ve started every project lately so thought it was handy.

Limitations

Bootstrap are bringing out new versions all the time. Therefore it won’t be long before my repo is out of date. I’ll maintain it for as long as it’s useful to me, but if you’re going to use it, check for a new version of Bootstrap first and potentially copy the files across. I always leave the Bootstrap folder untouched in every project, extending or overwriting the classes if I need to change them, in case the originals need to change.

See the GitHub repo here.