A tiny, opinionated, and aggressive css layout system to outrule unwieldy css framework overlords.

How it works

The class names reflect their width in % (col-50 = 50%). By default, all columns will collapse to 100% width on mobile (any screen under 840px wide). 2 columns are possible on mobile by using the classes .col-50.dont-collapse and col-25.collapse-to-50 col-75.collapse-to-50. If you don't want gutters/gaps use .row.unpadded. All elements inside a column are width:100% blocks unless nested within an inline element like a paragraph.

Usage

<section>
  <div class="container-small">
    <div class="row">
      <div class="col-50">
        <img src="img/cool.png" class="fluid-img">
      </div>
      <div class="col-50">
        <h2>Layout</h2>
        <p>
          Descriptions, when well written, are so lovely
        </p>
      </div>
    </div>
  </div>
</section>

Containers

Brute comes with 3 container presets. You can also flex flull width, that goes without saying. The idea is to suggest a set to stick to and avoid inconsistencies while covering most editorial needs.

Keylines

Keylines or borders are great. They create subtle separation between sections. Brute allows only top and bottom on both columns and rows.

Why?

Because there's too many over engineered CSS frameworks. Brute covers 75% of your web design needs. It is the distillation of 10 years building websites that led to this savant mélange of CSS. Restraint and ignorance are keys to understand the brute.