rhoover
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
| Let's say you have a head-element.njk template. There, or wherever your <head> element is, place: | |
| <!-- critical styles --> | |
| {% set critical %} | |
| {% include "../../critical/critical.css" %} | |
| {% endset %} | |
| <style> | |
| {{ critical | safe }} | |
| </style> | |
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
| /* style.scss */ | |
| %button { | |
| min-width: 100px; | |
| padding: 1em; | |
| border-radius: 1em; | |
| &-twitter { | |
| @extend %button; | |
| color: #fff; | |
| background: #55acee; | |
| } |
rhoover
/ _colors.scss
Created
September 2, 2015 17:13
Manage colors quickly and easily across teams and personnel
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
| // A module to easy-ify your color-naming conventions across teams, | |
| // i.e. no more variable soup: $brand, $grey-light, $border-active, $blue, $button_hover, etc etc | |
| // Declaring colors with a SASS function remains declaring colors: setcolor(), much easier to understand! | |
| // | |
| // Let's begin with a small tweak to a couple of SASS's built-in color functions, | |
| // as there is a more nuanced process to lighten and darken colors, | |
| // courtesy of: http://sassmeister.com/gist/d1b14280c6160f91f295 | |
| @function lighten-new($color, $amount: 0%) { | |
| @if $amount == 0 {$amount: 0%;} | |
| @return lighten($color, ($amount/100%) * (100% - lightness($color))); |
rhoover
/ Yelp Stars SCSS AngularJS
Created
February 24, 2014 13:34
Yelp Review Stars, SCSS and AngularJS
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
| // Courtesy: http://hugogiraudel.com/2014/02/24/star-rating-system-with-sass/ | |
| // Great technique integrated with AngularJS which is pulling in Yelp's JSON data | |
| // See it in action here: http://www.beertrail.vermontbrewers.com/#/ | |
| <section class="local-list"> | |
| <a ng-href="#/{{member.selector}}/dininglist/{{dining.id}}" class="local-list-item" ng-repeat="dining in diningList | orderBy: '+name' "> | |
| <img class="local-list-image" ng-src="{{dining.photo_url}}" /> | |
| <div class="local-list-vitals"> | |
| <p>{{dining.name}}</p> |