BYO Bootstrap Grid07/30/2016

There will always be a need for small projects or prototypes. If you're using Bootstrap as a foundation for your project, more than likely you're probably using it primarily for it's grid. The grid system is a great way to layout your websites and/or web-apps, but you don't have to rely on Bootstrap to accomplish that. It's often more practical to build your own grid stylesheet if you're building a small website, prototype or, single page app. Now then, let's build our own Bootstrap inspired grid to make our projects more light-weight

The Concept

The grid, a digital frontier. Now that you're listening to that song, let me explain the concept of the grid to you, I'll keep it short and sweet. You can think of a grid in terms of tables since they share similar concepts. A table will contain rows stacked on top each other, inside each row there could be an infinite number of columns (don't worry though, a minimal website or web-app would usually need around twelve to sixteen).

The Grid

To achieve a basic grid, we will need to create the following css rules: .row and .column. You should also consider making a .container but for our purposes we'll just assume the body will contain your grid.

The Row

A row is a horizontal, full width block that nests columns. Because we know this concept we understand some of the rules that we'll need to apply to the .row class. For example, we already identified a css rule already: width and we there's a display property of block as well. This is why understanding concepts is as important as knowing syntax. The code will end up writing itself.

But I digress, let's start by creating a div with the .row class:

<div class="row">
  I'm a row
</div>

Next, define the .row class in your stylesheet:

.row {
  display: block;
  width: 100%;
}

These are very basic css rules that we added. The display rule allows you to change the display property of your div. By default, divs inherit the block property which stacks elements on top of another in rows. However, it's best practice to set the display property to block so that your row class can be used on any element, not just divs.

Setting the width: 100% just means that your block will stretch the full width of it's parent element, be it the body or some other container you created for your row.

The core of our row has been defined but we're still missing something that will allow our row to function like a table row. Let's use some CSS3 for that:

.row::before {
  display: table;
  content: " ";
}

Using ::before allows us to attach a psuedo-element to our .row element. Essentially we created an invisible element who's display property has been set to table. This is a very neat hack that Bootstrap used to solve containment issues with block elements.

That's pretty much it for the .row element. Let's move on to bigger things, the columns.

The Column

Let's start with the core .column class:

.column {
  display: block;
  position: relative;
  float: left;
  width: 100%;
  padding: 0 1em;
}

Same as with the row, we set the display to block so that any element can inherit that property. Next we set the position of our element relative to it's parent, which in this case will be the row. We float the block to the left so we can give out nested columns some order later on. For now, let's set the width for the primary column to 100%. This is a mobile first approach that will give us full width grid layouts. Finally, the padding will give the our columns some space for the content that will be nested inside. Here's how our grid markup should look now that we've created our core column.

<div class="row">
  <div class="column">
    I'm a full width column inside a row
  </div>
</div>

Column Variety

Now that we have our core column, let's add some more variety. Since our core column is full width by default, lets name the rest of our columns accordingly to describe what they will do. Create the following class names to accompany our core column.

.half.column {
  width: 50%;
}

.third.column {
  width: 33.33333333%;
}

.quarter.column {
  width: 25%;  
}

This should be good enough for a basic grid. You can always go deeper and make a full twelve column grid. To do that you would need to make classes for each column. For example: .sixteenth .eighth .sixth and so on until you reach your desired column count. A lot of frameworks use twelve but lately it seems like sixteen could be preferable since screen sizes are only getting bigger. You'll just need to do some basic math to figure out what class names work for you at this point, or you can go with a simpler .one .two .three approach.

Our grid is mostly complete but we need to make our layout work with our grid. Bootstrap uses another hack to solve the issue of containment I mentioned before. This is where the box-sizing rule comes in. setting our box-sizing to border-box will ignore margins when calculating the widths and heights of elements inside the dom.

* {
  box-sizing: border-box;
}

Make sure you prefix this rule for whatever browser you need. I recommend using an auto-prefixer to take care of that for you. In case you weren't following, here's how our grid stylesheet should look like now:

* {
  box-sizing: border-box;
}

.row {
  display: block;
  width: 100%;
}

.row::before {
  display: table;
  content: " ";
}

.column {
  display: block;
  position: relative;
  float: left;
  width: 100%;
  padding: 0 1em;
}

.half.column {
  width: 50%;
}

.third.column {
  width: 33.33333333%;
}

.quarter.column {
  width: 25%;  
}

Now that we have our grid established, let's make a simple layout to test it out.

The Layout

Since we didn't make a container in this example, our layout will be a row that contains the elements of our page.

<main class="layout row">

  <header class="header column">
    I am a full width layout header
  </header>

  <section class="view column">

    <header class="view-header row">

      <div class="third column">
         I am a third column inside the view header
      </div>

      <div class="third column">
         I am a third column inside the view header
      </div>

      <div class="third column">
         I am a third column inside the view header
      </div>

    </header>

    <article class="view-article row">

      <div class="half column">
         I am a half column inside the view article
      </div>

      <div class="half column">
         I am a half column inside the view article
      </div

    </article>

    <footer class="view-footer row">

      <div class="quarter column">
         I am a quarter column inside the view footer
      </div>

      <div class="quarter column">
         I am a quarter column inside the view footer
      </div>

      <div class="quarter column">
         I am a quarter column inside the view footer
      </div>

      <div class="quarter column">
         I am a quarter column inside the view footer
      </div>

    </footer>

  </section>

  <footer class="footer column">
    I am a full width layout footer
  </footer>

</main>

That's it! You just made a basic grid. This would be a good starting point to making a twelve or sixteen column grid. I'd recommend putting these concepts into practice if you want to learn more about CSS and Front-End Development.

Exercises

Try to experiment with making a full twelve or sixteen column grid using the concepts and examples above. Don't know what to make? Try adding some of these layout features to your grid:

  • Make a layout with a left sidebar.
  • Make a layout with two sidebars and a fixed header.
  • Make a grid of blocks going down the page.
  • Make a newspaper layout with different columns going down the page.

Have Big Dreams?

We can achieve so much more when we work together! Feel free to follow me on social media so we can exchange memes.