Generated by SassMeister.com.

SassMeister-input-HTML.html

  <div class="wrap">
    <div class="content intro">
      <h1 class="title">This is Chapparal</h1>
      <h2 class="subtitle">
        Created by Adobe type designer Carol Twombly, Chaparral combines the legibility of slab serif designs popularized in the 19th century with the grace of 16th-century roman book lettering. By Adobe
      </h2>

      <div class="content__left">
        <p>
          The result is a versatile, hybrid slab-serif design, a unique addition to the Adobe Originals family of typefaces. Unlike “geometric” slab serif designs, Chaparral has varying letter proportions that give it an accessible and friendly appearance in all weights from light to bold.
        </p>
      </div>

      <div class="content__right">
        <p>Like the drought-resistant brush that blooms on the arid coastal range near Twombly’s California home, Chaparral’s highly functional design is surprisingly beautiful. Source: adobe.com</p>
      </div>
    </div>


    <div class="content">
      <h3>About the designer: Carol Twombly</h3>
      <div class="content__left">

        <p>
          American calligrapher and type designer, a graduate from Rhode Island School of Design where her professor was Charles Bigelow. Joined the digital typography program at Stanford University, also under Bigelow. Working from the Bigelow & Holmes studio she designed Mirarae, which won her the 1984 Morisawa gold prize. Since 1988 she has been a staff designer at Adobe.
        </p>
      </div>

      <div class="content__right">
        <p>
          During the 1994 ATypI conference in San Francisco, she was awarded the prestigious Prix Charles Peignot, given (occasionally) to outstanding type designers under the age of 35. Source: myfonts.com
        </p>
      </div>
    </div>
  </div>


  <div class="wrap">
    <div class="content">
      <h3>Yet another section </h3>

      <div class="content__left">
        <p>
          In its natural regime, chaparral is characterized by infrequent fires, with intervals ranging between 10–15 years to over a hundred years. Mature chaparral (stands that have been allowed greater intervals between fires) is characterized by nearly impenetrable, dense thickets (except the more open chaparral of the desert). These plants are highly flammable. They grow as woody shrubs with hard and small leaves; are non-leaf dropping (non-deciduous); and are drought tolerant. After the first rains following a fire, the landscape is dominated by soft-leaved non-woody annual plants, known as fire followers, which die back with the summer dry period.
        </p>
      </div>
      <div class="content__right">
        <p>
          Similar plant communities are found in the four other Mediterranean climate regions around the world, including the Mediterranean Basin (where it is known as maquis), central Chile (where it is called matorral), South African Cape Region (known there as fynbos), and in Western and Southern Australia (as kwongan). According to the California Academy of Sciences, Mediterranean shrubland contains more than 20% of the world’s plant diversity. The word chaparral is a loan word from Spanish chaparro, meaning both “small” and “dwarf” evergreen oak, which itself comes from the Basque word txapar, with exactly the same meaning.
        </p>
        <p>
          Conservation International and other conservation organizations consider the chaparral to be a biodiversity hotspot – a biological community with a large number of different species – that are under threat by human activity. Source: Wikipedia
        </p>
      </div>
    </div>
  </div>

SassMeister-input.sass

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Breakpoint (v2.5.0)
// Susy (v2.2.2)
// ----

// For second edition of book, figure out what begins to break for the *large* breakpoint....
//@import "compass"
@import "breakpoint"
@import "susy"
+border-box-sizing

//$susy: ( columns: 1 6.957, gutters: 10/42, output: isolate, global-box-sizing: border-box, debug: (image: show))
$small: (columns: 1 6.857142857, gutter: 10/42, column-width: 42px)
$medium: (columns: 1 1.62962963 6.851851852 1, gutter: 12/54)
$large: (columns: 4.223300971 1 2.495145631 4.038834951 2.553398058, gutter: 32/103)

$susy: layout($small)

// large breakpoint 
$bp-med: 530px
$bp-large: 700px
$bp-xlarge: 1600px

@mixin cf 
  &:after 
    content: ""
    display: table
    clear: both
body
  font-family: sans-serif
  color: rgba(#000, .75)
  line-height: 1.75
  padding: 14.723624851955172% 0
  
.wrap
  // Potential regression with how Show Grid used to work; 
  // You have to explicitly put show + overlay or show to get things to show… :( 
  +container(show)
  +susy-breakpoint($bp-med, $medium)
    +show-grid(show )
    max-width: 100%
  
  +susy-breakpoint($bp-large, $large)
    +show-grid(show)

h1, h2, h3, h4, h5, h6
  font-weight: 400
  margin: 0 
  
h1
  font-size: 7.5vw
  font-style: italic
  line-height: 1
  margin-bottom: 1ex
  
h2
  font-size: 3ex
  margin-bottom: 2ex
  
h3
  text-transform: uppercase
  letter-spacing: 0.1em
  padding: 8ex 0 0 
  
.content__left, .content__right
  clear: both
  //+susy-breakpoint(max-width $bp-med - 1)
  +span(1 last)
    
  +susy-breakpoint($bp-med)
    //+span(1 of (1.62963 6.85185) last)
    //$columns: map-get($medium, columns)
    // get the context
    //$context: nested(2 of $columns at 2)
    // span as usual 
    // even better
    +nested(2 of map-get($medium, columns) at 2)
      +span(1 last)
  
  +breakpoint($bp-large)
    +nested(3 of map-get($large, columns) at 2)
      +span(2 last)
      
  .intro &
    +breakpoint(max-width $bp-med - 1)
      +span(full)

.content_left
  +breakpoint($bp-xlarge)
    +nested(3 of map-get($large,columns) at 2)
      +span(1 at 2)
      
  +breakpoint($bp-xlarge)
    +nested(3 of map-get($large, columns) at 2)
      +span(1 last)

.content
  +cf
  +susy-breakpoint($bp-med, $medium)
    +span(2 at 2)
    
  +susy-breakpoint($bp-large, $large)
    +span(3 at 2)

SassMeister-output.css

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  color: rgba(0, 0, 0, 0.75);
  line-height: 1.75;
  padding: 14.72362% 0;
}

.wrap {
  max-width: 340.5px;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 12.3348%, transparent 12.3348%, transparent 15.4185%, rgba(102, 102, 255, 0.25) 15.4185%, rgba(179, 179, 255, 0.25));
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}
.wrap:after {
  content: " ";
  display: block;
  clear: both;
}
@media (min-width: 530px) {
  .wrap {
    background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 8.90354%, transparent 8.90354%, transparent 11.12943%, rgba(102, 102, 255, 0.25) 11.12943%, rgba(179, 179, 255, 0.25) 25.63891%, transparent 25.63891%, transparent 27.8648%, rgba(102, 102, 255, 0.25) 27.8648%, rgba(179, 179, 255, 0.25) 88.87057%, transparent 88.87057%, transparent 91.09646%, rgba(102, 102, 255, 0.25) 91.09646%, rgba(179, 179, 255, 0.25));
    background-origin: content-box;
    background-clip: content-box;
    background-position: left top;
    max-width: 100%;
  }
}
@media (min-width: 700px) {
  .wrap {
    background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 27.58402%, transparent 27.58402%, transparent 29.21687%, rgba(102, 102, 255, 0.25) 29.21687%, rgba(179, 179, 255, 0.25) 35.74826%, transparent 35.74826%, transparent 37.3811%, rgba(102, 102, 255, 0.25) 37.3811%, rgba(179, 179, 255, 0.25) 53.67787%, transparent 53.67787%, transparent 55.31072%, rgba(102, 102, 255, 0.25) 55.31072%, rgba(179, 179, 255, 0.25) 81.68992%, transparent 81.68992%, transparent 83.32276%, rgba(102, 102, 255, 0.25) 83.32276%, rgba(179, 179, 255, 0.25));
    background-origin: content-box;
    background-clip: content-box;
    background-position: left top;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  margin: 0;
}

h1 {
  font-size: 7.5vw;
  font-style: italic;
  line-height: 1;
  margin-bottom: 1ex;
}

h2 {
  font-size: 3ex;
  margin-bottom: 2ex;
}

h3 {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8ex 0 0;
}

.content__left, .content__right {
  clear: both;
  width: 84.5815%;
  float: right;
  margin-right: 0;
}
@media (min-width: 530px) {
  .content__left, .content__right {
    width: 78.47296%;
    float: right;
    margin-right: 0;
  }
}
@media (min-width: 700px) {
  .content__left, .content__right {
    width: 84.44109%;
    float: right;
    margin-right: 0;
  }
}
@media (max-width: 529px) {
  .intro .content__left, .intro .content__right {
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (min-width: 1600px) {
  .content_left {
    width: 31.0574%;
    float: left;
    margin-right: 3.11178%;
  }
}
@media (min-width: 1600px) {
  .content_left {
    width: 50.2719%;
    float: right;
    margin-right: 0;
  }
}

.content:after {
  content: "";
  display: table;
  clear: both;
}
@media (min-width: 530px) {
  .content {
    width: 77.74114%;
    float: left;
    margin-right: 2.22589%;
  }
}
@media (min-width: 700px) {
  .content {
    width: 52.47305%;
    float: left;
    margin-right: 1.63285%;
  }
}

SassMeister-rendered.html

  <div class="wrap">
    <div class="content intro">
      <h1 class="title">This is Chapparal</h1>
      <h2 class="subtitle">
        Created by Adobe type designer Carol Twombly, Chaparral combines the legibility of slab serif designs popularized in the 19th century with the grace of 16th-century roman book lettering. By Adobe
      </h2>

      <div class="content__left">
        <p>
          The result is a versatile, hybrid slab-serif design, a unique addition to the Adobe Originals family of typefaces. Unlike “geometric” slab serif designs, Chaparral has varying letter proportions that give it an accessible and friendly appearance in all weights from light to bold.
        </p>
      </div>

      <div class="content__right">
        <p>Like the drought-resistant brush that blooms on the arid coastal range near Twombly’s California home, Chaparral’s highly functional design is surprisingly beautiful. Source: adobe.com</p>
      </div>
    </div>


    <div class="content">
      <h3>About the designer: Carol Twombly</h3>
      <div class="content__left">

        <p>
          American calligrapher and type designer, a graduate from Rhode Island School of Design where her professor was Charles Bigelow. Joined the digital typography program at Stanford University, also under Bigelow. Working from the Bigelow & Holmes studio she designed Mirarae, which won her the 1984 Morisawa gold prize. Since 1988 she has been a staff designer at Adobe.
        </p>
      </div>

      <div class="content__right">
        <p>
          During the 1994 ATypI conference in San Francisco, she was awarded the prestigious Prix Charles Peignot, given (occasionally) to outstanding type designers under the age of 35. Source: myfonts.com
        </p>
      </div>
    </div>
  </div>


  <div class="wrap">
    <div class="content">
      <h3>Yet another section </h3>

      <div class="content__left">
        <p>
          In its natural regime, chaparral is characterized by infrequent fires, with intervals ranging between 10–15 years to over a hundred years. Mature chaparral (stands that have been allowed greater intervals between fires) is characterized by nearly impenetrable, dense thickets (except the more open chaparral of the desert). These plants are highly flammable. They grow as woody shrubs with hard and small leaves; are non-leaf dropping (non-deciduous); and are drought tolerant. After the first rains following a fire, the landscape is dominated by soft-leaved non-woody annual plants, known as fire followers, which die back with the summer dry period.
        </p>
      </div>
      <div class="content__right">
        <p>
          Similar plant communities are found in the four other Mediterranean climate regions around the world, including the Mediterranean Basin (where it is known as maquis), central Chile (where it is called matorral), South African Cape Region (known there as fynbos), and in Western and Southern Australia (as kwongan). According to the California Academy of Sciences, Mediterranean shrubland contains more than 20% of the world’s plant diversity. The word chaparral is a loan word from Spanish chaparro, meaning both “small” and “dwarf” evergreen oak, which itself comes from the Basque word txapar, with exactly the same meaning.
        </p>
        <p>
          Conservation International and other conservation organizations consider the chaparral to be a biodiversity hotspot – a biological community with a large number of different species – that are under threat by human activity. Source: Wikipedia
        </p>
      </div>
    </div>
  </div>