Generated by SassMeister.com.

SassMeister-input-HTML.html

  <div class="wrap">
    <div class='full-bleed'>
      <img src="images/typography.jpg" alt="imagfe showing multiple typefaces being written in several directios" class='header-image'>
    </div>
    <div class="main-content">
      <h1>Learning to play with typography</h1>

      <p>Over the past few months I've rekindled my interest in typography; how it works in print and also how it works online. I'm also working through two typography books that are very relevant to both typographic work and overall front end design and development. <a href="http://oreil.ly/1QuoKut">Responsive Typography</a> by Jason Pamental and <a href="http://abookapart.com/products/on-web-typography">On web typography</a> by Jason Santa Maria</p>

      <p>But it wasn't until fluent that I got a better idea of why typography is important.I got the chance to talk with both Eric Meyer, one of my early web design influences, and Jason Pamental, the author of Responsive Typography and a very good presenter.</p>

      <p>What I got out of multiple presentations about CSS, typography and new technologies coming and going away (saddly) is that the basics are still important. With that in mind I'll look at typography through a series of exercises. The exercises can be edited and will change the display of the associated text; you can then copy and paste the resulting CSS to your own CSS/SCSS stylesheet.</p>

      <blockquote>
        <p>The first thing to learn is that all typefaces are different. What works for the typefaces I chose may or may not work for the typefaces you choose for your projects. Where possible I'll show the typefaces used in this page against other typefaces (most likely from the 'web safe' font set.)</p>
      </blockquote>

      <h2>Why worry about typography on the web?</h2>

      <div class='video'>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/0OF-jU97HzQ" frameborder="0" allowfullscreen></iframe>

        <p>Universal Typography -- Tim Brown</p>
      </div>

      <p>I love the web and I've been working on digital content for almost 20 years. While I agree with the universality and accessibility requirements for the web (it should be acessible by anyone anywhere, regardless of disability.) But it doesn't mean that usable has to equal boring or plain</p>

      <p>Whether we are reading a paper book or a web page or a iBook or Kindle ebook, typography still matters and it's still an important part of the design process.</p>

      <p>For the longest time I've heard that the web is not print and that we shouldn't look at books as sources for web design inspiration. This may be true: the web is not print. But we're getting to the point where CSS on its own or a combination of CSS and Javascript will gives a large part of what we see in print in a way that won't look terrible in older browsers, when the user access it with assistive technology, or when CSS and Javascript are disabled.</p>

      <p></p>

      <p>I started taking a serious look at typography about 3 years ago. I'm not an expect and I'm most definitely not a professional but I'm learning and I thought I'd share what I've learned so far with you. Who knows, perhaps this is a joint project in the making ;)</p>
</div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// Susy (v2.2.5)
// ----

@import "susy";
// Susy map to tell it how to layout the content
$susy: (output: isolate, columns: 16, container: 1140px, global-box-sizing: border-box, gutter-position: split);

//@include border-box-sizing;

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

// The wrapper for our content
.wrap {
  @include container;
  height: 100%;
}

.aside-left {
  @include span(3 of 16);
  //background-color: rgba(0, 0, 255, .1);
  height: 100vh;
  margin-top: 15em;
}

// The main content area
.main-content {
  //background-color: rgba(255, 0, 255, .1);
  @include span(10 of 16 at 4);
  @include cf;
}

.aside-right {
  @include span(3 of 16 at 11 last);
  @include cf;
  border-top: 3px double #ddd;
  border-bottom: 3px double #ddd;
  color: #666;
  line-height: 1.4em;
}

// The main content area when used as the second item in the grid
// when there's 
.main-content-simple {
  @include span(10 of 16);
  height: 100%;
  @include cf;
}

.full-bleed {
  @include span(16 of 16);
  @include cf;
  img .header-image {
    clear: both;
    position: absolute;
    width: 100vw;
    height: 25%;
  }
}

SassMeister-output.css

.wrap {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}
.wrap:after {
  content: " ";
  display: block;
  clear: both;
}

.aside-left {
  width: 17.5%;
  float: left;
  margin-left: 0.625%;
  margin-right: 0.625%;
  height: 100vh;
  margin-top: 15em;
}

.main-content {
  width: 61.25%;
  float: left;
  margin-left: 19.375%;
  margin-right: -100%;
}
.main-content:after {
  content: " ";
  display: block;
  clear: both;
}

.aside-right {
  width: 17.5%;
  float: left;
  margin-left: 63.125%;
  margin-right: -100%;
  border-top: 3px double #ddd;
  border-bottom: 3px double #ddd;
  color: #666;
  line-height: 1.4em;
}
.aside-right:after {
  content: " ";
  display: block;
  clear: both;
}

.main-content-simple {
  width: 61.25%;
  float: left;
  margin-left: 0.625%;
  margin-right: 0.625%;
  height: 100%;
}
.main-content-simple:after {
  content: " ";
  display: block;
  clear: both;
}

.full-bleed {
  width: 98.75%;
  float: left;
  margin-left: 0.625%;
  margin-right: 0.625%;
}
.full-bleed:after {
  content: " ";
  display: block;
  clear: both;
}
.full-bleed img .header-image {
  clear: both;
  position: absolute;
  width: 100vw;
  height: 25%;
}

SassMeister-rendered.html

  <div class="wrap">
    <div class='full-bleed'>
      <img src="images/typography.jpg" alt="imagfe showing multiple typefaces being written in several directios" class='header-image'>
    </div>
    <div class="main-content">
      <h1>Learning to play with typography</h1>

      <p>Over the past few months I've rekindled my interest in typography; how it works in print and also how it works online. I'm also working through two typography books that are very relevant to both typographic work and overall front end design and development. <a href="http://oreil.ly/1QuoKut">Responsive Typography</a> by Jason Pamental and <a href="http://abookapart.com/products/on-web-typography">On web typography</a> by Jason Santa Maria</p>

      <p>But it wasn't until fluent that I got a better idea of why typography is important.I got the chance to talk with both Eric Meyer, one of my early web design influences, and Jason Pamental, the author of Responsive Typography and a very good presenter.</p>

      <p>What I got out of multiple presentations about CSS, typography and new technologies coming and going away (saddly) is that the basics are still important. With that in mind I'll look at typography through a series of exercises. The exercises can be edited and will change the display of the associated text; you can then copy and paste the resulting CSS to your own CSS/SCSS stylesheet.</p>

      <blockquote>
        <p>The first thing to learn is that all typefaces are different. What works for the typefaces I chose may or may not work for the typefaces you choose for your projects. Where possible I'll show the typefaces used in this page against other typefaces (most likely from the 'web safe' font set.)</p>
      </blockquote>

      <h2>Why worry about typography on the web?</h2>

      <div class='video'>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/0OF-jU97HzQ" frameborder="0" allowfullscreen></iframe>

        <p>Universal Typography -- Tim Brown</p>
      </div>

      <p>I love the web and I've been working on digital content for almost 20 years. While I agree with the universality and accessibility requirements for the web (it should be acessible by anyone anywhere, regardless of disability.) But it doesn't mean that usable has to equal boring or plain</p>

      <p>Whether we are reading a paper book or a web page or a iBook or Kindle ebook, typography still matters and it's still an important part of the design process.</p>

      <p>For the longest time I've heard that the web is not print and that we shouldn't look at books as sources for web design inspiration. This may be true: the web is not print. But we're getting to the point where CSS on its own or a combination of CSS and Javascript will gives a large part of what we see in print in a way that won't look terrible in older browsers, when the user access it with assistive technology, or when CSS and Javascript are disabled.</p>

      <p></p>

      <p>I started taking a serious look at typography about 3 years ago. I'm not an expect and I'm most definitely not a professional but I'm learning and I thought I'd share what I've learned so far with you. Who knows, perhaps this is a joint project in the making ;)</p>
</div>
</div>