Skip to content

Instantly share code, notes, and snippets.

View pfulton's full-sized avatar

Patrick Fulton pfulton

View GitHub Profile
.initial
.top-banner-ad-container
.top-banner-ad-container--desktop
.top-banner-ad-container--facia-layout
.ad-slot
@burnto
burnto / _image_replace.scss
Created February 25, 2011 06:59
Image replacement scss mixin
// Image replacement scss mixin
@mixin image_replace($img, $width, $height, $x: 0, $y: 0) {
display: block;
background: image-url($img) no-repeat $x $y;
width: $width;
height: $height;
overflow: hidden;
text-indent: -9999em;
}
@nathos
nathos / fancy-hover-mixin.sass
Last active September 25, 2015 17:47
Compass fancy-hover - snazzy-looking image replacement hovers with an animated opacity ramp. Now using Compass sprites so you don't have to do the dirty work! See the demo at http://nathos.github.com/fancy-hovers/
@mixin fancy-hover($sprite_dir, $off_state, $hover_state, $speed: 0.3s)
$sprites: sprite-map("#{$sprite_dir}/*.png")
$width: image-width(sprite_file($sprites, $off_state))
$height: image-height(sprite_file($sprites, $off_state))
@include hide-text
width: $width
height: $height
background: sprite($sprites, $off_state) no-repeat
display: block
position: relative
@rickharris
rickharris / _shared.scss
Created December 18, 2011 17:02
Media queries with IE support using Sass 3.2 features
// Using this structure, this file should be your canonical stylesheet where
// everything would be imported into, so that you can just `@import "shared";`
// in both your normal and IE stylesheets, only having to add libraries and
// such in one place.
// These styles are just a contrived example.
body {
font-size: 18px;
@include respond-to(desktops) {
color: blue;
@garethrees
garethrees / tumblr.scss
Created January 17, 2012 11:26
Tumblr embed code styling hooks (SCSS)
.tumblr_posts {
.tumblr_post {
.tumblr_title {}
.tumblr_body img {}
.read_more_container {}
.read_more_container a.read_more {}
}
.tumblr_text_post {
@ethanmuller
ethanmuller / Readme
Created November 8, 2012 16:03
HD Sprite Mixin
This mixin requires three arguments: the standard definition sprite map, the hd sprite map, and the icon you want to use.
Optionally, you can give it X and Y offsets to position it, a width to resize it, or you can center it on the X axis, Y axis, or both.
Use it something like this:
// Create sprite maps
// (Just do this once per sprite sheet)
$general-sd: sprite-map("icons/general/*.png", $spacing: 30px);
$general-hd: sprite-map("hd/icons/general/*.png", $spacing: 60px);
@nfreear
nfreear / wai-aria-landmark-roles-html5.haml
Created February 5, 2013 13:17
HTML5 boilerplate with WAI-ARIA landmark roles (IET-LTT, ou, qa, Haml)
<!doctype html>
%html{:lang => "en"}
%meta{:content => "IE=edge", "http-equiv" => "X-UA-Compatible"}/
%meta{:charset => "utf-8"}/
/[if lt IE 9]
<script src="//html5shim.googlecode.com/svn/trunk/html5-els.js"></script>
<script> document.createElement("main") </script>
%title MY TITLE
%header{:role => "banner"}
%h1 BANNER
@marcmartino
marcmartino / mergeSortedArrays.js
Created December 23, 2013 20:25
Write a function that takes two sorted lists of numbers and merges them into a single sorted list.
var assert = require('assert');
function sortMerged(lOne, lTwo) {
return lOne.reduce(function (sortedList, num, index) {
var position = findPositionBinary(sortedList, num);
sortedList.splice(position, 0, num);
return sortedList;
}, lTwo);
}
@jo-snips
jo-snips / custom-one-month.php
Created September 9, 2012 23:04
The Events Calendar: Custom Query for 1 Month Future Events
<?php
global $post;
$current_date = date('j M Y');
$end_date = date('j M Y', strtotime('1 month'));
echo 'Start Date:'. $current_date;
echo 'End Date:'. $end_date;
$all_events = tribe_get_events(
array(
@kinopyo
kinopyo / sinatra_render_html.rb
Created October 21, 2011 07:13
How to render static HTML files in Sinatra.
require 'sinatra'
get '/' do
File.read(File.join('public', 'index.html'))
# or
# send_file File.join(settings.public, 'index.html')
end