Skip to content

Instantly share code, notes, and snippets.


Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets!

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

cowboy / stringify.js
Created Sep 19, 2012
JavaScript: like JSON.stringify but handles functions, good for creating arbitrary .js objects?
View stringify.js
var stringify = function(obj, prop) {
var placeholder = '____PLACEHOLDER____';
var fns = [];
var json = JSON.stringify(obj, function(key, value) {
if (typeof value === 'function') {
return placeholder;
return value;
}, 2);
possan / test.js
Created Apr 28, 2012
Harassing some sifteo cubes with javascript
View test.js
function Simulator(){
var ret = {}
var _callback = undefined;
var _queue = [];
var _counter = 0;
ret.fireCallback = function(json) {
// console.log('Fire event '+json);
if( _callback ) _callback(json);
View responsive.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Responsive Design Testing</title>
body { margin: 20px; font-family: sans-serif; overflow-x: scroll; }
.wrapper { width: 6000px; }
.frame { float: left; }
h2 { margin: 0 0 5px 0; }
adactio / mediaquerycolums.html
Created Jan 12, 2012
Multiple columns dependent on media queries that test for height as well as width.
View mediaquerycolums.html
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Media Query Multiple Columns</title>
<meta name="viewport" content="width=device-width, intial-scale=1">
@media all and (min-width: 40em) and (min-height: 36em) {
[role="main"] {
-webkit-column-count: 2;
scottjehl / hideaddrbar.js
Created Aug 31, 2011
Normalized hide address bar for iOS & Android
View hideaddrbar.js
* Normalized hide address bar for iOS & Android
* (c) Scott Jehl,
* MIT License
(function( win ){
var doc = win.document;
// If there's a hash, or addEventListener is undefined, stop here
if( !location.hash && win.addEventListener ){