Jens Grochtdreis jensgro
jensgro
/ styles.css
Last active
August 29, 2015 14:09
— forked from pburtchaell/styles.css
vw and vh for iOS
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
| /** | |
| * VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units | |
| * | |
| * To overcome this, create media queries that target the width, height, and orientation of iOS devices. | |
| * It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing | |
| * the height of element `.foo` —which is a full width and height cover image. | |
| * | |
| * iOS Resolution Quick Reference: http://www.iosres.com/ | |
| */ | |
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
| <header class="top-bar"> | |
| <nav> | |
| <ul class="nav"> | |
| <li class="nav-item"><a href="#">Home<span class="nav-subtitle">the beginning</span></a></li> | |
| <li class="nav-item"> | |
| <a href="#">Portfolio<span class="nav-subtitle">my work</span></a> | |
| <ul class="nav-submenu"> | |
| <li class="nav-subitem"><a href="#">Print Design</a></li> | |
| <li class="nav-subitem"><a href="#">Web Design</a></li> | |
| <li class="nav-subitem"><a href="#">Development</a></li> |
jensgro
/ SassMeister-input-HTML.html
Last active
August 29, 2015 14:06
Linear gradient with Compass
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
| <div class="test"></div> |
jensgro
/ SassMeister-input-HTML.html
Last active
August 29, 2015 14:06
Sass-variables and generated content.
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
| <h1>!</h1> | |
| <h2>You can combine</h2> | |
| <h3>include a variable into "content"</h3> |
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.3.14) | |
| // Compass (v1.0.1) | |
| // ---- | |
| .block { | |
| &__element { | |
| color: red; | |
| } | |
| &--modifier { |
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
| <div> | |
| <div class="ym-g25-1"> | |
| <div class="img-teaser"> | |
| <img src="http://placehold.it/230x240" alt=""> | |
| <a href="#" class="teaserlink">super-toller Link</a> | |
| </div> | |
| <!-- /.teaser --> | |
| </div> | |
| <div class="ym-g25-2"> | |
| <div class="img-teaser"> |
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
| <div> | |
| <div class="ym-g25-1"> | |
| <div class="img-teaser"> | |
| <img src="http://placehold.it/230x240" alt=""> | |
| <a href="#" class="teaserlink">super-toller Link</a> | |
| </div> | |
| <!-- /.teaser --> | |
| </div> | |
| <div class="ym-g25-2"> | |
| <div class="img-teaser"> |
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.3.14) | |
| // Compass (v1.0.0) | |
| // ---- | |
| // http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/ | |
| @function strip-unit($value) { | |
| @return $value / ($value * 0 + 1); | |
| } |
jensgro
/ button_from_hell.html
Last active
August 29, 2015 14:04
A "button from hell" - as reported here: https://twitter.com/petervangrieken/status/496220936996397057
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
| <!-- It is not unrealistic, that an enterprise CMS or ASP.NET would produce such a link --> | |
| <div role="link" tabindex="0" data-class="link" onclick="window.location.href='http://google.com'" aria-label="link to Google">Google</div> | |
| <!-- and fancy with bootstrap-bullshit --> | |
| <div role="link" tabindex="0" data-class="link" onclick="window.location.href='http://google.com'" aria-label="link to Google"><i class="icon-link"></i>Google</div> |