Jens Grochtdreis jensgro
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"> |
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
| /** | |
| * Semantik und Optik sind entkoppelt | |
| */ | |
| .paragraphToList { | |
| margin: 20px; | |
| } | |
| .paragraphToList p { | |
| display: list-item; | |
| margin-left: 10px; | |
| color: black |
jensgro
/ bikeshed-all-the-classes.html
Last active
August 29, 2015 14:13
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
| <!-- 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 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
| <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> |
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
| <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 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
| 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 } |
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.7) | |
| // Compass (v1.0.1) | |
| // ---- | |
| // Keyframes Mixin | |
| // https://medium.com/@dtinth/declaring-a-css-animation-keyframes-directly-on-an-element-using-sass-f091a0a15dbd | |
| @mixin animation-keyframes { | |
| $animation-number: 0 !default !global; |
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.7) | |
| // Compass (v1.0.1) | |
| // ---- | |
| // Keyframes Mixin | |
| // https://medium.com/@dtinth/declaring-a-css-animation-keyframes-directly-on-an-element-using-sass-f091a0a15dbd | |
| @mixin animation-keyframes { | |
| $animation-number: 0 !default !global; |