Skip to content

Instantly share code, notes, and snippets.

View pfulton's full-sized avatar

Patrick Fulton pfulton

View GitHub Profile
@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;
}
@nathansmith
nathansmith / check_all.js
Last active March 10, 2019 16:39
Used to check all checkboxes in a page.
// Paste into Firebug or Chrome Dev Tools console
// when viewing a page with multiple checkboxes.
(function(d) {
var input = d.querySelectorAll('input[type="checkbox"]');
var i = input.length;
while (i--) {
input[i].checked = true;
}
@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
@necolas
necolas / snippet.js
Created June 14, 2011 20:36
Optimised async loading of cross-domain scripts
/*
* Updated to use the function-based method described in http://www.phpied.com/social-button-bffs/
* Better handling of scripts without supplied ids.
*
* N.B. Be sure to include Google Analytics's _gaq and Facebook's fbAsyncInit prior to this function.
*/
(function(doc, script) {
var js,
fjs = doc.getElementsByTagName(script)[0],
@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
@necolas
necolas / README.md
Last active March 28, 2024 20:34
Experimenting with component-based HTML/CSS naming and patterns

NOTE I now use the conventions detailed in the SUIT framework

Template Components

Used to provide structural templates.

Pattern

t-template-name
@airways
airways / 1 dist.config.php
Created November 1, 2011 00:44
Simple, single ExpressionEngine configuration file to override almost all paths and server settings. As used by @airways and @litzinger.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
// Simple, single configuration file to override almost all paths and server settings. As used by @airways
// and @litzinger.
// Only check in the default as dist.config.php, set your version control system to ignore config.php so that
// local users and each instance (staging, production) can have their own settings.
// These config files are mainly meant to be used on a shared development server used by all developers,
// although it works almost as well for local development as well.
@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 {
@thulstrup
thulstrup / compass-retina-sprites.scss
Created March 20, 2012 19:18
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));