Skip to content

Instantly share code, notes, and snippets.

Rasmus Thulstrup thulstrup

Block or report user

Report or block thulstrup

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@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
@Snugug
Snugug / 01-variable-respond-to-mixin.md
Created Apr 25, 2012
Variable-driven respond-to mixin
View 01-variable-respond-to-mixin.md

What if controlling your media queries was as easy as adding on to a Sass list? What if I told you it now is?

This snippet comes from a modified version of mixins in the Aura Responsive Framework and came from me hijacking the respond-to mixin namespace but still wanting to use it for custom media queries. It's a little ugly and requires Sass 3.2+ (for now, (sudo) gem install sass --pre), but it works a charm.

There are two fairly mundane caveats to this method. First, every media query needs to be named. Second, every media query needs a size and assumes min-width and screen. If you want to change min-width, simply add your operator as another option, but if you want to change screen, you need to also include your operator even if you want it to be min-width.

Also, I haven't built in warnings yet for when you do bad things, so bear that in mind.

Without further adue, tada.

@jlong
jlong / uri.js
Created Apr 20, 2012
URI Parsing with Javascript
View uri.js
var parser = document.createElement('a');
parser.href = "http://example.com:3000/pathname/?search=test#hash";
parser.protocol; // => "http:"
parser.hostname; // => "example.com"
parser.port; // => "3000"
parser.pathname; // => "/pathname/"
parser.search; // => "?search=test"
parser.hash; // => "#hash"
parser.host; // => "example.com:3000"
@mirisuzanne
mirisuzanne / 1_index.html
Created Apr 4, 2012
Suggested syntax for responsive Susy layouts
View 1_index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="stylesheets/screen.css">
</head>
<body>
<div class="container c1"></div>
<div class="container c2"></div>
View _media-queries.scss
// Media Queries in Sass 3.2
//
// These mixins make media queries a breeze with Sass.
// The media queries from mobile up until desktop all
// trigger at different points along the way
//
// And important point to remember is that and width
// over the portrait width is considered to be part of the
// landscape width. This allows us to capture widths of devices
// that might not fit the dimensions exactly. This means the break
@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
@twosixcode
twosixcode / gist:1988097
Created Mar 6, 2012
Make "Paste and Indent" the default paste in Sublime Text 2
View gist:1988097
// swap the keybindings for paste and paste_and_indent
{ "keys": ["super+v"], "command": "paste_and_indent" },
{ "keys": ["super+shift+v"], "command": "paste" }
@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); }
}
@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
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
You can’t perform that action at this time.