Skip to content

Instantly share code, notes, and snippets.

/* modernizer flexbox functionality */
!function(e,n,t){function r(e,n){return typeof e===n}function o(){var e,n,t,o,s,i,a;for(var l in C){if(e=[],n=C[l],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t<n.options.aliases.length;t++)e.push(n.options.aliases[t].toLowerCase());for(o=r(n.fn,"function")?n.fn():n.fn,s=0;s<e.length;s++)i=e[s],a=i.split("."),1===a.length?Modernizr[a[0]]=o:(!Modernizr[a[0]]||Modernizr[a[0]]instanceof Boolean||(Modernizr[a[0]]=new Boolean(Modernizr[a[0]])),Modernizr[a[0]][a[1]]=o),g.push((o?"":"no-")+a.join("-"))}}function s(e){var n=x.className,t=Modernizr._config.classPrefix||"";if(_&&(n=n.baseVal),Modernizr._config.enableJSClass){var r=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");n=n.replace(r,"$1"+t+"js$2")}Modernizr._config.enableClasses&&(n+=" "+t+e.join(" "+t),_?x.className.baseVal=n:x.className=n)}function i(e,n){return function(){return e.apply(n,arguments)}}function a(e,n,t){var o;for(var s in e)if(e[s]in n)return t===!1?e[s]:(
@JoeNoPhoto
JoeNoPhoto / breakpointMixin.scss
Created October 14, 2015 06:56
Mixin for adding breakpoints
@mixin bp-large {
@media only screen and (max-width: 60em) {
@content;
}
}
@mixin bp-medium {
@media only screen and (max-width: 40em) {
@content;
}
@JoeNoPhoto
JoeNoPhoto / remFontSizeMixin.scss
Created October 14, 2015 07:01
rem font size with pixel fallback
@function calculateRem($size) {
$remSize: $size / 16px;
@return $remSize * 1rem;
}
@mixin font-size($size) {
font-size: $size;
font-size: calculateRem($size);
}
@JoeNoPhoto
JoeNoPhoto / svgBackgroundFallback.scss
Created October 14, 2015 07:03
SVG background images with PNG and retina fallback
$image-path: '../img' !default;
$fallback-extension: 'png' !default;
$retina-suffix: '@2x';
@mixin background-image($name, $size:false){
background-image: url(#{$image-path}/#{$name}.svg);
@if($size){
background-size: $size;
}
.no-svg &{
background-image: url(#{$image-path}/#{$name}.#{$fallback-extension});
@JoeNoPhoto
JoeNoPhoto / animationAndKeyframes.scss
Last active October 14, 2015 07:10
Animations and Keyframes Mixin
@mixin keyframes($animation-name) {
@-webkit-keyframes $animation-name {
@content;
}
@-moz-keyframes $animation-name {
@content;
}
@-ms-keyframes $animation-name {
@content;
}
@JoeNoPhoto
JoeNoPhoto / transititionsMixin.scss
Created October 14, 2015 07:12
Transistions Mixin
@mixin transition($args...) {
-webkit-transition: $args;
-moz-transition: $args;
-ms-transition: $args;
-o-transition: $args;
transition: $args;
}
@JoeNoPhoto
JoeNoPhoto / crossBrowserOpacity.scss
Created October 14, 2015 07:14
Cross Browser Opacity
@mixin opacity($opacity) {
opacity: $opacity;
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie); //IE8
}
@JoeNoPhoto
JoeNoPhoto / hideElementMixin.scss
Created October 14, 2015 07:15
Hide Element Mixin
%visuallyhidden {
margin: -1px;
padding: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip: rect(0, 0, 0, 0);
position: absolute;
}
@JoeNoPhoto
JoeNoPhoto / centeredTextFullBG.sass
Last active October 18, 2015 19:23
Vertically Centered Text on a Full Sized BG Image
@mixin image-spacer($ar: 1.00, $max-height: 600px, $min-height: 0, $container-width: 1.00) {
@if $min-height <= 1.00 and $min-height > 0 {
$container-width: $min-height;
$min-height: 0;
}
&:before {
content: '';
display: inline-block;
@JoeNoPhoto
JoeNoPhoto / mediaQueryStack.sass
Last active October 18, 2015 19:10
Media Query Stack
$media-stack:
(group: tablet, id: general, rule: "only screen and (min-device-width: 700px)"),
(group: small, id: general, rule: "only screen and(min-device-width: 1100px)"),
(group: small, id: inbetween, rule: "only screen and(min-device-width: 1100px) and (max-device-width: 1400px)"),
(group: large, id: general, rule: "only screen and(min-device-width: 1400px)"),
(group: print, id: general, rule: "only print"),
(group: custom, id: screen, rule: "only screen and");
@mixin media($group, $id: general, $customRule: ""){
@each $media in $media-stack{