Skip to content

Instantly share code, notes, and snippets.

View antsa's full-sized avatar

Antti Salonen antsa

26 followers · 28 following
  • Kisko Labs
  • Helsinki
View GitHub Profile
@neiled
neiled / hamlhtml5boilerplate.html.haml
Created November 25, 2010 23:20
My haml version of the html 5 boiler plate code
!!! 5
/[if lt IE 7] <html lang="en" class="no-js ie6">
/[if IE 7 ] <html lang="en" class="no-js ie7">
/[if IE 8 ] <html lang="en" class="no-js ie8">
/[if IE 9 ] <html lang="en" class="no-js ie9">
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
%head
%meta{:charset => "utf-8"}/
/
Always force latest IE rendering engine (even in intranet) &amp; Chrome Frame
@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
@arielsalminen
arielsalminen / triggerpoints.css
Created May 15, 2011 12:54
Triggerpoints for kiskolabs.com
/* 970px and under */
@media screen and (max-width: 970px) { ... }
/* 840px and under */
@media screen and (max-width: 840px) { ... }
/* 740px and under */
@media screen and (max-width: 740px) { ... }
/* 600px and under */
@media screen and (max-width: 600px) { ... }
/* 480px and under */
@media screen and (max-width: 480px) { ... }
@idan
idan / _more.scss
Created June 6, 2011 08:40
More is Less
$less-column-width: 68px;
$less-gutter-width: 24px;
@function column-width($columns) {
@return ($less-column-width * $columns) + ($less-gutter-width * ($columns - 1));
}
@function grid-padding-px($columns) {
@if $columns == 10 {
@return 48px;
@philippbosch
philippbosch / background_noise_function.rb
Created June 12, 2011 07:54 — forked from aaronrussell/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) ],
@chriseppstein
chriseppstein / svg_bullets.rb
Created July 1, 2011 20:32
require 'sass'
module Sass::Script::Functions
def svg_circle(radius, color, circle_type)
img = if circle_type.value == "disc"
%Q{<circle cx="#{radius.value}" cy="#{radius.value}" r="#{radius.value}"
stroke-width="0" fill="#{color}"/>}
else
%Q{<circle cx="#{radius.value}" cy="#{radius.value}" r="#{radius.value}"
stroke="#{color}" stroke-width="1" fill="white"/>}
@neall
neall / compiled.css
Created July 5, 2011 20:25
My SCSS mixin to give me a radial gradient over a linear gradient
.selector {
background: #f8ab2f;
background: -webkit-gradient(radial, 40% 0, 0, 100% 100%, 100,
color-stop(0, rgba(251, 215, 57, 0.5)),
color-stop(1, rgba(246, 128, 38, 0.5))),
-webkit-gradient(linear, 0 0, 0 100%,
color-stop(0, #fbd739),
color-stop(1, #f68026));
background: -webkit-linear-gradient(top, rgba(251, 215, 57, 0.5), rgba(246, 128, 38, 0.5)),
-webkit-radial-gradient(40% 0, farthest-corner, #fbd739, #f68026);
@charlesroper
charlesroper / 1. input.scss
Created July 29, 2011 09:58
Responsive Web Design with Sass (SCSS syntax)
@function pxem($pxval, $base: 16px) {
// Function to take a pixel value and divide it by a base value in order to
// return the size in ems. Default base value is 16px
@return ($pxval / $base) * 1em; // multiply by 1em to convert px to ems.
}
body {
background-color: #DCDBD9;
color: #2C2C2C;
font: normal 100% Cambria, Georgia, serif;
@chriseppstein
chriseppstein / _grid-system.scss
Created August 22, 2011 17:43
Building Responsive Layouts with Sass
@import "compass/utilities/general/clearfix";
$gutter-width: 10px; // All grids systems have the same gutter width
$float-direction: left;
$left-gutter-width: ceil($gutter-width / 2) !default;
$right-gutter-width: $gutter-width - $left-gutter-width !default;
$base-line-height: 21px;
$show-grid-background: false;
@mixin centered {
@chriseppstein
chriseppstein / 0_selector_hacks.scss
Created September 14, 2011 04:27
This gist demonstrates some uses of the new sass feature: Passing content blocks to mixins.
@mixin ie6 { * html & { @content } }
#logo {
background-image: url("/images/logo.png");
@include ie6 { background-image: url("/images/logo.gif"); }
}