Last active
August 29, 2015 14:15
-
-
Save tsmith512/5e9e0e1181fcb81974cd to your computer and use it in GitHub Desktop.
Examples for Presentation: Advanced Responsive Web Design
Part 6: Toolkit
This file contains hidden or 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
| <!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> |
This file contains hidden or 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.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; | |
| } |
This file contains hidden or 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
| /** | |
| * 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; | |
| } |
This file contains hidden or 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
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment