Taken from Todd Parker in JSBin
A Pen by Joseph Turner on CodePen.
Taken from Todd Parker in JSBin
A Pen by Joseph Turner on CodePen.
A Pen by Joseph Turner on CodePen.
// Clearfix (add or extend this class on elements containing floated elements) | |
.cf { | |
zoom: 1; | |
&:before, | |
&:after { | |
content: ''; | |
display: table; | |
} | |
&:after { | |
clear: both; |
q { | |
quotes: "“" "”" "‘" "’"; | |
&:before { | |
content: open-quote; | |
} | |
&:after { | |
content: close-quote; | |
} |
// 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, |
<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> |
<!-- 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'); |
<body> | |
<div class="filler-content"> | |
<p>body filler content...</p> | |
<p>more content...</p> | |
<p>more content...</p> | |
</div> | |
<footer> | |
// ================================================================== | |
// 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 |
Find colors (hex, rgb(a), hsl(a)) | |
#[a-fA-F0-9]{3,6}(\s|$|;)|(rgb|hsl)(a)?\((.*)\) |