Why am I using Bootstrap?

Well, I've been working in web developement for over a decade already, but I've always fashioned myself as a backend developer type. At one point, it became popular to call your self a "full stack developer", but that also meant that I had to take frontend things seriously.

If you've read my earlier posts, you'll know that I am extremely critical of JS technologies. However, I've always been a fan of CSS, and it annoys me a little bit that I've never really learned it properly.

Any web developer picks up some CSS along the way, and we all know that centering a div is a pain and such, but I'd love to actually understand it well enough to design an actual layout system for my websites, rather than just tweaking spacing, borders, and colors.

Of course, there is a lot to it, but my main issue was about creating layouts for pages and making that layout responsive (to support all screen sized).

Like many before me, I quickly learned that this was a daunting task, and when searching the web, I discovered that Bootstrap is a thing, and have been using it ever since.

Do I still need it though?

In the last few years, CSS has come a long way. Things that used to be hacked together because there wasn't a solution for it are now seeing new features added to solve those issues. Things that had to be made weird in order to support all browsers are now being standardized, and the web is a much better place for it. (Also, Internet Explorer was finally put down. Probably the best thing that ever happened to the web).

So the question is, do I still need Bootstrap? Do I still need a framework to help me with responsive design?

I won't talk a whole lot about flexbox here. I love how flex allows me to align and distribute things in a container, but when it comes to the overall layout of a page, it quickly becomes a little unwieldy, and we start creating utility classes like the ones we know from Bootstrap. I'd rather see what we can do without it.

I started looking a little bit into CSS grid, and initially dismissed it as overly complicated and annoying. After giving it a second look, I started searching the web for whether CSS grid would be useful for replacing bootstrap as a layout system, and I found a lot of articles that were very positive about it. Many of the articles didn't really take me where I wanted to go, but I did find one that helped me quite a bit: Moving from a Bootstrap Layout to CSS Grid by Bob Visser. In his article he explains how to do what Bootstrap does, but without needing a ton of CSS and media queries and utility classes.

My first thought was that I would probably need the utility classes. I thought I'd write the layout system in a generic fashion, which I could then use in all my projects, and then just import it and use my utility classes. My attempts at doing that were unfruitful though.

After changing my mindset a bit and reading Bob Visser's article though, I realized that all of that work is actually unnecessary. CSS grid will allow me to define named sections of the page in a grid, e.g. "topmenu", "sidemenu", "maincontent", "footer", and then define whatever arrangement I need.

I am free to put media queries with breakpoints in there, so that I can control how the grid will adjust to different screen sizes, which may sounds tedious, but the key result is that I am actually separating the layout from the content, which is a huge win. Instead of muddying my HTML with a lot of utility classes, I can simply specify which section of the grid the HTML element belongs to, and then let CSS handle the rest.

And example of such a grid with media queries could look like this:

/* Default grid arrangement */
.grid {
  display: grid;
  grid-template-areas:
    "topmenu topmenu topmenu"
    "sidemenu maincontent maincontent"
    "sidemenu footer footer";
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr auto;
}

/* 
 * Media query for smaller screens
 * Adjusts the layout to a single column
 */
@media (max-width: 800px) {
  .grid {
    grid-template-areas:
      "topmenu"
      "maincontent"
      "sidemenu"
      "footer";
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto auto;
  }
}

Then I can create simple helper classes to assign elements to the grid areas:

.topmenu {
  grid-area: topmenu;
}
.sidemenu {
  grid-area: sidemenu;
}
.maincontent {
  grid-area: maincontent;
}
.footer {
  grid-area: footer;
}

And then in my HTML, I can use these classes to assign elements to the grid areas:

<div class="grid">
  <div class="topmenu">Top Menu</div>
  <div class="sidemenu">Side Menu</div>
  <div class="maincontent">Main Content</div>
  <div class="footer">Footer</div>
</div>

Later on, I can add more media queries to adjust the layout for different screen sizes, but the key is that I am not using a ton of utility classes to control the layout. Instead, I am defining the layout in CSS and simply assigning elements to the grid areas. Awesome!

For an interactive sample of this code, you can check out this CodePen example.

This is just scratching the surface of course, and there is a lot more to response websites than simply arrangements in a grid. Stuff like typography and accessibility are extremely important, and I will have to learn more about those as well. But I feel like I am finally on the right track to understanding CSS well enough to create responsive layouts without relying on a framework like Bootstrap, and I'd encourage all curious web developers to try it out.

For a complete reference on CSS Grid, CSS-tricks is your friend: CSS Grid Layout: A Complete Guide.