Grid

The Basecoat grid is designed to be both simple and flexible.

Containers
Grid
Vertically Centered Alternating Sections

Containers

Containers widths are defined in _grid.scss, and give elements a max-with and padding on the right and the left. To make a container centered on the page, you can give it the utility class .mx-auto.

[class*="container"] {
  width: 100%;
  padding-left: 20px; //not using spacer values here so that it matches the site
  padding-right: 20px;
}

.container {
  max-width: 1020px;
}

.container-narrow {
  max-width: 760px;
}

.container-wide {
  max-width: 1260px;
}

Grid

The Basecoat grid is 12-columns. Columns need to be put in a .clearfix container. Then you can specify how many rows you want your column to span at various screensizes. If you do not specify, it will default to full-width.

.col-6 .col-md-3

<div class="clearfix">
  <div class="col-6 col-md-3 mb-3">
    <div class="border bg-gray-light p-3">.col-6 .col-md-3</div>
  </div>
  <div class="col-6 col-md-3 mb-3">
    <div class="border bg-gray-light p-3">.col-6 .col-md-3</div>
  </div>
  <div class="col-6 col-md-3 mb-3">
    <div class="border bg-gray-light p-3">.col-6 .col-md-3</div>
  </div>
  <div class="col-6 col-md-3 mb-3">
    <div class="border bg-gray-light p-3">.col-6 .col-md-3</div>
  </div>
</div>

Gutters

To add gutters to your grid, simply add a gutter class to your grid container. There are three gutter classes, which correspond to the spacer variables: .gut-1, .gut-2, & .gut-3.

.col-6 .col-md-3

<div class="clearfix gut-3">
  <div class="col-6 col-md-3 mb-3">
    <div class="border bg-gray-light p-3">.col-6 .col-md-3</div>
  </div>
  <div class="col-6 col-md-3 mb-3">
    <div class="border bg-gray-light p-3">.col-6 .col-md-3</div>
  </div>
  <div class="col-6 col-md-3 mb-3">
    <div class="border bg-gray-light p-3">.col-6 .col-md-3</div>
  </div>
  <div class="col-6 col-md-3 mb-3">
    <div class="border bg-gray-light p-3">.col-6 .col-md-3</div>
  </div>
</div>

Offset

You can offset columns by using and offest class. Like the classes for columns, there are responsive versions.

.col-6 .col-md-3

.offset-3 .col-3

.col-6

<div class="clearfix gut-2 mb-3">
  <div class="col-6 col-md-3">
    <div class="border bg-gray-light p-3">.col-6 .col-md-3</div>
  </div>
  <div class="col-6 col-md-3">
    <div class="border bg-gray-light p-3">.col-6 .col-md-3</div>
  </div>
  <div class="col-6 col-md-3">
    <div class="border bg-gray-light p-3">.col-6 .col-md-3</div>
  </div>
  <div class="col-6 col-md-3">
    <div class="border bg-gray-light p-3">.col-6 .col-md-3</div>
  </div>
</div>
<div class="clearfix gut-2">
  <div class="offset-3 col-3">
    <div class="border bg-gray-light p-3">.offset-3 .col-3</div>
  </div>
  <div class="col-6">
    <div class="border bg-gray-light p-3">.col-6</div>
  </div>
</div>

Nesting

Grids can be nested into other Grids.

col-6 col-md-3

<div class="clearfix gut-2">
  <div class="col-6 mb-3">
    <div class="border bg-gray-light p-3">col-6 col-md-3</div>
  </div>
  <div class="col-6 mb-3">
    <div class="clearfix gut-2">
      <div class="col-6 mb-3">
        <div class="border p-3">col-6 col-md-3</div>
      </div>
      <div class="col-6 mb-3">
        <div class="border p-3">col-6 col-md-3</div>
      </div>
    </div>
  </div>
</div>

Vertically Centered Alternating Sections

Follow open source projects

Learn how developers build and maintain open source software. You can watch a project that interests you to see its progress as it happens.

Experiment with technologies

You don’t have to build everything from scratch. Make copies of your favorite projects, and tailor tools and features to meet your needs. I'm going to add to this paragraph so that it is really long and we can prove a point about how this can be vertically aligned. Is it working?

Another paragraph that gets pretty long may show how the illustration to the left of these words will stay vertically centered no matter how long this content gets. It uses display:table instead of Flexbox. Can you believe it? Welcome to 2004.

Contribute your skills

Make a suggestion, fix a bug, or contribute code to a project. Even asking questions or improving documentation helps.

<div class="container">
  <div class="row vertically-centered columns-reverse">
    <div class="col-xs-12 col-md-6">
      <img src="https://octodex.github.com/images/daftpunktocat-thomas.gif" alt="" class="img-fluid">
    </div>
    <div class="col-xs-12 col-md-6">
      <h3 class="display-heading-3">Follow open source projects</h3>
      <p>Learn how developers build and maintain open source software. You can watch a project that interests you to see its progress as it happens.</p>
    </div>
  </div>
  <hr class="">
  <div class="row vertically-centered">
    <div class="col-xs-12 col-md-6">
      <img src="https://octodex.github.com/images/daftpunktocat-thomas.gif" alt="" class="img-fluid">
    </div>
    <div class="col-xs-12 col-md-6">
      <h3 class="display-heading-3">Experiment with technologies</h3>
      <p>You don’t have to build everything from scratch. Make copies of your favorite projects, and tailor tools and features to meet your needs.</p>
    </div>
  </div>
  <hr class="">
  <div class="row vertically-centered columns-reverse">
    <div class="col-xs-12 col-md-6">
      <img src="https://octodex.github.com/images/daftpunktocat-thomas.gif" alt="" class="img-fluid">
    </div>
    <div class="col-xs-12 col-md-6">
      <h3 class="display-heading-3">Contribute your skills</h3>
      <p>Make a suggestion, fix a bug, or contribute code to a project. Even asking questions or improving documentation helps.</p>
    </div>
  </div>
</div>