Created
August 19, 2014 20:43
-
-
Save judahstevenson/1de9469ebcab8a5c4c74 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="st-section"> | |
| <div class="style-card"> | |
| <dl> | |
| <dt>Fonts Used:</dt> | |
| <dd class="raleway bold">RALEWAY Bold</dd> | |
| <dd class="raleway semibold">RALEWAY Semibold</dd> | |
| <dd class="raleway medium">RALEWAY Medium</dd> | |
| <dd class="raleway regular">RALEWAY Regular</dd> | |
| <dd class="raleway light">RALEWAY Light</dd> | |
| </dl> | |
| </div> | |
| <div class="style-card"> | |
| <dl> | |
| <dt>h1</dt> | |
| <dd> | |
| <h1>Product Title</h1> | |
| </dd> | |
| <dd class="usage">Raleway Semibold // 22px //#00000</dd> | |
| <dd>Also used for: Filter page title</dd> | |
| </dl> | |
| </div> | |
| <div class="style-card"> | |
| <dl> | |
| <dt>h2</dt> | |
| <dd> | |
| <h2>PDP SECTION TITLE</h2> | |
| </dd> | |
| <dd class="usage">Raleway Medium // 18px //#00000</dd> | |
| </dl> | |
| </div> | |
| <div class="style-card"> | |
| <dl> | |
| <dt>h3</dt> | |
| <dd> | |
| <h3>PDP SECTION SUBTITLE</h3> | |
| </dd> | |
| <dd class="usage">Raleway Regular CAPS // 16px //#00000</dd> | |
| </dl> | |
| </div> | |
| <div class="style-card"> | |
| <dl> | |
| <dt>P</dt> | |
| <dd> | |
| <h1>Product Description</h1> | |
| </dd> | |
| <dd class="usage">Raleway Regular // 14px //#00000</dd> | |
| <dd>Also used for: Product tagline, filter page menu & dropdowns, filter page product & title, price</dd> | |
| </dl> | |
| </div> | |
| <div class="style-card"> | |
| <dl> | |
| <dt>Header</dt> | |
| <dd> | |
| <h4>Product Title</h4> | |
| </dd> | |
| <dd class="usage">Raleway Semibold // 22px //#00000</dd> | |
| <dd> | |
| Usage:<pre><h4 class='header'>Header</h4></pre> | |
| </dd> | |
| </dl> | |
| </div> | |
| <div class="style-card"> | |
| <dl> | |
| <dt>Links</dt> | |
| <dd> | |
| <h1>Link Style</h1> | |
| </dd> | |
| <dd>Typeface Varies // #C70E2E</dd> | |
| </dl> | |
| </div> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.3.14) | |
| // Compass (v1.0.0) | |
| // Bourbon (v4.0.2) | |
| // Neat (v1.6.0) | |
| // ---- | |
| @import "bourbon/bourbon"; | |
| @import "neat/neat"; | |
| $light-gray:#ccc; | |
| $dark-gray:#333; | |
| $medium-gray:#333; | |
| .st-section{ | |
| @include outer-container; | |
| .style-card{ | |
| @include span-columns(4); | |
| height:150px; | |
| dt{ | |
| font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace!important; | |
| color:$medium-gray; | |
| font-weight:300; | |
| border-bottom:1px solid $medium-gray; | |
| padding-bottom:0.015em; | |
| margin-bottom:0.75em; | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| .st-section { | |
| max-width: 68em; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .st-section:after { | |
| content: ""; | |
| display: table; | |
| clear: both; | |
| } | |
| .st-section .style-card { | |
| float: left; | |
| display: block; | |
| margin-right: 2.35765%; | |
| width: 31.76157%; | |
| height: 150px; | |
| } | |
| .st-section .style-card:last-child { | |
| margin-right: 0; | |
| } | |
| .st-section .style-card dt { | |
| font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace !important; | |
| color: #333333; | |
| font-weight: 300; | |
| border-bottom: 1px solid #333333; | |
| padding-bottom: 0.015em; | |
| margin-bottom: 0.75em; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="st-section"> | |
| <div class="style-card"> | |
| <dl> | |
| <dt>Fonts Used:</dt> | |
| <dd class="raleway bold">RALEWAY Bold</dd> | |
| <dd class="raleway semibold">RALEWAY Semibold</dd> | |
| <dd class="raleway medium">RALEWAY Medium</dd> | |
| <dd class="raleway regular">RALEWAY Regular</dd> | |
| <dd class="raleway light">RALEWAY Light</dd> | |
| </dl> | |
| </div> | |
| <div class="style-card"> | |
| <dl> | |
| <dt>h1</dt> | |
| <dd> | |
| <h1>Product Title</h1> | |
| </dd> | |
| <dd class="usage">Raleway Semibold // 22px //#00000</dd> | |
| <dd>Also used for: Filter page title</dd> | |
| </dl> | |
| </div> | |
| <div class="style-card"> | |
| <dl> | |
| <dt>h2</dt> | |
| <dd> | |
| <h2>PDP SECTION TITLE</h2> | |
| </dd> | |
| <dd class="usage">Raleway Medium // 18px //#00000</dd> | |
| </dl> | |
| </div> | |
| <div class="style-card"> | |
| <dl> | |
| <dt>h3</dt> | |
| <dd> | |
| <h3>PDP SECTION SUBTITLE</h3> | |
| </dd> | |
| <dd class="usage">Raleway Regular CAPS // 16px //#00000</dd> | |
| </dl> | |
| </div> | |
| <div class="style-card"> | |
| <dl> | |
| <dt>P</dt> | |
| <dd> | |
| <h1>Product Description</h1> | |
| </dd> | |
| <dd class="usage">Raleway Regular // 14px //#00000</dd> | |
| <dd>Also used for: Product tagline, filter page menu & dropdowns, filter page product & title, price</dd> | |
| </dl> | |
| </div> | |
| <div class="style-card"> | |
| <dl> | |
| <dt>Header</dt> | |
| <dd> | |
| <h4>Product Title</h4> | |
| </dd> | |
| <dd class="usage">Raleway Semibold // 22px //#00000</dd> | |
| <dd> | |
| Usage:<pre><h4 class='header'>Header</h4></pre> | |
| </dd> | |
| </dl> | |
| </div> | |
| <div class="style-card"> | |
| <dl> | |
| <dt>Links</dt> | |
| <dd> | |
| <h1>Link Style</h1> | |
| </dd> | |
| <dd>Typeface Varies // #C70E2E</dd> | |
| </dl> | |
| </div> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment