A Pen by zessx.

24SSgrid.markdown

24SSgrid

A 24-col solid grid for SASS

A Pen by zessx on CodePen.

License.

index.html

<!-- Extract from http://blog.smarchal.com/24ss -->
<header>
  <h1><a href="http://smarchal.com/24ss/"><img src="http://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">

    <!-- code -->
    <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>

style.scss

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400);

body, html { 
  font-family: 'Source Sans Pro', sans-serif; 
  color: #e74c3c; 
  font-size: 30px; 
  font-weight: 200;
  margin: 0;
}
a { 
  color: #e74c3c; 
  text-decoration: none; 
}
header { 
  text-align: center; 
  position: relative; 
  padding: 10px 0 100px; 
  color: white; 
  background: #e74c3c; 
  
  a { 
    color: white; 
    
    &:hover { 
      text-decoration: none; 
    }
  }
  h1 { 
    font-size: 100px; 
    margin-bottom: 30px; 
    font-weight: 200;
  }
  h2 { 
    font-weight: 200;
  }
}
section { 
  padding: 100px 0;
  width: 800px; 
  margin: 0 auto; 
  overflow: hidden;
  
  p {
    margin-bottom: 10px;
  }
}

/* 24SSgrid */
/* --- Variables --- */
$sg-column-width: 25px;
$sg-gutter-width: 8px;

/* --- Functions --- */
@function sg-width($n) {
        @return $n * $sg-column-width + ($n - 1) * $sg-gutter-width;
}

/* --- Style --- */
.row {
        width: sg-width(24) + 2 * $sg-gutter-width;
        margin: 0 auto;
}
.col {
        width: sg-width(24);
        margin-left: $sg-gutter-width;
        margin-bottom: $sg-gutter-width;
        float: left;

        &.clear + .col {
                clear: left;
        }
        .col {
                margin-bottom: 0;

                &:first-child,
                &.clear + .col {
                        margin-left: 0;

                        @for $i from 1 through 24 {
                                &.offset-#{$i} {
                                        margin-left: sg-width($i) + $sg-gutter-width;
                                }
                        }
                }
        }
        @for $i from 1 through 24 {
                &.col-#{$i} {
                        width: sg-width($i);
                }
                &.offset-#{$i} {
                        margin-left: sg-width($i) + 2 * $sg-gutter-width;
                }
        }
}
.debug .col {
  background: rgba(255, 0, 0, 0.2);
  height: 25px;
}