AllThingsSmitty / thug-grids

Simple, flexible, Sass-based so you can responsive grid system like you give a fuck

Thug CSS Framework

• Fully fucking responsive
• Mobile first
• Infinitely nestable
• Reversible/reorderable
• With/without gutters, whatev
• Endless possible combinations
• Simple to understand, human-friendly classes, fuckin'-A!
• Option to keep classes out of your HTML
• Robust
• Simple
• No .clear or .last shit
• It just works, mofo

See Responsive grid systems; a solution? for a comprehensive overview of the principles of the grid system.

Props

• Mad props go out to Harry Roberts and his csswizardry-grids project which is this "loosely" based on 😉 cuz he's a motherfucking CSS genius yo.

Setup

Simply fill in/adjust the relevant variables.

• $responsive is used to turn thug-grids's responsive features on and off. thug-grids is designed primarily for responsive builds but can also be used on non-responsive projects just as easily. Setting this to false will simply prevent Sass generating your palm, etc. modifiers.
• $gutter controls how much space there is between columns.
• $mobile-first controls whether you would like unclassed grid items to initially adopt `width:100%;. This means that you won't need to add a class to force a grid item to take up the full width of its container.
• $use-silent-classes tells thug-grids whether to go ahead and compile solid, traditional classes (e.g. .one-whole) or to create Sass 'silent' classes which only compile to CSS once explictly called.
• $lap-start and $desk-start tell thug-grids when to fire particular media queries to service those particular sizes. Note that thug-grids works out the ends of any other breakpoints by using these numbers.

Usage

thug-grids is incredibly simple to implement, its classes are all human-readable and follow the same pattern.

Patterns

thug-grids's classes are based on a modified BEM syntax. Yo, BEM is the shit!

• .grid is a Block
• .grid__item is an Element
• .grid--rev is a Modifier

Classes include your breakpoint namespaces (e.g. .palm--one-half, .desk--two-thirds and so on); your push and pull classes (.push--one-third, .pull--desk--one-quarter and so on); your regular classes (.one-tenth, .three-quarters etc).

Knowing these patterns will allow you to create hundreds of different combinations. A few examples:

  /**
   * Sets an item to be one half across all breakpoints.
   */
  .one-half{}

  /**
   * Pushes an item one third of the way to the right across all breakpoints.
   */
  .push--one-third{}

  /**
   * Sets an item to be ten twelfths wide only at the desk breakpoint.
   */
  .desk--ten-twelthfs{}

  /**
   * Pulls an item one half of the way to the left only at the palm breakpoint.
   */
  .pull--palm--one-half{}

Classes in markup

If you are using traditional classes then an example, basic usage might look like this:

<div class="grid">

  <div class="grid__item  lap--one-half  desk--two-thirds">
    ...
  </div>
  <!--

  -->
  <div class="grid__item  lap--one-half  desk--one-third">
    ...
  </div>

</div>

It's as simple as that!

---

Note the empty HTML comments. These are to remove whitespace caused by using inline-block.

If you'd rather not use HTML comments to remove the whitespace then you can set the $use-markup-fix variable to false; this invokes a CSS hack that cannot be guaranteed. Always take care to check things over if using this method.

If you need to use thug-grids with a CMS, or data coming out of a loop, you will need to format your template something a little like this:

<div class="grid">
<!--
 
  <?php
    $items = array('foo', 'bar', 'baz');

    foreach ($items as $item) {
  ?>
  
-->
<div class="grid__item  one-third">
  <?= $item ?>
</div>
<!--

  <?php
      }
  ?>
  
-->
</div>

Note the opening and closing comments before and after the loop, and the corresponding opening and closing comments facing outward from the .grid__item element. Try pasting the above into the codepad code runner: items from a loop without the need for a counter :)

---

Sass's silent classes

If you are using silent classes ($use-silent-classes: true;) then your HTML might look like this:

<div class="page">

  <div class="content">
    ...
  </div>
  <!--

  -->
  <div class="sub-content">
    ...
  </div>

</div>

...and your Sass, something like this:

.page {
    @extend %grid;
}

.content,
.sub-content{
  @extend %grid__item;
  @extend %one-whole;
  @extend %lap--one-half;
}

.content{
  @extend %desk--two-thirds;
}

.sub-content{
  @extend %desk--one-third;
}

Reversed grids (.grid--rev{})

thug-grids has the option to reverse a set of grids; this means that the order you write your source and the order it renders are total opposites, for example:

<div class="grid  grid--rev">

  <div class="main-content  grid__item  two-thirds">
    I appear first in the markup, but render second in the page.
  </div>
  <!--

  -->
  <div class="sub-content  grid__item  one-third">
    I appear second in the markup, but render first in the page.
  </div>

</div>

This is handy if you want to lay out your page a certain way visually but it would be advantageous to order the source differently, for example to aid accessibility (getting a screenreader to read more important content first).

Gutterless grids (.grid--full{})

It may be desirable at times to have no gutter between your grid items; with thug-grids this is as simple as:

<div class="grid  grid--full">

  <div class="grid__item  one-half">
    Look, ma! No gutter!
  </div>
  <!--

  -->
  <div class="grid__item  one-half">
    Look, ma! No gutter!
  </div>

</div>

Right-aligned grids (.grid--right{})

Keep grids in their correct order, but have them flush right instead of left:

<div class="grid  grid--right">

  <div class="grid__item  one-quarter">
    I render first but start in the middle of the page.
  </div>
  <!--

  -->
  <div class="grid__item  one-quarter">
    I render second and appear at the very right edge of the page.
  </div>

</div>

Centred grids (.grid--center{})

You can centrally align your grids by simply using the .grid--center modifier:

<div class="grid  grid--center">

  <div class="grid__item  one-half">
    I'm in the middle!
  </div>

</div>

Vertically aligned grids (.grid--[middle|bottom]{})

You can vertically align your grids to each other by simply using the .grid--[middle|bottom] modifiers:

<div class="grid  grid--middle">

  <div class="grid__item  one-half">
    I'm in the middle!
  </div>

  <div class="grid__item  one-half">
    I'm in the middle!
  </div>

</div>

Different sized grids (.grid--[narrow|wide]{})

You can quickly alter the gutter size of your grids to half (.grid--narrow) or double (.grid--wide) by using the relevant modifiers.

<div class="grid  grid--narrow">

  <div class="grid__item  one-half">
    I'm a narrow-guttered grid.
  </div>

  <div class="grid__item  one-half">
    I'm a narrow-guttered grid.
  </div>

</div>

Help and questions

If you have any trouble setting thug-grids up, or would like some help using and implementing it (or any questions about how it works) then please feel free to fire me a tweet or open an issue.

thug-grids's Sass can look a little daunting, but it's doing quite a lot of work behind the scenes to make it as simple as possible when it comes to implementation.