erin-dot-io’s gists

erin-dot-io / rainbow-gradient.css

Last active October 1, 2015 09:28

	.rainbow {
	color: rgb(206,106,255); /* Old browsers */
	-moz-mask-image: -moz-linear-gradient(top, rgb(206,106,255) 0%, rgb(201,97,252) 0%, rgb(95,255,255) 34%, rgb(102,249,98) 65%, rgb(255,96,96) 100%, rgb(255,105,106) 100%); /* FF3.6+ */
	-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(206,106,255)), color-stop(0%,rgb(201,97,252)), color-stop(34%,rgb(95,255,255)), color-stop(65%,rgb(102,249,98)), color-stop(100%,rgb(255,96,96)), color-stop(100%,rgb(255,105,106))); /* Chrome,Safari4+ */
	-webkit-mask-image: -webkit-linear-gradient(top, rgb(206,106,255) 0%,rgb(201,97,252) 0%,rgb(95,255,255) 34%,rgb(102,249,98) 65%,rgb(255,96,96) 100%,rgb(255,105,106) 100%); /* Chrome10+,Safari5.1+ */
	-o-mask-image: -o-linear-gradient(top, rgb(206,106,255) 0%,rgb(201,97,252) 0%,rgb(95,255,255) 34%,rgb(102,249,98) 65%,rgb(255,96,96) 100%,rgb(255,105,106) 100%); /* Opera 11.10+ */
	-ms-mask-image: -ms-linear-gradient(top, rgb(206,106,255) 0%,rgb(201,97,252) 0%,rgb(95,255,255) 34%

erin-dot-io / background-hidpi.scss

Created September 28, 2012 19:10

Sass/SCSS Mixin for Providing Simple HI-DPI/Retina Display Media Queries for Background Images

	// SCSS:

	$image-path: "/assets/images";

	@mixin background-hidpi($image-name, $image-extension: "png", $top: top, $left: left, $repeat: repeat, $color: #fff) {
	background: url("#{$image-path}/#{$image-name}.#{$image-extension}") $top $left $repeat $color;
	@media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
	background: url("#{$image-path}/#{$image-name}_2x.#{$image-extension}") $top $left $repeat $color;
	}
	}

erin-dot-io / css-arrow.scss

Last active December 15, 2015 10:39

A little mixin I built for easily creating css arrows in sass/scss using psuedo-classes. Demo: http://codepen.io/erinautomatic/pen/BLFqe

	// The mixin

	@mixin css-arrow($box-edge : bottom,
	$edge-side : center,
	$arrow-size : 10px,
	$edge-side-offset : 0,
	$fill-color : black,
	$border-color : none,
	$border-style : border) {

erin-dot-io / pixel-parity-rems.scss

Created March 27, 2013 20:38

Font-size pixel-parity REMs mixin for Sass/SCSS with legacy browser 'px' fallback. Neat!

	// the mixin

	@mixin font-size($size: 16) {
	font-size: ($size) + px;
	font-size: ($size / 16) + rem;
	}

	// example

	h6 { @include font-size(11); }

erin-dot-io / swipe-hint

Created October 21, 2013 02:43

Plugin for swipe.js that hints the previous or next slide in from the sides when hovering over a prev/next trigger element for non-touch users. Currently is still very buggy.

	$ ->
	window.homeSwipe = Swipe(document.getElementById('home-swipe'))

	new homeSwipeButtons()

	class homeSwipeButtons
	constructor: ->
	@bindElements()

	bindElements: ->

erin-dot-io / _.md

Created January 16, 2014 06:56

spiral wtf

[ Launch: An inlet to Tributary ] 8450869 by erinautomatic

erin-dot-io / keyframe-easing-for-bourbon.scss

Created January 17, 2014 01:21

Special easing functions built using @Keyframes. Requires Bourbon/SCSS

	//// easeOutBounce ////

	// looks like: http://easings.net/#easeOutBounce

	@include keyframes(easeOutBounce) {
	0% { @include transform(translateY(100px)); @include animation-timing-function(ease-in); }
	37% { @include transform(translateY(0px)); @include animation-timing-function(ease-out); }
	55% { @include transform(translateY(25px)); @include animation-timing-function(ease-in); }
	73% { @include transform(translateY(0px)); @include animation-timing-function(ease-out); }
	82% { @include transform(translateY(7px)); @include animation-timing-function(ease-in); }

erin-dot-io / _init.css.scss

Last active January 6, 2016 18:02

This is the SCSS partial I use to initialize all of my newly created Bourbon/Neat projects. Requires http://bourbon.io/ and http://neat.bourbon.io/

	/////////////////////////////////////////////////////////////////////
	// //
	// INITIALIZE ················································ //
	// //
	// put all non-directly compiled, globally required CSS here //
	// (variables, mixins, librabry includes like bourbon/neat, etc) //
	// //
	// add "@import 'init';" to the top of every scss partial //
	// //
	/////////////////////////////////////////////////////////////////////

erin-dot-io / velocity-ui-animations.js

Last active August 29, 2015 14:04

Volicty.js - custom UI Pack animations

	// Softly bounce up from bottom of object's height and fade in
	$.Velocity.RegisterUI('transition.flyUpIn', {
	defaultDuration: 600,
	calls: [
	[{ translateY: [ 0, '100%' ]}, 1, { easing: [ .28,1.47,.48,.96 ] }]
	]
	});


	// fade text up and in for erin.io hero section

erin-dot-io / _neat-breakpoints.scss

Last active August 29, 2015 14:06

Neat Breakpoints

	// These are my base breakpoints when working on projects that
	// utilize Bourbon (http://bourbon.io/) & Neat (http://neat.bourbon.io/)

	$desktop-wide : new-breakpoint(min-width 1370px);
	$desktop : new-breakpoint(min-width 1001px);
	$desktop-narrow : new-breakpoint(max-width 1000px);
	$desktop-narrow-only : new-breakpoint(min-width 769px max-width 1000px);
	$tablet : new-breakpoint(max-width 768px);
	$tablet-only : new-breakpoint(min-width 640px max-width 768px);
	$phone-wide : new-breakpoint(max-width 669px);

Erin Keeffe erin-dot-io