Ditching Bootstrap

Twitter Bootstrap is an excellent tool for rapid prototyping. You can get a decent-looking site up and running in just a few minutes.

But Boostrap can be a pain to work with on an ongoing basis, particularly with a CMS look WordPress that inserts its own DOM elements at will. The grid system might break, or a particular element might not behave the way you’d expect it to.

Today I ditched Boostrap for TimNoetzel.com in favor of my own light-weight, home-rolled solution.

Rather than a full grid system, I’m using only 4 grid classes:

.narrow-container {
    max-width: 720px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.wide-container {
    max-width: 1110px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.col-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 1rem;
    padding-right: 1rem;
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -1rem;
    margin-left: -1rem;
}

I also rolled my own (simpler) buttons and forms, and navbars since I didn’t need all of Bootstrap’s complexity.

So far it’s feeling good. Let me know if you notice any issues.