shevy 1.0.1 → 2.0.0

data/demo/dist/style.css

@@ -0,0 +1,413 @@
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  box-sizing: border-box;
+  font-size: 100%;
+}
+
+body {
+  font-family: sans-serif;
+}
+
+.container {
+  width: 90%;
+  margin: 1em auto;
+}
+@media only screen and (min-width: 520px) {
+  .container {
+    width: 67%;
+  }
+}
+@media only screen and (min-width: 1025px) {
+  .container {
+    width: 50%;
+  }
+}
+
+.footer {
+  margin-bottom: 3em;
+}
+
+h1 {
+  font-size: 3em;
+  line-height: 1.25;
+  margin-bottom: 0.5em;
+}
+
+h2 {
+  font-size: 2.5em;
+  line-height: 1.2;
+  margin-bottom: 0.6em;
+}
+
+h3 {
+  font-size: 2em;
+  line-height: 1.125;
+  margin-bottom: 0.75em;
+}
+
+h4 {
+  font-size: 1.5em;
+  line-height: 1;
+  margin-bottom: 1em;
+}
+
+h5 {
+  font-size: 1.25em;
+  line-height: 1.2;
+  margin-bottom: 1.2em;
+}
+
+h6 {
+  font-size: 1em;
+  line-height: 1.5;
+  margin-bottom: 1.5em;
+}
+
+p {
+  font-size: 1em;
+  line-height: 1.5em;
+  margin-bottom: 1.5em;
+}
+
+.shevy {
+  background-image: url(http://basehold.it/i/24/);
+}
+.shevy h1 {
+  font-size: 3em;
+  line-height: 1.25;
+  margin-bottom: 0.5em;
+}
+.shevy h2 {
+  font-size: 2.5em;
+  line-height: 1.2;
+  margin-bottom: 0.6em;
+}
+.shevy h3 {
+  font-size: 2em;
+  line-height: 1.125;
+  margin-bottom: 0.75em;
+}
+.shevy h4 {
+  font-size: 1.5em;
+  line-height: 1;
+  margin-bottom: 1em;
+}
+.shevy h5 {
+  font-size: 1.25em;
+  line-height: 1.2;
+  margin-bottom: 1.2em;
+}
+.shevy h6 {
+  font-size: 1em;
+  line-height: 1.5;
+  margin-bottom: 1.5em;
+}
+.shevy p {
+  font-size: 1em;
+  line-height: 1.5em;
+  margin-bottom: 1.5em;
+}
+
+.large {
+  background-image: url(http://basehold.it/i/30/);
+}
+.large h1 {
+  font-size: 90px;
+  line-height: 105px;
+  margin-bottom: 30px;
+}
+.large h2 {
+  font-size: 75px;
+  line-height: 90px;
+  margin-bottom: 30px;
+}
+.large h3 {
+  font-size: 60px;
+  line-height: 75px;
+  margin-bottom: 30px;
+}
+.large h4 {
+  font-size: 45px;
+  line-height: 60px;
+  margin-bottom: 30px;
+}
+.large h5 {
+  font-size: 30px;
+  line-height: 30px;
+  margin-bottom: 30px;
+}
+.large h6 {
+  font-size: 15px;
+  line-height: 30px;
+  margin-bottom: 30px;
+}
+.large p {
+  font-size: 15px;
+  line-height: 30px;
+  margin-bottom: 30px;
+}
+.large h6 {
+  /* If you're clever and look at this and notice it's different,
+  let me tell you why. Shevy supports a half base-space so that large headings
+  don't have obnoxiously big margins. When you're using basehold.it,
+  it's nice to bump up a margin manually to get the text below back on the baseline. Kudos for finding this */
+  margin-bottom: 45px;
+}
+@media only screen and (min-width: 478px) {
+  .large h6 {
+    margin-bottom: 30px;
+  }
+}
+
+.responsive {
+  background-image: url(http://basehold.it/i/21/);
+}
+.responsive h1 {
+  font-size: 28px;
+  line-height: 31.5px;
+  margin-bottom: 21px;
+}
+.responsive h2 {
+  font-size: 24.5px;
+  line-height: 31.5px;
+  margin-bottom: 21px;
+}
+.responsive h3 {
+  font-size: 21px;
+  line-height: 21px;
+  margin-bottom: 21px;
+}
+.responsive h4 {
+  font-size: 17.5px;
+  line-height: 21px;
+  margin-bottom: 21px;
+}
+.responsive h5 {
+  font-size: 14px;
+  line-height: 21px;
+  margin-bottom: 21px;
+}
+.responsive h6 {
+  font-size: 10.5px;
+  line-height: 21px;
+  margin-bottom: 21px;
+}
+.responsive p {
+  font-size: 10.5px;
+  line-height: 21px;
+  margin-bottom: 21px;
+}
+@media only screen and (min-width: 520px) {
+  .responsive {
+    background-image: url(http://basehold.it/i/24/);
+  }
+  .responsive h1 {
+    font-size: 32px;
+    line-height: 36px;
+    margin-bottom: 24px;
+  }
+  .responsive h2 {
+    font-size: 28px;
+    line-height: 36px;
+    margin-bottom: 24px;
+  }
+  .responsive h3 {
+    font-size: 24px;
+    line-height: 24px;
+    margin-bottom: 24px;
+  }
+  .responsive h4 {
+    font-size: 20px;
+    line-height: 24px;
+    margin-bottom: 24px;
+  }
+  .responsive h5 {
+    font-size: 16px;
+    line-height: 24px;
+    margin-bottom: 24px;
+  }
+  .responsive h6 {
+    font-size: 12px;
+    line-height: 24px;
+    margin-bottom: 24px;
+  }
+  .responsive p {
+    font-size: 12px;
+    line-height: 24px;
+    margin-bottom: 24px;
+  }
+}
+@media only screen and (min-width: 769px) {
+  .responsive {
+    background-image: url(http://basehold.it/i/54/);
+  }
+  .responsive h1 {
+    font-size: 3.75em;
+    line-height: 1.35;
+    margin-bottom: 0.9em;
+  }
+  .responsive h2 {
+    font-size: 3.3em;
+    line-height: 1.02273;
+    margin-bottom: 1.02273em;
+  }
+  .responsive h3 {
+    font-size: 3em;
+    line-height: 1.125;
+    margin-bottom: 1.125em;
+  }
+  .responsive h4 {
+    font-size: 2.625em;
+    line-height: 1.28571;
+    margin-bottom: 1.28571em;
+  }
+  .responsive h5 {
+    font-size: 1.875em;
+    line-height: 1.8;
+    margin-bottom: 1.8em;
+  }
+  .responsive h6 {
+    font-size: 1.5em;
+    line-height: 2.25;
+    margin-bottom: 2.25em;
+  }
+  .responsive p {
+    font-size: 1.5em;
+    line-height: 2.25em;
+    margin-bottom: 2.25em;
+  }
+}
+@media only screen and (min-width: 1025px) {
+  .responsive {
+    background-image: url(http://basehold.it/i/54/);
+  }
+  .responsive h1 {
+    font-size: 90px;
+    line-height: 108px;
+    margin-bottom: 54px;
+  }
+  .responsive h2 {
+    font-size: 79.2px;
+    line-height: 81px;
+    margin-bottom: 54px;
+  }
+  .responsive h3 {
+    font-size: 72px;
+    line-height: 81px;
+    margin-bottom: 54px;
+  }
+  .responsive h4 {
+    font-size: 63px;
+    line-height: 81px;
+    margin-bottom: 54px;
+  }
+  .responsive h5 {
+    font-size: 45px;
+    line-height: 54px;
+    margin-bottom: 54px;
+  }
+  .responsive h6 {
+    font-size: 36px;
+    line-height: 54px;
+    margin-bottom: 54px;
+  }
+  .responsive p {
+    font-size: 36px;
+    line-height: 54px;
+    margin-bottom: 54px;
+  }
+}
+@media only screen and (min-width: 1350px) {
+  .responsive {
+    background-image: url(http://basehold.it/i/72/);
+  }
+  .responsive h1 {
+    font-size: 144px;
+    line-height: 180px;
+    margin-bottom: 72px;
+  }
+  .responsive h2 {
+    font-size: 120px;
+    line-height: 144px;
+    margin-bottom: 72px;
+  }
+  .responsive h3 {
+    font-size: 96px;
+    line-height: 108px;
+    margin-bottom: 72px;
+  }
+  .responsive h4 {
+    font-size: 84px;
+    line-height: 108px;
+    margin-bottom: 72px;
+  }
+  .responsive h5 {
+    font-size: 60px;
+    line-height: 72px;
+    margin-bottom: 72px;
+  }
+  .responsive h6 {
+    font-size: 48px;
+    line-height: 72px;
+    margin-bottom: 72px;
+  }
+  .responsive p {
+    font-size: 48px;
+    line-height: 72px;
+    margin-bottom: 72px;
+  }
+}
+@media only screen and (min-width: 769px) {
+  .responsive p:first-child {
+    margin-bottom: 1.125em;
+  }
+}
+@media only screen and (min-width: 1025px) {
+  .responsive p:first-child {
+    margin-bottom: 27px;
+  }
+}
+@media only screen and (min-width: 1350px) {
+  .responsive p:first-child {
+    margin-bottom: 36px;
+  }
+}
+
+.box {
+  background: red;
+  padding: 3em;
+  margin-bottom: 1.5em;
+}
+.responsive .box {
+  padding: 42px;
+}
+@media only screen and (min-width: 520px) {
+  .responsive .box {
+    padding: 48px;
+  }
+}
+@media only screen and (min-width: 769px) {
+  .responsive .box {
+    padding: 4.5em;
+  }
+}
+@media only screen and (min-width: 1025px) {
+  .responsive .box {
+    padding: 108px;
+  }
+}
+@media only screen and (min-width: 1350px) {
+  .responsive .box {
+    padding: 144px;
+  }
+}

data/demo/index.html

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>Shevy Demo</title>
+
+  <link rel="stylesheet" href="dist/style.css">
+</head>
+<body>
+  <div class="container">
+    <header class="header">
+      <h1>Shevy</h1>
+      <h3>Perfect typography. Vertical rhythm made easy.</h3>
+    </header>
+
+    <p>
+      Vertical rhythm, the "pace" at which objects and words are spaced vertically on a page. It's one of life's most unnoticeable pleasantries. It only sticks out when it's bad.
+    </p>
+
+    <p>
+      People shouldn't miss your message because of poorly spaced typography, and you shouldn't have to spend more time than necessary getting vertical rhythm correct. While Shevy can't help you pick out the best fonts, it'll make sure your fonts are perfectly spaced up and down the page.
+    </p>
+
+    <p>
+      Did I mention it works responsively, too?
+    </p>
+
+    <p>
+      That's right. You can reset your typography module by module, breakpoint by breakpoint and maintain perfect vertical rhythm (within your module or breakpoint of course).
+    </p>
+
+    <p>
+      Check it out.
+    </p>
+
+    <div class="shevy">
+      <p>Default <code>$shevy</code> font sizes</p>
+
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolor, eveniet cupiditate, rerum doloribus id voluptatibus unde quasi laborum tempora repellat saepe aperiam, reiciendis? Molestiae dicta ipsam incidunt dolor sunt soluta voluptatum iusto. Voluptate in eligendi numquam, placeat, magnam aspernatur reiciendis perferendis a rem! Quaerat, beatae, sint. Iusto mollitia, facere.
+      </p>
+
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero itaque non, quo possimus quibusdam provident nihil ut magnam! Eum sunt qui quae rem, perferendis atque quia ipsam ex at culpa laboriosam omnis dicta quis blanditiis aspernatur, fugit quas voluptate debitis nostrum tempore! Eius, aliquid, quo.
+      </p>
+    </div>
+
+    <div class="large">
+      <p>Using a large font scale in a custom <code>$large</code> map.</p>
+
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolor, eveniet cupiditate, rerum doloribus id voluptatibus unde quasi laborum tempora repellat saepe aperiam, reiciendis? Molestiae dicta ipsam incidunt dolor sunt soluta voluptatum iusto. Voluptate in eligendi numquam, placeat, magnam aspernatur reiciendis perferendis a rem! Quaerat, beatae, sint. Iusto mollitia, facere.
+      </p>
+
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero itaque non, quo possimus quibusdam provident nihil ut magnam! Eum sunt qui quae rem, perferendis atque quia ipsam ex at culpa laboriosam omnis dicta quis blanditiis aspernatur, fugit quas voluptate debitis nostrum tempore! Eius, aliquid, quo.
+      </p>
+    </div>
+
+    <div class="responsive">
+      <p>Responsive typography with five <code>$responsive</code> maps.</p>
+
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolor, eveniet cupiditate, rerum doloribus id voluptatibus unde quasi laborum tempora repellat saepe aperiam, reiciendis? Molestiae dicta ipsam incidunt dolor sunt soluta voluptatum iusto. Voluptate in eligendi numquam, placeat, magnam aspernatur reiciendis perferendis a rem! Quaerat, beatae, sint. Iusto mollitia, facere.
+      </p>
+
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero itaque non, quo possimus quibusdam provident nihil ut magnam! Eum sunt qui quae rem, perferendis atque quia ipsam ex at culpa laboriosam omnis dicta quis blanditiis aspernatur, fugit quas voluptate debitis nostrum tempore! Eius, aliquid, quo.
+      </p>
+    </div>
+
+    <h2>Wait. There's more.</h2>
+
+    <p>
+      There's also this neat little <code>base-spacing()</code> function (with an alias to shorten it to <code>bs()</code>). <code>base-spacing()</code> takes two arguments, a <code>$factor</code> (defaults to 1) and a <code>$map</code> (defaults to <code>$shevy</code>). This function will calculate the base spacing by multiplying the <code>base-font-size</code> by the <code>base-line-height</code>. It will then multiply that base spacing by the factor provided and thus supply you with a value that aligns with your vertical rhythm.
+    </p>
+
+    <p>
+      Check out the box below. It's 2 base-spacings tall.
+    </p>
+
+    <div class="box"></div>
+
+    <p>
+      Because we can supply a map as the second argument, we can adjust the base-spacing value on the fly. For example, let's use the responsive maps we used above on the box below.
+    </p>
+
+    <div class="responsive">
+      <div class="box"></div>
+    </div>
+
+    <footer class="footer">
+      <p>
+        Big thanks to <a href="http://basehold.it/">basehold.it</a> for the ability to apply baseline backgrounds through out this project. Use them for your own vertical rhythm debugging.
+      </p>
+
+      <p>
+        Copyright @2015-2016 Kyle Shevlin. All Rights Reserved. Free to use under the MIT license.
+      </p>
+    </footer>
+  </div>
+  <!-- /.container -->
+</body>
+</html>