Jens Grochtdreis jensgro
jensgro
/ gist:901b1661a45826d3be1e
Last active
August 29, 2015 14:20
— forked from andreruffert/mobile-first-rwd-sites.md
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) | |
| // ---- | |
| %placeholder { | |
| foo: bar; | |
| &:first-child { | |
| first: child; | |
| } |
jensgro
/ SassMeister-input.scss
Created
April 13, 2015 15:54
Linear Gradient with Compass (including IE8)
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) | |
| // ---- | |
| @import "compass"; | |
| $experimental-support-for-svg: true; | |
| .test { | |
| @include background(linear-gradient(top, #fd8700, #a20000)); |
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) | |
| // ---- | |
| .module { | |
| background: red; | |
| &__element { | |
| background: #cecece; | |
| &--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
| /** | |
| * Basic border-image demo | |
| */ |
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
| /** | |
| * Basic border-image demo | |
| */ | |
| div { | |
| border: 40px solid transparent; | |
| border-image: 33.334% url('data:image/svg+xml,<svg xmlns="http:%2F%2Fwww.w3.org%2F2000%2Fsvg" width="30" height="30"> \ | |
| <circle cx="5" cy="5" r="5" fill="%23ab4"%2F><circle cx="15" cy="5" r="5" fill=" %23655"%2F> \ | |
| <circle cx="25" cy="5" r="5" fill="%23e07"%2F><circle cx="5" cy="15" r="5" fill=" %23655"%2F> \ | |
| <circle cx="15" cy="15" r="5" fill="hsl(15, 25%, 75%)"%2F> \ |
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] {
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
| @mixin nolist($inline:false){ | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| @if $inline == true { | |
| display: inline; | |
| } | |
| } |
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
| <!-- Die source-Elemente werden von oben nach unten gelesen. --> | |
| <!-- Alles unter 800px-Breite bekommt also die zweite Source. --> | |
| <!-- Oder das Fallback-Bild, wenn es die Elemente nicht kennt. --> | |
| <picture> | |
| <source media="(min-width: 800px)" | |
| srcset="big.jpg 1x, big-hd.jpg 2x"> | |
| <source srcset="small.jpg 1x, small-hd.jpg 2x"> | |
| <img src="fallback.jpg" alt="Tolle Bildbeschreibung"> | |
| </picture> |
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
| <!-- Bild je nach Pixeldichte (Retina) --> | |
| <img src="bild.jpg" | |
| srcset="bild-2x.jpg 2x" | |
| alt="Tolle Bildbeschreibung"> | |
| <!-- Bild je nach Viewportbreite (w = Bildbreite) --> | |
| <img src="small.jpg" | |
| srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" | |
| alt="Tolle Bildbeschreibung"> |