Marshall MarshallChen

Responsive layouts in stylus

There is no span1..15 styles, instead your css defines your layout and your html remains semantic and not polluted with display information. As it should be.
The markup is incredibly easy, you specify the wrappers width, and then each columns width in percentages. Every other grid framework I've found is incredibly complicated with this.
It allows you to have the exact same markup, and completely different styles for different devices, resolutions, stylesheets, whatever. As it should be.

start new:

tmux

start new with session name:

tmux new -s myname

	/Make position:fixed work in IE6!/

	.fixed-top /* position fixed Top */{position:fixed;bottom:auto;top:0;}
	.fixed-bottom /* position fixed Bottom */{position:fixed;bottom:0;top:auto;}
	.fixed-left /* position fixed Left */{position:fixed;right:auto;left:0;}
	.fixed-right /* position fixed right */{position:fixed;right:0;left:auto;}

	* html,* html body /* IE6 Fixed Position Jitter Fix */{background-image:url(about:blank);background-attachment:fixed;}
	* html .fixed-top /* IE6 position fixed Top */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
	* html .fixed-right /* IE6 position fixed right */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)\|\|0)-(parseInt(this.currentStyle.marginRight,10)\|\|0));}

	echo 'export PATH=$HOME/local/bin:$PATH' >> ~/.bashrc
	. ~/.bashrc
	mkdir ~/local
	mkdir ~/node-latest-install
	cd ~/node-latest-install
	curl http://nodejs.org/dist/node-latest.tar.gz \| tar xz --strip-components=1
	./configure --prefix=~/local
	make install # ok, fine, this step probably takes more than 30 seconds...
	curl https://www.npmjs.org/install.sh \| sh

	// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
	// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

	// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

	// MIT license

	(function() {
	var lastTime = 0;
	var vendors = ['ms', 'moz', 'webkit', 'o'];

	/* Mobile / General Styles
	---
	Code up general styles and mobile styles, use media queries to adapt to larger displays.
	Things for this section: Reset, Typography, Baseline grid, etc. Convenience methods for image-replacement, hiding, clearing etc.
	*/




	/* Desktop and iPad/Tablet specific styles. */

	"use strict";

	// Uses jQuery and Q.

	var API_KEY = "whatever";

	function getFlickrResponseAsync(method, responseProperty, params) {
	var deferred = Q.defer();

	$.ajax("http://www.flickr.com/services/rest/", {

	// This is from my comment here: http://wolfram.kriesing.de/blog/index.php/2008/javascript-remove-element-from-array/comment-page-2#comment-466561

	/*
	* How to delete items from an Array in JavaScript, an exhaustive guide
	*/

	// DON'T use the delete operator, it leaves a hole in the array:
	var arr = [4, 5, 6];
	delete arr[1]; // arr now: [4, undefined, 6]

	{
	"color_scheme": "Packages/User/Monokai Soda.tmTheme",
	"font_face": "Monaco",
	"font_size": 10.0,
	"soda_classic_tabs": true,
	"tab_completion": true,
	"tab_size": 4,
	"theme": "Soda Dark.sublime-theme",
	"translate_tabs_to_spaces": true,
	"wrap_width": 100