Skip to content

Instantly share code, notes, and snippets.

Avatar

Rasmus Thulstrup thulstrup

View GitHub Profile
@cubiq
cubiq / select-reset.html
Created May 27, 2014
How to reset a select tag
View select-reset.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Styled Select</title>
</head>
<style>
* {
View percentage_grid.sass
//
// How I would approach a fluid grid:
//
// [1] Let the name reflect the % width,
// eliminating "1 of 12" guesswork.
//
// [2] Also, put 10px of padding to either
// side, to stack and make a 20px gutter.
//
// [3] Make the box-sizing = border-box, so that
@bastianallgeier
bastianallgeier / dabblet.css
Created Jan 5, 2012
PE to use SVG as CSS background image with fallback for IE8/7/6
View dabblet.css
/**
* PE to use SVG as CSS background image with fallback for IE8/7/6
*
* Using SVG as CSS background image to display
* resolution-independent logos or icons is pretty
* awesome but does completely fail on IE8/7/6
*
* The trick:
* All three IE versions don't support rgba color values.
* By defining a rgba background color together with the
@chriseppstein
chriseppstein / 0_usage.scss
Created Feb 29, 2012
This is code that runs using Sass 3.2 prerelease and something like this will be in compass soon.
View 0_usage.scss
@include keyframes(appear-and-roundify) {
0% { opacity: 0; @include border-radius(2px); }
100% { opacity: 1; @include border-radius(10px); }
}
@scottkellum
scottkellum / _grid.sass
Created Mar 10, 2012
Singularity grid file
View _grid.sass
// MEASUREMENTS
// Grid types to work on -- column, scale
$grid-type: column !default
$scale-grid-direction: rtl !default
$scale-grid-style: incremental !default
$base-size: 16px !default
$line-height: 1.3em !default
@codingdesigner
codingdesigner / breakpoint.sass
Created May 21, 2012
SURVIVAL KIT - BREAKPOINT
View breakpoint.sass
////////////////////////////
// SURVIVAL KIT - BREAKPOINT
// breakpoint($breakpoint, $media: 'screen')
////////////////////////////
$breakpoint-default-feature: min-width !default
// create $breakpoint variables like so
// assume $breakpoint-default-feature if only a number
$breakpoint1: 500px
View demo.html
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="ie ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@KuraFire
KuraFire / rgbaa.scss
Created Sep 13, 2012
More dynamic, oldIE-compatible SCSS function for rgba
View rgbaa.scss
@function rgbaa($args...) {
// rgbaa(#FFF, .5)
@if length($args) == 2 {
$hex: nth($args, 1);
$alpha: nth($args, 2);
@if $oldIE == 1 {
@return rgb(red($hex), green($hex), blue($hex));
} @else {
@return rgba(red($hex), green($hex), blue($hex), $alpha);
@micahgodbolt
micahgodbolt / SassMeister-input.scss
Created Jun 24, 2013
Another stab at Filament Group's Element Query challenge.
View SassMeister-input.scss
// ---
// Sass (v3.2.9)
// ---
@mixin respond-to($queries...) {
$length: length($queries);
@for $i from 1 through $length{
@if $i % 2 == 1 {
@media screen and (min-width: nth($queries, $i)) {
@mirisuzanne
mirisuzanne / reference.mkdn
Created Aug 22, 2011
Susy 0.9 Reference Documentation
View reference.mkdn

Susy 0.9 Reference Documentation

See the official Susy site for 1.0 documentation.

Terms

  • Susy Grid: A grid that you build with Susy. You can have multiple on one page if you need.
  • Grid Element: Any HTML element that is aligned to a Susy Grid.
  • Container: The root element in a Susy Grid. Anything inside it is a potential Grid Element.
You can’t perform that action at this time.