A Pen by Sean Dempsey.

I-prefer-Susyone.markdown

I prefer Susyone

Just a short demo highlighting Codepen's new susy implementation. Still learning "susy" so I thought I'd show everyone how easy susyone is.

A Pen by Sean Dempsey on CodePen.

License.

index.html

<div class="container">
  <h1>I prefer Susy One</h1>
  <h2></h2>
  <p>Resize The viewport! Block content changes "at-breakpoint".</p>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

style.scss

@import "compass/css3";
@import 'susyone';
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro);

@include border-box-sizing;
@include establish-baseline;

@function pxtoem($px, $base: $base-font-size) {
  @return ($px / $base) + 0em;
}

$base-font-size:16px;
$gutter-width: 1em;
$container-width: pxtoem(1200px);

//breakpoints
$iphone-portrait: pxtoem(320px);
$iphone-landscape: pxtoem(480px);
$six-forty: pxtoem(640px);
$ipad-portrait: pxtoem(768px);
$ipad-landscape: pxtoem(1024px);
$twelve-eighty: pxtoem(1280px);
$fourteen-hundred: pxtoem(1400px);

$blue: #1f7482;
$cream: #faf0e0;
$emerald: #048f69;

$colors: (
  body-bg: $blue,
  body-copy: $cream,
  block-bg: $emerald,
  block-border: darken($emerald, 20%)
);

body {
  background-color: map-get($colors, body-bg);
  color: map-get($colors, body-copy);
  font-family: 'Source Code Pro', sans-serif;
  width:100%;
}

h1 {
  font-size: pxtoem(40px);
}

h2 {
  font-size: pxtoem(28px);
  
  &:after {
    content: "Viewport < 768";
  }
  
  @include at-breakpoint($ipad-portrait) {
    &:after {
     content: 'Viewport > 768 && Viewport < 1280';
    }    
  }
  
  @include at-breakpoint($twelve-eighty) {
    &:after {
      content: 'Viewport >= 1280';
    }
  }
}

.container {
  @include container;
}

.block {
  width:100%;
  background-color: map-get($colors, block-bg);
  border: 2px solid map-get($colors, block-border);
  padding:5px;
  margin-bottom:$gutter-width;
  @include transition(width 0.75s ease);
  
  &:after {
    content:"We're all 100% width";
  }
  
  @include at-breakpoint($ipad-portrait) {
    @include span-columns(4,12);
    @include nth-omega(3n);
    
      &:after {
      content:"We're three columns wide!";
    }
  }
  
  @include at-breakpoint($twelve-eighty) {
    @include remove-nth-omega(3n);
    @include span-columns(1, 12);
    
    &:after {
      content:"We're one column wide!";
    }
  }
}

p {
  background-color: map-get($colors, block-bg);
  border: 2px solid map-get($colors, block-border);
  padding:5px;
  margin-bottom: $gutter-width;
}