Layout with Susy

index.html

<!-- HTML -->
<header class="site-header">
<div class="wrap">
  <div class="logo">
    <a href="#">Logo</a>
  </div>
  <nav>
    <ul>
      <li><a href="#">item01</a></li>
      <li><a href="#">item02</a></li>
      <li><a href="#">item03</a></li>
      <li><a href="#">item04</a></li>
      <li><a href="#">item05</a></li>
    </ul>
  </nav>
 </div> <!--End of Wrap -->
</header>

<div class="site-inner">
  <div class="wrap">
    <main class="content">
      <h2>Gallery Content</h2>
        <ul class="gallery">
          <li class="gallery-item"><img src="http://www.placehold.it/300x300" a
          lt=""></li>
          <li class="gallery-item"><img src="http://www.placehold.it/300x300" a
          lt=""></li>
          <li class="gallery-item"><img src="http://www.placehold.it/300x300" a
          lt=""></li>
          <li class="gallery-item"><img src="http://www.placehold.it/300x300" a
          lt=""></li>
          <li class="gallery-item"><img src="http://www.placehold.it/300x300" a
          lt=""></li>
          <li class="gallery-item"><img src="http://www.placehold.it/300x300" a
          lt=""></li>
          <li class="gallery-item"><img src="http://www.placehold.it/300x300" a
          lt=""></li>
          <li class="gallery-item"><img src="http://www.placehold.it/300x300" a
          lt=""></li>
          <li class="gallery-item"><img src="http://www.placehold.it/300x300" a
          lt=""></li>
          <li class="gallery-item"><img src="http://www.placehold.it/300x300" a
          lt=""></li>
          <li class="gallery-item"><img src="http://www.placehold.it/300x300" a
          lt=""></li>
          <li class="gallery-item"><img src="http://www.placehold.it/300x300" a
          lt=""></li>
          <li class="gallery-item"><img src="http://www.placehold.it/300x300" a
          lt=""></li>
          <li class="gallery-item"><img src="http://www.placehold.it/300x300" a
          lt=""></li>
          <li class="gallery-item"><img src="http://www.placehold.it/300x300" a
          lt=""></li>
          </ul>

    </main>
    <aside class="sidebar">
      <h2>Sidebar</h2>
      <ul>
        <li><a href="#">A link to someplace else</a></li>
        <li><a href="#">A link to someplace else</a></li>
        <li><a href="#">A link to someplace else</a></li>
        <li><a href="#">A link to someplace else</a></li>
        <li><a href="#">A link to someplace else</a></li>
      </ul>

    </aside>
  </div>
</div>
<footer class="site-footer">
  <div class="wrap">
    <div class="widget"><h2>Widget</h2></div>
    <div class="widget"><h2>Widget</h2></div>
    <div class="widget"><h2>Widget</h2></div>
    <div class="widget"><h2>Widget</h2></div>

  </div>
</footer>

Layout-with-Susy.markdown

Layout with Susy

Practice layout with Susy - Logo, Nav, Gallery, Sidebar and Footer

A Pen by Irina Blumenfeld on CodePen.

License.

style.scss

@mixin cf {
  &:after {
    content: " ";
    display: block;
    clear: both;
  }
}

@import 'susy';

h2 {
  padding: 1rem 0;
  text-align: center;
  color: #555;
}
ul, ol {
  margin: 0;
  padding: 0;
}
img {
  max-width: 100%;
  height: auto;
}
.site-header,.site-footer {
  background: rgba(234, 159, 195, 0.8);
}
.site-header {
  a {color: #555;
    text-decoration: none;
  }
}
.logo {
  float: left;
  line-height: 2rem;
  font-size: 1.5rem;
}
nav {
  float: right;
  li {
    list-style: none;
    float: left;
    margin-left: 1em;
    line-height: 2rem;
  }
}
.content {
  margin-top: 5vh;
  padding-bottom: 1rem;
  background: rgba(113, 218, 210, 0.8);
}
.sidebar {
  margin-top: 5vh;
  background: rgba(250, 231, 179, 0.8);
  padding-bottom: 1rem;
  li {
    list-style: none;
    a {
      color: #666;
      padding-left: 1rem;
      line-height: 2;
      text-decoration: none;
    }
  }
}
.widget {
  background: rgba(240, 150, 113, 0.8);
}
.site-footer {
  margin-top: 5vh;
}

//GRID

$susy: (
  columns: 16,
  global-box-sizing: border-box,
  debug: (image: show)
);
.wrap {
  @include container(1140px);
  
}
.content {
  @include span( 12 of 16 );
  @include cf;
}
.sidebar {
  @include span( 4 of 16 last );
  @include cf;
}
.gallery {
  @include cf;
  width: span(10 of 12);
  margin-left: auto;
  margin-right: auto;
}
.gallery-item {
  list-style: none;
  margin-bottom: gutter(10);
  @include gallery(2 of 10);
  :nth-child(5n) {
    @include last;
  }
}

.widget {
  @include gallery(4);
}