Skip to content

Instantly share code, notes, and snippets.

View antsa's full-sized avatar

Antti Salonen antsa

  • Kisko Labs
  • Helsinki
View GitHub Profile
@antsa
antsa / hyphens.scss
Created August 23, 2011 07:33
Hyphens @mixin for Compass
// Provides a mixin to define hyphenation
//
// Requires Compass
//
// (http://blog.fontdeck.com/post/9037028497/hyphens)
// (http://www.w3.org/TR/css3-text/#hyphenation)
//
// $value - The hyphenation property value. One of "none", "manual", "auto" or "all"
//
// Example .scss:
@antsa
antsa / placeholder.scss
Created March 23, 2012 12:00
Placeholder mixin for Sass
// Placeholder @mixin for Sass
//
// A mixin to style placeholders in HTML5 form elements.
// Includes also a .placeholder class to be used with a polyfill e.g.
// https://github.com/mathiasbynens/jquery-placeholder
// Requires Sass 3.2.
//
// Example usage (.scss):
//
// input {
// =========================
// Example 1: using a @mixin
// =========================
// SCSS:
@mixin a_pink_box() {
float: left;
display: block;
color: pink;
@antsa
antsa / mq.scss
Last active March 2, 2019 16:41
Media Query mixin - @MQ
// A mixin for media queries: @mq
//
// Use with keywords in $medias array:
// @include mq($media: iphone) {
// ...
// }
//
// Use with manual queries:
// @include mq("all and (min-width:33em)") {
// ...
@antsa
antsa / gist:6533547
Created September 12, 2013 06:10
SVG fallback
<!-- Fallbacks of SVG -->
<svg width="96" height="96">
<image xlink:href="svg.svg" src="fallback.png" width="96" height="96"/>
</svg>
@mixin all-retina-sprites($map, $map2x) {
@media (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(min-resolution: 1.5dppx) {
$base-class: sprite-map-name($map);
.#{$base-class}-all-retina-sprites {
@antsa
antsa / IE_VPCs_OSX.md
Created February 6, 2012 09:15
IE VPCs & VirtualBox on OSX

Testing IE 7/8/9 on OSX

Steps needed to start IE7/8/9 testing on OSX with VirtualBox

@antsa
antsa / background_noise_function.rb
Created September 7, 2011 12:03 — forked from philippbosch/background_noise_function.rb
Sass implementation of the Noisy jquery plugin: https://github.com/DanielRapp/Noisy
require "chunky_png"
require "base64"
module Sass::Script::Functions
def background_noise(kwargs = {})
opts = {}
Sass::Util.map_hash({
"intensity" => [0..1, "", :Number, Sass::Script::Number.new(0.5) ],
"opacity" => [0..1, "", :Number, Sass::Script::Number.new(0.08)],
"size" => [1..512, "px", :Number, Sass::Script::Number.new(200) ],
// A sass @mixin to create the body border effect
// with pseudo elements as described by CSS-Tricks:
// http://css-tricks.com/body-border/
@mixin bodyborder($color, $width) {
body {
border-left: $width solid $color;
border-right: $width solid $color;
&:before, &:after {
// Maruku (https://github.com/nex3/maruku)
.content
:markdown
## Heading
Some text here
// =>
<div class='content'>