Skip to content

Instantly share code, notes, and snippets.

View JoshuaJones's full-sized avatar
:shipit:

Joshua Jones JoshuaJones

:shipit:
22 followers · 30 following
View GitHub Profile
@JoshuaJones
JoshuaJones / compass-retina-sprites.scss
Created October 6, 2012 20:42 — forked from thulstrup/compass-retina-sprites.scss
Using Compass to generate normal and retina sprite maps
$sprites: sprite-map("sprites/*.png");
$sprites-retina: sprite-map("sprites-retina/*.png");
@mixin sprite-background($name) {
background-image: sprite-url($sprites);
background-position: sprite-position($sprites, $name);
background-repeat: no-repeat;
display: block;
height: image-height(sprite-file($sprites, $name));
width: image-width(sprite-file($sprites, $name));
@JoshuaJones
JoshuaJones / gist:3885580
Created October 13, 2012 18:02
TextExpander Local Xip.Io URL Snippet
// Generated URL
%filltext:name=sitename:default=sitenamehere:width=15%.%snippet:,wifiip%.xip.io
// Wifiip Script Called
#!/bin/sh
/bin/echo -n `ipconfig getifaddr en1`
@JoshuaJones
JoshuaJones / index.html
Created November 20, 2012 18:33
CSS Animate Icon on Hover
<h3>The Animated Icon on Hover</h3>
<p>My animating skills suck, but it works!</p>
<a href="#" class="category">
<span class="icon"></span>
Category Link
</a>
<h3>The Image Sprite</h3>
<p>Each "frame" is 60px by 60px to fit nicely in the icon span.</p>
<div class="red">
@JoshuaJones
JoshuaJones / index.html
Created November 21, 2012 00:06
Font Icon Added with jQuery's Help
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font Icon Added with jQuery</title>
<style>
[data-icon] i {
font: normal 1.65em 'ModernPictogramsNormal';
padding-right: 5px;
@JoshuaJones
JoshuaJones / form_reset.sass
Created November 26, 2012 21:35 — forked from nathansmith/1_form-reset.scss
Form "Reset"
// Note: This file is dependent on Sass and Compass.
// Sass = http://sass-lang.com
// Compass = http://compass-style.org
@import "compass/css3"
// `Form Element Reset.
//----------------------------------------------------------------------------------------------------
input[type="search"]::-webkit-search-decoration
@JoshuaJones
JoshuaJones / gist:4156020
Created November 27, 2012 18:20
Acronym <abbr> List
<abbr title="Customer Relationship Management">CRM</abbr>
<abbr title="Content Management System">CMS</abbr>
<abbr title="Structured Query Language">SQL</abbr>
<abbr title="International Organization for Standards">ISO</abbr>
<abbr title="PHP: Hypertext Preprocessor">PHP</abbr>
<abbr title="HyperText Markup Language">HTML</abbr>
<abbr title="eXtensible HyperText Markup Language">XHTML</abbr>
<abbr title="Cascading Style Sheets">CSS</abbr>
<abbr title="JavaScript">JS</abbr>
<abbr title="European Computer Manufacturers Association Script">ECMAScript</abbr>
@JoshuaJones
JoshuaJones / gist:4171535
Created November 29, 2012 20:05
@mixin retina-image($filename, $image-width, $image-height, $extension: ".png") {
background-image: url($filename + $extension);
height: $image-height;
width: $image-width;
@media (min--moz-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6/2),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
@JoshuaJones
JoshuaJones / layout.scss
Created April 24, 2013 22:36
SCSS Template Base
// Normalize & Layout
article, aside, details, figcaption, figure, footer,
header, hgroup, nav, section, summary { display: block; }
audio, canvas, video {
display: inline-block;
*display: inline;
*zoom: 1;
}
audio:not([controls]) { display: none; }
[hidden] { display: none; }
@JoshuaJones
JoshuaJones / blocks-equalize.js
Last active December 16, 2015 17:18 — forked from nathanaelnsmith/blocks-equalize.js
$(function(){
$('.block-grid').each(function(index){
var $this = $(this),
blocks = $.makeArray($this.find('.block')).sort(sortByHeight)[0];
$this.find('.block').height($(blocks).height());
});
});
function sortByHeight(a,b) {
return ($(b).height() - $(a).height());
}
@JoshuaJones
JoshuaJones / gist:6224518
Created August 13, 2013 19:02
Javascript Switch Statement to provide a countries area code based off of Zend_Locale's output
var = countryCode = $('html').attr('lang'),
countryNum;
switch(countryCode) {
// Mexico
case 'es_MX':
countryNum = '52';
break;