Max Krebs

Oh Bootstrap, I'll Never Leave You Again

Oh Bootstrap, I’ll Never Leave You Again

I am not a designer. I don’t like designing front-ends for websites. It’s tedious and I am not good at it so I mostly just spend hours moving CSS values up and down in Chrome Dev Tools until it looks right to me. Oh wait, I have to also got through the same process again for each responsive breakpoint. No thanks.

Which is ironic, because I started at my job-y job as a front-end intern. But it’s not for me. I can write SQL queries happily all day, but please don’t ask me to touch your CSS. It will look bad and we will both be unhappy.

All this is to say that this is why I stick with front-end frameworks, because the less I have to design, the better. My framework of choice is Bootstrap. Its quick to get setup, has some sensible defaults, and looks pretty good. Unfortunately, the popularity of Bootstrap has contributed to the “Every Website Looks the Same” syndrome that the Internet has been experiencing over the last several years. Because of that, and because I wanted to really simplify my reliance on dependencies, I’ve tried to move away from Bootstrap where I can.

With my this site, that meant no front-end framework at all. I stole some CSS from a couple of other blogs I enjoy reading and tweaked it to fit what I was going for, which was simple and fairly information dense. The result of this was this site being unusable on a mobile device (see also: I am not a designer).

For my next big project, What Do They Look Like?, I wanted to try out Thoughtbot’s Suspenders gem to generate the template for the Rails app. This turned out to be a great idea in the short term, and terrible in the long term for a couple of reasons (one of which is trying to self-host a web app that is specifically configured for Heroku), one of which was that Suspenders generates your app bundled with the Bourbon front-end framework. I thought this would be fine. I wanted to try bout Bourbon anyway as a possible framework for sadrobot.software.

The problem was that, unlike Bootstrap which pre-defines all the styling for you into HTML classes, Bourbon was a mix-on library for CSS and SCSS. I thought I would be able to load Bourbon, and just add some classes and ids to my HTML and be golden, but I had to both define the SCSS styling and structure the HTML. So I pulled some example CSS from the Bourbon website and got the bare bones working. It looked good.

The main feature of What Do They Look Like is that the directory is basically just a grid of faces or images with a name below it; easy to navigate, search or just look at. Trying to get a grid of faces and names working in Bourbon without spacing issues was…a problem. If an image was too large or a name was too long, there would be clipping. That was not okay for me. Forcing my images to be square was no problem, but I could not compromise on people’s names being cut off, so I got frustrated and ripped the Bourbon grid out and replaced it with Bootstrap.

I hate feeling like I am hacking and breaking CSS, I hate feeling like I am using !important too much. I can write well-designed Ruby code, but I find it impossible to write well designed CSS. With yarn and a little bit of fussing with import statements, I had my grid working again. It was responsive with big images and clear text. And it didn’t clip anyone’s name off. And I didn’t have to hack CSS to do it.

I love you Bootstrap. I will never wander again.