erin-dot-io’s gists

erin-dot-io / img-align.scss

Last active August 29, 2015 14:18

Remove white space below image (<img>) tags

	// Inline elements leave space for decenders in text strings (ex: g, q, j, p)
	// Use this rule to remove the decender white space for image tags:
	img {
	vertical-align: bottom;
	}

erin-dot-io / placeholder.scss

Created April 1, 2015 01:03

Placeholder text css styling for form elements

	//placeholder colors
	$placeholder-color : #aaa;
	$placeholder-color-focus : #ccc;
	// Placeholder CSS. Requires Bourbon (bourbon.io)
	input {
	@include placeholder {color: $placeholder-color;}
	&:focus {
	&::-webkit-input-placeholder {color: $placeholder-color-focus;}
	&:-moz-placeholder {color: $placeholder-color-focus;}
	&::-moz-placeholder {color: $placeholder-color-focus;}

erin-dot-io / custom-select.html

Created March 17, 2015 07:22 — forked from mojaray2k/jsbin.burut.html

	<html>
	<head>
	<title>Select styles with CSS only</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	body {
	background-color: #fff;
	font-family: helvetica, sans-serif;
	margin: 4% 10%
	}

erin-dot-io / _mixins.css.scss

Last active August 29, 2015 14:10

Boilerplate Mixins

	// cross-browser font rendering

	@mixin font-smoothing($value: on) {
	@if $value == on {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}
	@else if $value == off {
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: auto;

erin-dot-io / resizer_bookmarklet.js

Created September 24, 2014 19:15

iPhone 6 Viewport Resizer Bookmarklet

javascript:void((function(d){if(self!=top||d.getElementById('toolbar')&&d.getElementById('toolbar').getAttribute('data-resizer'))return false;d.write('<!DOCTYPE HTML><html style="opacity:0;"><head><meta charset="utf-8"></head><body><a data-viewport="320x480" data-icon="mobile" title="Mobile (e.g. Apple iPhone)">Mobile (e.g. Apple iPhone)</a><a data-viewport="320x568" data-icon="mobile" data-version="5" title="Apple iPhone 5">Apple iPhone 5</a><a data-viewport="375x667" data-icon="mobile" data-version="6" title="Apple iPhone 6">Apple iPhone 6</a><a data-viewport="414x736" data-icon="mobile" data-version="6+" title="Apple iPhone 6 Plus">Apple iPhone 6 Plus</a><a data-viewport="768x1024" data-icon="tablet" title="Tablet (iPad 2-3rd, mini)">Tablet (iPad 2-3rd, mini)</a><a data-viewport="1366x583" data-icon="notebook" data-version="11" title="Macbook Air 11-inch (Viewable Area)">Macbook Air 11-inch (Viewable Area)</a><a data-viewport="1440x715" data-icon="notebook" data-version="13" title="Macbook Air 13-inch (Vie

erin-dot-io / markdown_helper.rb

Last active May 16, 2017 14:01

Markdown helper & parser for Middleman apps

	# I use this in conjunction with Contentful CMS to render blocks of markdown into my static middleman templates.

	# In your gemfile, add Redcarpet:
	gem 'redcarpet'

	# ...and do a bundle install

	# In your config.rb, add this line:
	set :markdown_engine, :redcarpet

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-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 / _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 / 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 Keeffe erin-dot-io