Skip to content

Instantly share code, notes, and snippets.

View hiloki's full-sized avatar

Hiroki Tani hiloki

280 followers · 27 following
View GitHub Profile
@timkelty
timkelty / config.rb
Created January 11, 2012 15:28
Compass config.rb
# Note that while this file is in our config folder, it is
# symlinked to our site folders, so paths are relative from there
# Require gems and Compass plugins
# require 'rgbapng'
# require 'compass-fancybox-plugin'
require 'compass-growl'
# General
output_style = :expanded
@jimbojsb
jimbojsb / gist:1630790
Created January 18, 2012 03:52
Code highlighting for Keynote presentations

Step 0:

Get Homebrew installed on your mac if you don't already have it

Step 1:

Install highlight. "brew install highlight". (This brings down Lua and Boost as well)

Step 2:

@tdreyno
tdreyno / sprite_sheet.css
Created March 8, 2012 17:44
60 fps CSS Animation
@keyframes animate-particle {
0% {
background-position: 0 0px; }
1.695% {
background-position: 0 -124px; }
3.39% {
background-position: 0 -248px; }
@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));
@scottkellum
scottkellum / OOSass.md
Created March 24, 2012 15:53
OOCSS vs OOSass

OOCSS vs OOSass

note that this requires Sass 3.2 alpha or higher

OOCSS is awesome because it helps us organize our style sheets in clean and simple ways but it can be far too rigid for the new responsive web. How can we use preprocessors to preserve both flexibility and cleanliness of code? Can these objects be abstracted to our preprocessors?

Lets first take a look at three column widths in OOCSS to see how they compare.

CSS

@davatron5000
davatron5000 / gist:2254924
Created March 30, 2012 20:57
Static Site Generators

Backstory: I decided to crowdsource static site generator recommendations, so the following are actual real world suggested-to-me results. I then took those and sorted them by language/server and, just for a decent relative metric, their Github Watcher count. If you want a heap of other projects (including other languages like Haskell and Python) Nanoc has the mother of all site generator lists. If you recommend another one, by all means add a comment.

Ruby

@jonkemp
jonkemp / tooling.md
Created May 16, 2012 20:02
URL's from Paul Irish's talk: Tooling & The Webapp Development Stack
@studiomohawk
studiomohawk / bashrc
Created June 6, 2012 03:34
bashrc
#prompt
# @gf3’s Sexy Bash Prompt, inspired by “Extravagant Zsh Prompt”
# Shamelessly copied from https://github.com/gf3/dotfiles
if [[ $COLORTERM = gnome-* && $TERM = xterm ]] && infocmp gnome-256color >/dev/null 2>&1; then
export TERM=gnome-256color
elif infocmp xterm-256color >/dev/null 2>&1; then
export TERM=xterm-256color
fi
@y-yu
y-yu / inherit.md
Created August 9, 2012 06:57
JavaScriptの継承について

JavaScriptの継承について

全然理解出来てなかったので調べてみた。

経緯

function f () {
	// Class
}
@benvium
benvium / kaleidoscope.html
Created August 17, 2012 09:57
A Pure CSS3 Kaleidoscope. Demonstrates using a mask image defined using SVG, and CSS3 transforms.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
.slice {
background-image: url(http://upload.wikimedia.org/wikipedia/commons/8/89/Swiss_cheese_cubes.jpg);
position: absolute;
left: 0;