tsmith512/SassMeister-input-HTML.html

## SassMeister-input-HTML.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <main>

    <h1>16:9 ratio</h1>
    <div class="ratio-16-9">
      <div>IR Item</div>
    </div>

    <h1>4:3 ratio</h1>
    <div class="ratio-4-3">
      <div>IR Item</div>
    </div>

    <h1>Vertical Centering</h1>
    <div class="vc-container">
      <span class="desc">This is a tall container</span>
      <div class="vc-item">
        And this is centered vertically therein
      </div>
    </div>

    <h1>Fancy Underlines that clear descenders</h1>
    <a href="#" class="fancy-underlines">typography++</a>

    <h1><span class="triangle-1"></span> Triangles</h1>
    <span class="triangle-2"></span>
  </main>
</body>
</html>

## SassMeister-input.scss
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Toolkit (v2.7.0)
// ----

/**
 * Examples for Presentation: Advanced Responsive Web Design
 * Part 6: Toolkit
 * For More Information: http://github.com/tsmith512/arwd
 */

@import "toolkit";
@import "toolkit/kickstart";

.ratio-16-9 {
  // 16/9 is the default argument
  @include intrinsic-ratio;
}

.ratio-4-3 {
  @include intrinsic-ratio(4/3);
}

.ratio-16-9 div, .ratio-4-3 div {
  background: red;
}
main {
  max-width: 30em;
}

.vc-container {
  height: 300px;
  background: #eee;

  .desc {
    // Absolute positioning pulls this item out of the
    // document flow. Removing this would cause the
    // vertically centered item to be one line lower
    // than it should be.
    position: absolute;
  }

  .vc-item {
    @include vertical-center();
    background: red;
  }
}

.fancy-underlines {
  // I find I have to fiddle with $distance and $width a lot for best results
  @include underline($background: #fff, $color: #00F, $clear-descenders: true, $distance: 0.925, $width: 1);
  font-size: 2em;
}

.triangle-1 {
  @include triangle($color: black, $height: 0.375em, $width: 0.75em, $angle: 90);
  display: inline-block;
}

.triangle-2 {
  @include triangle($color: black, $height: 4em, $width: 6em, $angle: 180);
}

.clearfix {
  // I like the Toolkit clearfix better, it doesn't hide overflows.
  @include clearfix;
}

## SassMeister-output.css
/**
 * Examples for Presentation: Advanced Responsive Web Design
 * Part 6: Toolkit
 * For More Information: http://github.com/tsmith512/arwd
 */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

img, video {
  max-width: 100%;
  height: auto;
}

.ratio-16-9 {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  width: 100%;
}
.ratio-16-9 > * {
  display: block;
  position: absolute;
  width: 100% !important;
  height: 100% !important;
  top: 0;
  margin: 0;
  padding: 0;
}

.ratio-4-3 {
  position: relative;
  height: 0;
  padding-top: 75%;
  width: 100%;
}
.ratio-4-3 > * {
  display: block;
  position: absolute;
  width: 100% !important;
  height: 100% !important;
  top: 0;
  margin: 0;
  padding: 0;
}

.ratio-16-9 div, .ratio-4-3 div {
  background: red;
}

main {
  max-width: 30em;
}

.vc-container {
  height: 300px;
  background: #eee;
}
.vc-container .desc {
  position: absolute;
}
.vc-container .vc-item {
  top: 50%;
  position: relative;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background: red;
}

.fancy-underlines {
  text-decoration: none;
  background-repeat: repeat-x;
  background-image: linear-gradient(to top, #fff 75%, #00F 75%);
  background-size: 0.125em 0.125em;
  background-position: 0 0.9875em;
  text-shadow: 0.0625em 0.0625em 0 #fff, -0.0625em 0 0 #fff;
  font-size: 2em;
}

.triangle-1 {
  display: block;
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-left-color: black;
  border-width: 0.1875em 0 0.1875em 0.75em;
  display: inline-block;
}

.triangle-2 {
  display: block;
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-top-color: black;
  border-width: 4em 3em 0 3em;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

## SassMeister-rendered.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <main>

    <h1>16:9 ratio</h1>
    <div class="ratio-16-9">
      <div>IR Item</div>
    </div>

    <h1>4:3 ratio</h1>
    <div class="ratio-4-3">
      <div>IR Item</div>
    </div>

    <h1>Vertical Centering</h1>
    <div class="vc-container">
      <span class="desc">This is a tall container</span>
      <div class="vc-item">
        And this is centered vertically therein
      </div>
    </div>

    <h1>Fancy Underlines that clear descenders</h1>
    <a href="#" class="fancy-underlines">typography++</a>

    <h1><span class="triangle-1"></span> Triangles</h1>
    <span class="triangle-2"></span>
  </main>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>
	<body>
	<main>

	<h1>16:9 ratio</h1>
	<div class="ratio-16-9">
	<div>IR Item</div>
	</div>

	<h1>4:3 ratio</h1>
	<div class="ratio-4-3">
	<div>IR Item</div>
	</div>

	<h1>Vertical Centering</h1>
	<div class="vc-container">
	<span class="desc">This is a tall container</span>
	<div class="vc-item">
	And this is centered vertically therein
	</div>
	</div>

	<h1>Fancy Underlines that clear descenders</h1>
	<a href="#" class="fancy-underlines">typography++</a>

	<h1><span class="triangle-1"></span> Triangles</h1>
	<span class="triangle-2"></span>
	</main>
	</body>
	</html>
	// ----
	// Sass (v3.4.12)
	// Compass (v1.0.3)
	// Toolkit (v2.7.0)
	// ----

	/**
	* Examples for Presentation: Advanced Responsive Web Design
	* Part 6: Toolkit
	* For More Information: http://github.com/tsmith512/arwd
	*/

	@import "toolkit";
	@import "toolkit/kickstart";

	.ratio-16-9 {
	// 16/9 is the default argument
	@include intrinsic-ratio;
	}

	.ratio-4-3 {
	@include intrinsic-ratio(4/3);
	}

	.ratio-16-9 div, .ratio-4-3 div {
	background: red;
	}
	main {
	max-width: 30em;
	}

	.vc-container {
	height: 300px;
	background: #eee;

	.desc {
	// Absolute positioning pulls this item out of the
	// document flow. Removing this would cause the
	// vertically centered item to be one line lower
	// than it should be.
	position: absolute;
	}

	.vc-item {
	@include vertical-center();
	background: red;
	}
	}

	.fancy-underlines {
	// I find I have to fiddle with $distance and $width a lot for best results
	@include underline($background: #fff, $color: #00F, $clear-descenders: true, $distance: 0.925, $width: 1);
	font-size: 2em;
	}

	.triangle-1 {
	@include triangle($color: black, $height: 0.375em, $width: 0.75em, $angle: 90);
	display: inline-block;
	}

	.triangle-2 {
	@include triangle($color: black, $height: 4em, $width: 6em, $angle: 180);
	}

	.clearfix {
	// I like the Toolkit clearfix better, it doesn't hide overflows.
	@include clearfix;
	}