Created
May 1, 2014 15:37
-
-
Save finteractive/11454436 to your computer and use it in GitHub Desktop.
Toolkit Gem v2.x - Mini Demo
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
| <html> | |
| <body> | |
| <article> | |
| <div class="youtube-video"> | |
| <iframe width="400px" height="300px" | |
| src="https://www.youtube.com/embed/INscMGmhmX4"> | |
| </iframe> | |
| </div> | |
| <div class="caption"> | |
| <p>Grumpy Cat (born April 4, 2012[1]), real name Tardar Sauce,[2][3][4] is a cat and Internet celebrity known for her grumpy facial expression.[1]</p> | |
| <p>Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism.[1][5] Grumpy Cat's popularity originated from a picture posted to the social news website Reddit by Bundesen's brother Bryan on September 22, 2012.[1][6][7] It was made into an image macro with grumpy captions. "The Official Grumpy Cat" on Facebook has over 5 million "likes".[8] Grumpy Cat was featured on the front page of The Wall Street Journal on May 30, 2013[9] and on the cover of the October 7, 2013 issue of New York Magazine.[4][10]</p> | |
| </div> | |
| </article> | |
| </body> | |
| </html> |
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.6) | |
| // Compass (v1.0.0.alpha.18) | |
| // Toolkit (v) | |
| // ---- | |
| @import "toolkit"; | |
| body{ | |
| background: #F2D6B4; | |
| height: 800px; | |
| margin: 0 auto; | |
| width: 50%; | |
| } | |
| iframe{ | |
| border: 0; | |
| } | |
| article{ | |
| @include vertical-center(50%); | |
| background: #EEE; | |
| padding: 1em; | |
| } | |
| .youtube-video{ | |
| @include intrinsic-ratio(16/9); | |
| } | |
| // Can't see this in sassmeister. | |
| .caption{ | |
| @include content-fade-in(5s); | |
| } |
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
| body { | |
| background: #F2D6B4; | |
| height: 800px; | |
| margin: 0 auto; | |
| width: 50%; | |
| } | |
| iframe { | |
| border: 0; | |
| } | |
| article { | |
| top: 50%; | |
| position: relative; | |
| -webkit-transform: translateY(-50%); | |
| -ms-transform: translateY(-50%); | |
| transform: translateY(-50%); | |
| background: #EEE; | |
| padding: 1em; | |
| } | |
| .youtube-video { | |
| position: relative; | |
| height: 0; | |
| padding-top: 56.25%; | |
| width: 100%; | |
| } | |
| .youtube-video > * { | |
| display: block; | |
| position: absolute; | |
| width: 100% !important; | |
| height: 100% !important; | |
| top: 0; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .caption { | |
| opacity: 1; | |
| -webkit-transition: opacity 5s; | |
| transition: opacity 5s; | |
| } | |
| .wf-loading .caption { | |
| opacity: 0; | |
| } |
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
| <html> | |
| <body> | |
| <article> | |
| <div class="youtube-video"> | |
| <iframe width="400px" height="300px" | |
| src="https://www.youtube.com/embed/INscMGmhmX4"> | |
| </iframe> | |
| </div> | |
| <div class="caption"> | |
| <p>Grumpy Cat (born April 4, 2012[1]), real name Tardar Sauce,[2][3][4] is a cat and Internet celebrity known for her grumpy facial expression.[1]</p> | |
| <p>Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism.[1][5] Grumpy Cat's popularity originated from a picture posted to the social news website Reddit by Bundesen's brother Bryan on September 22, 2012.[1][6][7] It was made into an image macro with grumpy captions. "The Official Grumpy Cat" on Facebook has over 5 million "likes".[8] Grumpy Cat was featured on the front page of The Wall Street Journal on May 30, 2013[9] and on the cover of the October 7, 2013 issue of New York Magazine.[4][10]</p> | |
| </div> | |
| </article> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment