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
| /** | |
| * 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; |
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> |