madrobby

Copyright (c) 2011 Thomas Fuchs, http://mir.aculo.us/
 
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
 

necolas

NOTE I now use the conventions detailed in the SUIT framework

Template Components

Used to provide structural templates.

Pattern

t-template-name

ambar

Sublime Text 2 – Useful Shortcuts (Mac OS X)

General

⌘T	go to file
⌘⌃P	go to project
⌘R	go to methods
⌃G	go to line
⌘KB	toggle side bar
⌘⇧P	command prompt

kizu

/* Centered heading with rules */
h1 {
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	text-align: center;
	text-overflow: ellipsis;

	font: 1.6em/1.1 Georgia;
	padding: .2em 0;

LeaVerou

/**
 * Lined paper that follows the text
 * Support: Chrome, FF 3.6+, Saf 5.1+, Opera 11.50+, IE10
 */

/* Just decorative */
padding: 20px;

/* The font. Try changing font-size and see how the lines

zachleat

// * iOS zooms on form element focus. This script prevents that behavior.
// * <meta name="viewport" content="width=device-width,initial-scale=1">
//      If you dynamically add a maximum-scale where no default exists,
//      the value persists on the page even after removed from viewport.content.
//      So if no maximum-scale is set, adds maximum-scale=10 on blur.
//      If maximum-scale is set, reuses that original value.
// * <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=2.0,maximum-scale=1.0">
//      second maximum-scale declaration will take precedence.
// * Will respect original maximum-scale, if set.
// * Works with int or float scale values.

dirkschmid

$sprites: sprite-map("sprites/*.png")
$sprites-retina: sprite-map("sprites-retina/*.png")

=sprite-background($name)
  background-image: sprite-url($sprites)
  background-position: sprite-position($sprites, $name)
  background-repeat: no-repeat
  display: block
  height: image-height(sprite-file($sprites, $name))
  width: image-width(sprite-file($sprites, $name))

LeaVerou

/**
 * Vertical centering with Flexbox + margin fallback
 * Lea Verou & David Storey
 */

html, body { height: 100%; }

body {
	width: 100%; /* needed for FF */
	margin: 0;

Integralist

@include keyframe(fadeout) {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

malarkey

When times get tough and people get nasty, you’ll need more than a killer smile. You’ll need a killer contract.

Used by 1000s of designers and developers Clarify what’s expected on both sides Helps build great relationships between you and your clients Plain and simple, no legal jargon Customisable to suit your business Used on countless web projects since 2008

…………………………