Taken from Todd Parker in JSBin
A Pen by Joseph Turner on CodePen.
Joseph Turner joseph-turner
joseph-turner
/ clearfix.scss
Last active
December 16, 2015 03:59
— forked from Usse/clearfix.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
| // Clearfix (add or extend this class on elements containing floated elements) | |
| .cf { | |
| zoom: 1; | |
| &:before, | |
| &:after { | |
| content: ''; | |
| display: table; | |
| } | |
| &:after { | |
| clear: both; |
joseph-turner
/ quotes.scss
Last active
December 16, 2015 04:09
[CSS Tricks](http://css-tricks.com/almanac/properties/q/quotes/)
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
| q { | |
| quotes: "“" "”" "‘" "’"; | |
| &:before { | |
| content: open-quote; | |
| } | |
| &:after { | |
| content: close-quote; | |
| } |
joseph-turner
/ multi-border.scss
Last active
December 16, 2015 04:09
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
| // Mixin for multiple borders | |
| $default-inner-border-width: 5px !default; | |
| $default-inner-border-color: red !default; | |
| $default-middle-border-width: 5px !default; | |
| $default-middle-border-color: green !default; | |
| $default-outer-border-width: 5px !default; | |
| $default-outer-border-color: blue !default; | |
| @mixin multi-border( | |
| $inner-border-width: $default-inner-border-width, | |
| $inner-border-color: $default-inner-border-color, |
joseph-turner
/ google-cdn.jquery.html
Created
April 15, 2013 16:48
Loading jQuery from google with local fallback.
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
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | |
| <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script> |
joseph-turner
/ analytics.js
Created
April 15, 2013 16:58
New analytics.js snippet. More detailed control at: https://developers.google.com/analytics/devguides/collection/analyticsjs/
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
| <!-- Google Analytics --> | |
| <script> | |
| (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | |
| (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | |
| m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) | |
| })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); | |
| ga('create', 'UA-XXXX-Y'); | |
| ga('send', 'pageview'); |
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
| <body> | |
| <div class="filler-content"> | |
| <p>body filler content...</p> | |
| <p>more content...</p> | |
| <p>more content...</p> | |
| </div> | |
| <footer> | |
joseph-turner
/ flexbox-mixin.scss
Created
May 29, 2013 22:21
Flexbox SASS mixin (Compass required) Implementation based on Chris Coyier's article:
Using Flexbox: Mixing Old and New for the Best Browser Support (http://css-tricks.com/using-flexbox/)
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
| // ================================================================== | |
| // Flexbox | |
| // | |
| // Implementation based on Chris Coyier's article: | |
| // Using Flexbox: Mixing Old and New for the Best Browser Support || http://css-tricks.com/using-flexbox/ | |
| // ================================================================== | |
| // Flexbox Context (applied to container element of flex items) | |
| @mixin flex-display { | |
| @include experimental-value(display, box, -moz, -webkit, not -o, -ms, not -khtml, official); // Old |
A Pen by Joseph Turner on CodePen.
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
| Find colors (hex, rgb(a), hsl(a)) | |
| #[a-fA-F0-9]{3,6}(\s|$|;)|(rgb|hsl)(a)?\((.*)\) |