mirisuzanne

<div class="container">
     <div class="test">hello</div>
     <div class="test2">hello</div>
     <div class="test">hello</div>
</div>

mirisuzanne

<div class="page">
  <header class="banner">
    <p>Banner</p>
  </header>
  <nav class="pagenav">
    <p><a href="#">Page Nav</a></p>
  </nav>
  <main class="main">
    <aside class="summary">
      <p>Summary</p>

mirisuzanne

<div class="container">
  <input type="checkbox" id="left" class="toggle-input show-left" />
  <input type="checkbox" id="right" class="toggle-input show-right" />
  <header>
    <label for="left" class="toggle">show-left</label>
    <label for="right" class="toggle">show-right</label>
    <h1>header</h1>
  </header>
  <div class="left" id="left">left</div>
  <div class="main">main</div>

mirisuzanne

<div class="page">
  <header class="banner">
    <p>Banner</p>
  </header>
  <nav class="pagenav">
    <p><a href="#">Page Nav</a></p>
  </nav>
  <main class="main">
    <aside class="summary">
      <p>Summary</p>

mirisuzanne

<div class="newApp">
  <div class="rounded">
    <ul>
    {{#each tasksToDo}}
        {{>task}}
    {{/each}}
    </ul>
  </div>

  <div class="rounded2">

mirisuzanne

Any span in Susy potentially has 1 or 2 attached side gutters. A default Susy span doesn't include any of these, but margins/padding often do include them, and it is sometimes useful to span more gutters than the default. The three options are no-side-gutters (most common), 1-side-gutter (somewhat common), or 2-size-gutters (least common). This is true whether you have the gutters inside (as padding) or outside (as margins):

Susy 1, and all the Susy 2 alphas so far have only supported the first 2 options:

Susy 1.x

• width-1: columns() [function]
• width-2: space() [function]

mirisuzanne

@import "breakpoint";
@import "susy";

// The expanded syntax allows you to use any breakpoints along with any possible grid settings.
// Very powerful, but also a bit verbose.

// at-breakpoint(30em 8)
@include breakpoint(30em) {
  @include use-grid(8) {
    // your 8-column layout with a min-width of 30em

mirisuzanne

// a map!
$map: (
  1: hello, 
  2: world,
);

// a map-set function (not included with Sass)
@function map-set($map, $key, $value) {
  $new: ($key: $value);
  @return map-merge($map, $new);

mirisuzanne

// ----------------------------------------------
// I want to define the important layout settings

// $columns: <integer> | <list>;
$columns: 12;

// $gutters: <ratio>;
$gutters: .25;

// $column-width: auto | <length>;

mirisuzanne

Hide/show tab content

• keep the container flexible, so it wraps all the tabs.
• keep the container equal-height across tabs

The container will always wrap the largest tab, with no JS required. I use radio-buttons to toggle, keeping everything in CSS - see ericam/accoutrement for the full tab-toggling code.