Susy grid exemple setting

8/8/2014 - 6:55 AM

body {
  font-family: helvetica;
}

header {
  height: 150px;
  background: #2F94B2;
  margin-bottom: 10px;
}

header h1 {
  margin: 10px;
}

.hero {
  height: 100px;
  margin-bottom: 10px;
}

.hero h3, .hero h2 {
  margin: 10px;
}

.hero .one {
  background: #FF739C;
  height: 100%;
}

.hero .two {
  height: 100%;
}

.hero .two div {
  height: 100%;
  background: #CCC136;
}

.content h3 {
  margin: 10px;
}

.content div {
  height: 100px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.content div:nth-child(3n) {
  background: #2F94B2;
}

.content div:nth-child(3n+1) {
  background: #FF7311;
}

.content div:nth-child(3n+2) {
  background: #5DD9FF;
}

.page {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.page:after {
  content: " ";
  display: block;
  clear: both;
}

header {
  clear: both;
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}

.hero {
  clear: both;
}

.hero .one {
  width: 30.43478%;
  float: left;
  margin-right: 4.34783%;
}

.hero .two {
  width: 65.21739%;
  float: right;
  margin-right: 0;
}

.hero .two div:nth-child(4n+1) {
  clear: both;
  width: 20%;
  float: left;
  margin-right: 6.66667%;
}

.hero .two div:nth-child(4n+2) {
  width: 20%;
  float: left;
  margin-right: 6.66667%;
}

.hero .two div:nth-child(4n+3) {
  width: 20%;
  float: left;
  margin-right: 6.66667%;
}

.hero .two div:nth-child(4n) {
  width: 20%;
  float: right;
  margin-right: 0;
}

.hero .two div:nth-child(4) {
  width: 20%;
  float: right;
  margin-right: 0;
}

.content div {
  width: 30.43478%;
  float: left;
}

.content div:nth-child(3n + 1) {
  margin-left: 0;
  margin-right: -100%;
  clear: both;
  margin-left: 0;
}

.content div:nth-child(3n + 2) {
  margin-left: 34.78261%;
  margin-right: -100%;
  clear: none;
}

.content div:nth-child(3n + 3) {
  margin-left: 69.56522%;
  margin-right: -100%;
  clear: none;
}

susy-grid-setting.scss

// ----
// libsass (v3.5.0.beta.2)
// ----



@import "susy";

$susy: (
  flow: ltr, // ltr | rtl
  output: float, // float | isolate
  math: fluid, // fluid | static (requires column-width)
  column-width: 40px, // false | value
  container: auto, // length or % | auto
  container-position: center, // left | center | right | <length> [*2] (grid padding)
  last-flow: to,
  columns: 12,
  gutters: 1,
  gutter-position: after, // before | after | split | inside | inside-static (requires column-width)
  global-box-sizing: content-box, // content-box | border-box (affects inside/inside-static)
  debug: (
    image: hide,
    color: rgba(#66f, .25),
    output: background, // background | overlay
    toggle: top right,
  ),
  use-custom: (
    background-image: true, // look for background-image mixin
    background-options: false, // look for background-size, -origin and -clip and other compass/bourbon mixins
    box-sizing: true, // look for custom bix sizing mixin
    clearfix: false, // true = look for internal clearfix before using micro clearfix
    rem: true, // look for rem mixin
  )
);













body {
  font-family: helvetica;
}

header {
  height: 150px;
  background: #2F94B2;
  margin-bottom: 10px;
  h1 {
    margin: 10px;
  }
}

.hero {
  height: 100px;
  margin-bottom: 10px;
  h3, h2 {
    margin: 10px;
  }
  .one {
    background: #FF739C;
    height: 100%;
  }
  .two {
    height: 100%;
    div {
      height: 100%;
      background: #CCC136;
    }
  }
}

.content {
  h3 {
    margin: 10px;
  }
  div {
    height: 100px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  div:nth-child(3n) {
     background: #2F94B2;
  }
  div:nth-child(3n+1) {
     background: #FF7311;
  }
  div:nth-child(3n+2) {
     background: #5DD9FF;
  }
}

////  GRID

.page {
  @include container;
}

header {
  @include full;
}

.hero {
  clear: both;
  .one {
    @include span(first 4);
  }
  .two {
    @include span(last 8  nest);
    div:nth-child(4n+1) {
      clear: both;
      @include span(2 at 1 of 8);
    }
    div:nth-child(4n+2) {
      @include span(2 at 3 of 8);
    }
    div:nth-child(4n+3) {
      @include span(2 at 5 of 8);
    }
    div:nth-child(4n) {
      @include span(last 2 of 8);
    }
    div:nth-child(4) {
      @include span(last 2 of 8);
    }
  }
}

.content {
  div {
      @include gallery(4);
  }
}

susy-grid-setting.html

<div class="page">
    <header>
      <h1>Hello I'm The Header</h1>
    </header>
    <div class="hero">
      <div class="one">
        <h2>I'm by myself</h2>
      </div>
      <div class="two">
        <div><h3>I'm 1</h3></div>
        <div><h3>I'm 2</h3></div>
        <div><h3>I'm 3</h3></div>
        <div><h3>I'm 4</h3></div>
      </div>
    </div>
    <div class="content">
      <div><h3>I'm 1</h3></div>
      <div><h3>I'm 2</h3></div>
      <div><h3>I'm 3</h3></div>
      <div><h3>I'm 4</h3></div>
      <div><h3>I'm 5</h3></div>
      <div><h3>I'm 6</h3></div>
    </div>
  </div>

susy-grid-setting.css

body {
  font-family: helvetica;
}

header {
  height: 150px;
  background: #2F94B2;
  margin-bottom: 10px;
}
header h1 {
  margin: 10px;
}

.hero {
  height: 100px;
  margin-bottom: 10px;
}
.hero h3, .hero h2 {
  margin: 10px;
}
.hero .one {
  background: #FF739C;
  height: 100%;
}
.hero .two {
  height: 100%;
}
.hero .two div {
  height: 100%;
  background: #CCC136;
}

.content h3 {
  margin: 10px;
}
.content div {
  height: 100px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.content div:nth-child(3n) {
  background: #2F94B2;
}
.content div:nth-child(3n+1) {
  background: #FF7311;
}
.content div:nth-child(3n+2) {
  background: #5DD9FF;
}

.page {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.page:after {
  content: " ";
  display: block;
  clear: both;
}

header {
  clear: both;
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}

.hero {
  clear: both;
}
.hero .one {
  width: 30.43478%;
  float: left;
  margin-right: 4.34783%;
}
.hero .two {
  width: 65.21739%;
  float: right;
  margin-right: 0;
}
.hero .two div:nth-child(4n+1) {
  clear: both;
  width: 20%;
  float: left;
  margin-right: 6.66667%;
}
.hero .two div:nth-child(4n+2) {
  width: 20%;
  float: left;
  margin-right: 6.66667%;
}
.hero .two div:nth-child(4n+3) {
  width: 20%;
  float: left;
  margin-right: 6.66667%;
}
.hero .two div:nth-child(4n) {
  width: 20%;
  float: right;
  margin-right: 0;
}
.hero .two div:nth-child(4) {
  width: 20%;
  float: right;
  margin-right: 0;
}

.content div {
  width: 30.43478%;
  float: left;
}
.content div:nth-child(3n + 1) {
  margin-left: 0;
  margin-right: -100%;
  clear: both;
  margin-left: 0;
}
.content div:nth-child(3n + 2) {
  margin-left: 34.78261%;
  margin-right: -100%;
  clear: none;
}
.content div:nth-child(3n + 3) {
  margin-left: 69.56522%;
  margin-right: -100%;
  clear: none;
}

browserslist

> 1%
last 2 versions

SassMeister-rendered.html

<div class="page">
    <header>
      <h1>Hello I'm The Header</h1>
    </header>
    <div class="hero">
      <div class="one">
        <h2>I'm by myself</h2>
      </div>
      <div class="two">
        <div><h3>I'm 1</h3></div>
        <div><h3>I'm 2</h3></div>
        <div><h3>I'm 3</h3></div>
        <div><h3>I'm 4</h3></div>
      </div>
    </div>
    <div class="content">
      <div><h3>I'm 1</h3></div>
      <div><h3>I'm 2</h3></div>
      <div><h3>I'm 3</h3></div>
      <div><h3>I'm 4</h3></div>
      <div><h3>I'm 5</h3></div>
      <div><h3>I'm 6</h3></div>
    </div>
  </div>

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

Susy grid exemple setting