Skip to content

Instantly share code, notes, and snippets.

@samme
samme / _image-rendering.sass
Created August 10, 2013 23:50
Compass mixins for the CSS4 `image-rendering` property with some cross-browser equivalents
=image-rendering($hint)
@if $hint == 'crisp-edges'
@if $legacy-support-for-ie8 or $legacy-support-for-ie7
-ms-interpolation-mode: bilinear
@if $experimental-support-for-webkit
image-rendering: -webkit-optimize-contrast
+experimental-value(image-rendering, crisp-edges, $moz: $experimental-support-for-mozilla, $webkit: false, $o: $experimental-support-for-opera, $ms : false, $khtml: false, $official: true)
@samme
samme / number.js
Created August 10, 2013 23:56
Really simple number methods ☺
define(function (){
'use strict';
var math = Math,
abs = math.abs,
max = math.max,
min = math.min;
return {
absMax: function (a, b){
@samme
samme / _colors.sh
Created August 16, 2013 20:04
Show a reduced color table for a batch of images (ImageMagick)
convert *.png -append -colors 256 -unique-colors out/colors256.png
@samme
samme / compass-create.sh
Last active December 21, 2015 07:49
Create a new, sassy Compass project.
# compass help create
compass create my-project --syntax sass --sass-dir sass --css-dir css --images-dir img --javascripts-dir js --relative-assets --bare
# mate my-project my-project/config.rb
# subl my-project my-project/config.rb
open -t my-project/config.rb
@samme
samme / compass-watch-dev.sh
Created August 19, 2013 21:06
Compile "development"– and "production"–formatted stylesheets side by side, using compass.
# In a separate shell, watch using your config settings (e.g. production):
# compass watch
# compass watch --environment production
compass watch --css-dir css-dev --environment development
# or compile as needed:
# compass compile --css-dir css-dev --environment development
@samme
samme / html2haml-recursive.sh
Last active December 21, 2015 13:19 — forked from ebeigarts/gist:970898
Search directory & convert .html to .haml.
# gem install html2haml --prerelease
for f in $(find . -type f -name \*.html); do echo "$f -> $f.haml" && html2haml --ruby19-attributes $f > "$f.haml"; done
@samme
samme / _compass-cross-browser-support.sass
Last active December 21, 2015 15:18
Example cross-browser support configuration for Compass (http://compass-style.org/reference/compass/support/)
// http://compass-style.org/reference/compass/support/
// Omit hacks for IE ≤ 8
$legacy-support-for-ie6: false
$legacy-support-for-ie7: false
$legacy-support-for-ie8: false
// E.g., no -o-* properties :(
$experimental-support-for-opera: false
@samme
samme / _column-grid-background.mixin.scss
Last active December 21, 2015 16:48
Column-grid-background mixin for Compass. In some cases it seems more accurate than http://compass-style.org/reference/compass/layout/grid_background/#mixin-column-grid-background​​​, and the output is smaller.
@mixin column-grid-background(
$total : null, // unused
$column : $grid-background-column-width,
$gutter : $grid-background-gutter-width,
$offset : $grid-background-offset,
$column-color : $grid-background-column-color,
$gutter-color : $grid-background-gutter-color
) {
$column-stop: 100% * $column / ($column + $gutter);
@samme
samme / middleman-build-quiet.sh
Created September 5, 2013 19:19
Show only changed files when building a middleman project (http://middlemanapp.com/getting-started/)
bundle exec middleman build | grep -E '\b(create|delete|error|update)\b'
@samme
samme / install.sh
Created March 27, 2014 20:06
Install image_optim and external binaries (OS X)
# https://github.com/toy/image_optim
gem install image_optim
brew install advancecomp gifsicle jhead jpegoptim jpeg optipng pngcrush
npm install -g svgo