Skip to content

Instantly share code, notes, and snippets.

View ryanburgess's full-sized avatar

Ryan Burgess ryanburgess

1.1k followers · 65 following
View GitHub Profile
@ryanburgess
ryanburgess / Inline Retina Images.js
Last active December 30, 2015 17:49
A simple way to use inline retina images. Add the class "retina" to the inline image and make sure to have a retina version of the image in the same directory using the same naming convention just appending "@2x" to the end.
// Checking for Retina Devices
var query = "(-webkit-min-device-pixel-ratio: 1.5),\
(min--moz-device-pixel-ratio: 1.5),\
(-o-min-device-pixel-ratio: 3/2),\
(min-device-pixel-ratio: 1.5),\
(min-resolution: 144dpi),\
(min-resolution: 1.5dppx)";
if (window.devicePixelRatio > 1 || (window.matchMedia && window.matchMedia(query).matches)) {
@ryanburgess
ryanburgess / REM Unit SASS Mixin.scss
Last active December 30, 2015 18:09
REM Unit SASS Mixin auto automatically outputs rem units and pixel value fallback for legacy browsers.
// -----------------------------------------
// REM Units with PX fallback
// -------------------------------------------
// example: @include rem("margin", 10, 5, 10, 5);
// example: @include rem("font-size", 14);
@mixin rem($property, $values...) {
@ryanburgess
ryanburgess / Linear Gradient SASS Mixin.scss
Last active December 30, 2015 18:09
Generate linear gradient code for all browsers by passing the top and bottom color values in the SASS mixin.
// -----------------------------------------
// Linear Gradients
// -------------------------------------------
// example: @include linearGradient(#cccccc, #333333);
@mixin linearGradient($top, $bottom){
background: $top; /* Old browsers */
@ryanburgess
ryanburgess / Retina Images SASS Mixin.scss
Last active December 30, 2015 18:09
Retina images SASS mixin generates the media query for retina display and uses the retina background image with background size in both pixels and REM units.
// -----------------------------------------
// Retina Images
// -------------------------------------------
// example: @include retina("logo2x.png", 100, 50);
@mixin retina($image, $width, $height) {
@media (min--moz-device-pixel-ratio: 1.3),
@ryanburgess
ryanburgess / Box Model SASS Mixin.scss
Last active December 30, 2015 18:09
Add box sizing to your CSS using the Box Model SASS mixin.
// -----------------------------------------
// Box Model
// -------------------------------------------
@mixin box-sizing($box-model) {
-webkit-box-sizing: $box-model;
-moz-box-sizing: $box-model;
box-sizing: $box-model;
@ryanburgess
ryanburgess / Clearfix SASS Mixin.scss
Last active December 30, 2015 18:09
Add clearfix to your CSS or a specific element using the Clearfix SASS mixin.
// -----------------------------------------
// Clearfix after element
// -------------------------------------------
// usage: @include clearfix();
@mixin clearfix() {
& {
@ryanburgess
ryanburgess / Translate SASS Mixin.scss
Last active December 30, 2015 18:09
Add translate to an element using the Translate SASS Mixin.
// -----------------------------------------
// Translate
// -------------------------------------------
// usage: @include translate(0);
@mixin translate($value){
-webkit-transform: translatez($value);
@ryanburgess
ryanburgess / CSS Transition Mixins.scss
Last active December 30, 2015 18:09
Create cross browser CSS transitions easily using the CSS Transition Mixins.
// -----------------------------------------
// Transitions
// -------------------------------------------
// example: @include single-transition(background, 1s, ease-in-out, 0);
@mixin single-transition($property, $duration, $timing-function, $delay) {
-webkit-transition: $property $duration $timing-function $delay;
@ryanburgess
ryanburgess / Hide Text SASS Mixin.scss
Last active December 30, 2015 18:09
Hide Text easily using the Hide Text Mixin.
// -----------------------------------------
// Hide Text
// -------------------------------------------
// example: @include hide-text();
@mixin hide-text() {
position:relative;
@ryanburgess
ryanburgess / Opacity SASS Mixin.scss
Last active December 30, 2015 18:18
Add opacity to a class in your SASS file using the Opacity SASS Mixin.
// -----------------------------------------
// Opacity
// -------------------------------------------
// example: @include opacity(0.8);
@mixin opacity($opacity) {
opacity: $opacity;