Old school D3 from simpler times

All examples By author By category About

sethkontny

Full window Github gist

A Pen by zessx.

<header>
  <h1><a href="https://smarchal.com/24ss/"><img src="https://smarchal.com/24ss/assets/logo-white.png" alt="24SSgrid" height="150" /></a></h1>
  <h2>A 24-col solid grid for SASS</h2>
</header>

<section id="example">
  <div class="container">

<div class="row debug">

<h2>Basic usage</h2>

<div class="col col-12"></div>
      <div class="col col-12"></div>

<div class="col col-6"></div>
      <div class="col col-6"></div>
      <div class="col col-6"></div>
      <div class="col col-6"></div>

<div class="col col-3"></div>
      <div class="col col-3"></div>
      <div class="col col-3"></div>
      <div class="col col-3"></div>
      <div class="col col-3"></div>
      <div class="col col-3"></div>
      <div class="col col-3"></div>
      <div class="col col-3"></div>

<div class="col col-4"></div>
      <div class="col col-4"></div>
      <div class="col col-4"></div>
      <div class="col col-4"></div>
      <div class="col col-4"></div>
      <div class="col col-4"></div>

<div class="col col-3"></div>
      <div class="col col-3"></div>
      <div class="col col-3"></div>
      <div class="col col-3"></div>
      <div class="col col-3"></div>
      <div class="col col-3"></div>
      <div class="col col-3"></div>
      <div class="col col-3"></div>

<div class="col col-2"></div>
      <div class="col col-2"></div>
      <div class="col col-2"></div>
      <div class="col col-2"></div>
      <div class="col col-2"></div>
      <div class="col col-2"></div>
      <div class="col col-2"></div>
      <div class="col col-2"></div>
      <div class="col col-2"></div>
      <div class="col col-2"></div>
      <div class="col col-2"></div>
      <div class="col col-2"></div>

<div class="col col-1"></div>
      <div class="col col-1"></div>
      <div class="col col-1"></div>
      <div class="col col-1"></div>
      <div class="col col-1"></div>
      <div class="col col-1"></div>
      <div class="col col-1"></div>
      <div class="col col-1"></div>
      <div class="col col-1"></div>
      <div class="col col-1"></div>
      <div class="col col-1"></div>
      <div class="col col-1"></div>
      <div class="col col-1"></div>
      <div class="col col-1"></div>
      <div class="col col-1"></div>
      <div class="col col-1"></div>
      <div class="col col-1"></div>
      <div class="col col-1"></div>
      <div class="col col-1"></div>
      <div class="col col-1"></div>
      <div class="col col-1"></div>
      <div class="col col-1"></div>
      <div class="col col-1"></div>
      <div class="col col-1"></div>

<p class="cf">&nbsp;</p>
      <h2>Offsets</h2>

<div class="col col-12 offset-6 clear"></div>

<div class="col col-8 offset-4"></div>
      <div class="col col-8 clear"></div>

<div class="col col-4 offset-1"></div>
      <div class="col col-4 offset-2"></div>
      <div class="col col-4 offset-2"></div>
      <div class="col col-4 offset-2 clear"></div>

<p class="cf">&nbsp;</p>
      <h2>Nested columns</h2>

<div class="col col-6"></div>
      <div class="col col-18">
        <div class="col col-6"></div>
        <div class="col col-6"></div>
        <div class="col col-6"></div>
      </div>

<div class="col col-6"></div>
      <div class="col col-12">
        <div class="col col-4"></div>
        <div class="col col-4"></div>
        <div class="col col-4"></div>
      </div>
      <div class="col col-6"></div>

<div class="col col-6"></div>
      <div class="col col-12">
        <div class="col col-4">
          <div class="col col-2"></div>
          <div class="col col-2"></div>
        </div>
        <div class="col col-4">
          <div class="col col-1"></div>
          <div class="col col-2"></div>
          <div class="col col-1"></div>
        </div>
        <div class="col col-4">
          <div class="col col-1"></div>
          <div class="col col-1"></div>
          <div class="col col-1"></div>
          <div class="col col-1"></div>
        </div>
      </div>
      <div class="col col-6"></div>

<p class="cf">&nbsp;</p>
      <h2>Nested columns + offsets</h2>

<div class="col col-6"></div>
      <div class="col col-12">
        <div class="col col-8 offset-2"></div>
      </div>
      <div class="col col-6"></div>

<div class="col col-24">
        <div class="col col-12 offset-6">
          <div class="col col-1 offset-1"></div>
          <div class="col col-6 offset-1">
            <div class="col col-2 offset-1"></div>
            <div class="col col-2"></div>
          </div>
          <div class="col col-1 offset-1"></div>
        </div>
      </div>

<div class="col col-4 offset-1">
        <div class="col col-1"></div>
      </div>
      <div class="col col-4 offset-2">
        <div class="col col-1 offset-1"></div>
      </div>
      <div class="col col-4 offset-2">
        <div class="col col-1 offset-2"></div>
      </div>
      <div class="col col-4 offset-2">
        <div class="col col-1 offset-3"></div>
      </div>

</div>

</div>
</section>