Jens Grochtdreis jensgro
jensgro
/ dabblet.css
Created
May 31, 2016 15:02
— forked from LeaVerou/dabblet.css
CSS variables test
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
| /** | |
| * CSS variables test | |
| */ | |
| html { background: red } | |
| @supports (--variables: yes) { /* any variable and any value works */ | |
| /* Code here will only be applied in CSS variable-supporting UAs */ | |
| html { | |
| background: green; |
jensgro
/ dabblet.css
Created
December 18, 2015 20:31
— forked from gunnarbittersmann/dabblet.css
heading decorated
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
| /** | |
| * heading decorated | |
| */ | |
| html | |
| { | |
| height: 100%; | |
| background: linear-gradient( | |
| to right bottom, | |
| yellow, |
jensgro
/ dabblet.css
Last active
August 28, 2015 14:45
— forked from anonymous/dabblet.css
keyboard order and flexbox ordering
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
| /** | |
| * keyboard order and flexbox ordering | |
| */ | |
| nav { | |
| display: flex; | |
| padding: 20px; | |
| } | |
| a:nth-of-type(2) { | |
| order: -1; |
jensgro
/ dabblet.css
Created
May 22, 2015 12:55
— forked from csssecrets/dabblet.css
Scrolling hints
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
| /** | |
| * Scrolling hints | |
| */ | |
| ul { | |
| display: inline-block; | |
| overflow: auto; | |
| width: 7.2em; | |
| height: 7em; | |
| border: 1px solid silver; |
jensgro
/ gist:901b1661a45826d3be1e
Last active
August 29, 2015 14:20
— forked from andreruffert/mobile-first-rwd-sites.md
jensgro
/ pseudo-elements.md
Last active
August 29, 2015 14:16
— forked from p3t3r67x0/pseudo_elements.md
Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.
video::webkit-media-controls-timeline {
background-color: lime;
}
video /deep/ input[type=range] {
jensgro
/ bikeshed-all-the-classes.html
Last active
August 29, 2015 14:13
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
| <!-- BEM --> | |
| <div class="section__item section__item--someoption grid__row grid__row--gutter"> | |
| <div class="grid__item grid__item--small1 grid__item--wide3"> | |
| Some content | |
| </div> | |
| </div> | |
| <!-- Suit CSS --> | |
| <div class="Section-item Section-item--someoption Grid-row Grid-row--gutter"> |
jensgro
/ SassMeister-input-HTML.html
Last active
August 29, 2015 14:10
Google/Nexus Style Buttons using SCSS
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
| <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> | |
| </a><div class="shopping-cartTag"><a href="#"><i class="fa fa-shopping-cart fa-3x"></i></a></div> | |
| <a href="#" class="button blue-button" class="ripplelink"> | |
| <h3 class="button-title">Product One</h3> | |
| <div class="button-description">The item description goes here</div> | |
| <div class="button-price">$5</div> | |
| <div class="button-arrow"></div> | |
| </a> |
jensgro
/ table.css
Last active
August 29, 2015 14:10
— forked from colintoh/table.css
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
| table { display: table } | |
| tr { display: table-row } | |
| thead { display: table-header-group } | |
| tbody { display: table-row-group } | |
| tfoot { display: table-footer-group } | |
| col { display: table-column } | |
| colgroup { display: table-column-group } | |
| td, th { display: table-cell } | |
| caption { display: table-caption } |
jensgro
/ styles.css
Last active
August 29, 2015 14:09
— forked from pburtchaell/styles.css
vw and vh for iOS
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
| /** | |
| * 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/ | |
| */ | |