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;
    }
}

csswizardry

I received this email from someone in response to my Code smells in CSS article in which I advocate the use of classes over not doing (you will need to read the article for full context).

Below is that email conversation, with names removed:

Hiya Harry,

Just wanted to drop you a line to say hi really as I am a fan of your work. I loved your talk about Big CSS, I even made my whole team watch it so they could learn a thing or two.

I have just read your latest blog article "Code Smells..." great stuff in there, some of which I am still guilty of even now. Generally I do try and make all my CSS as robust as it can be though. At my work I am the only one that takes things like HTML, CSS, JS seriously, it gets hard to try and pass on the enthusiasm for great sites onto other members of the team. I will be making them read this post aswell so thanks ;-) >>