Type the snippet shortcode and then press TAB to complete the snippet.
The snippets are listed below in alphabetical order. The '$0' indicates the position of the caret/s. Some snippets have been set up so that pressing tab jumps the caret/s to the next predefined spot. It's a little hard to explain, but any snippet that has a $1/$2/$3/etc. uses this technique.
Feel free to play with, alter, expand, or ruin these snippets as you please. I only ask that if you come up with an incredibly handy snippet, or simply one that I have missed, that you let me know (via email, twitter, or as a comment on the original [blog post][1]) so that I can improve these for everybody. Thanks! [1]: http://joshnh.com/2012/02/a-collection-of-css-snippets-for-sublime-text-2/ "The original blog post."
`
That's a backtick in case you were unsure (it's on the same key as the tilde (~), directly above Tab).
/* $0 **************************************************/
abs
position: absolute;
$0
act
$1:active {
$2
}
aft
$1:after {
content: '';
$2
}
amp
Wrap ampersand with to make them look sexy.
.amp {
font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
font-style: italic;
font-weight: normal;
}
$0
ani
Animation shorthand: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction.
-webkit-animation: ${1:name} ${2:duration} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)} ${4:delay} ${5:infinite|<number>} ${6:normal|alternate};
-moz-animation: ${1:name} ${2:duration} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)} ${4:delay} ${5:infinite|<number>} ${6:normal|alternate};
-ms-animation: ${1:name} ${2:duration} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)} ${4:delay} ${5:infinite|<number>} ${6:normal|alternate};
-o-animation: ${1:name} ${2:duration} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)} ${4:delay} ${5:infinite|<number>} ${6:normal|alternate};
animation: ${1:name} ${2:duration} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)} ${4:delay} ${5:infinite|<number>} ${6:normal|alternate};
aut
margin: 0 auto;
$0
bac
background: ${1:#fff} url('$2') ${3:0} ${4:0} ${5:repeat|repeat-x|repeat-y|no-repeat|inherit|round|space};
bef
$1:before {
content: '';
$2
}
blo
display: block;
$0
bol
font-weight: bold;
$0
bor
border-radius: $0;
bot
bottom: 0;
$0
box
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
$0
cen
text-align: center;
$0
cf
You should look at using inline-block for layouts instead of floats.
.cf:after,
.cf:before {
content: '';
display: table;
}
.cf:after {
clear: both;
}
.cf {
zoom: 1;
}
$0
con
content: '';
$0
cur
cursor: ${1:auto|crosshair|default|pointer|move|e-resize|ne-resize|-resize|n-resize|se-resize|sw-resize|s-resize|w-resize|text|wait|help|progress};
fil
-webkit-animation-fill-mode: ${1:none|forwards|backwards|both};
-moz-animation-fill-mode: ${1:none|forwards|backwards|both};
-ms-animation-fill-mode: ${1:none|forwards|backwards|both};
-o-animation-fill-mode: ${1:none|forwards|backwards|both};
animation-fill-mode: ${1:none|forwards|backwards|both};
fix
position: fixed;
$0
fon
You don't need to declare a value for the line-height unless using pixels (1.5 is the same as 1.5em or 150%).
font: ${1:normal|italic|oblique} ${2:normal|small-caps} ${3:normal|bold|bolder|lighter} ${4:1em}/${5:1.5} ${6:sans-serif};
gra It's a good idea to define a background color, and use alpha transparency with your gradients, that way you only need to alter a single value if you want to change the color of the background.
background-image: -webkit-linear-gradient($0);
background-image: -moz-linear-gradient($0);
background-image: -ms-linear-gradient($0);
background-image: -o-linear-gradient($0);
background-image: linear-gradient($0);
hid
overflow: hidden;
$0
hov
It is good (for accessibility reasons) to use the focus pseudo-class alongside the hover pseudo-class when defining styles for anchors, there is no need for :focus in most other cases.
$1:hover,
$1:focus {
$2
}
hs
My preference over rgba(), and I have written [an article explaining][2] why [2]: http://joshnh.com/2011/09/hsla-are-you-using-it-here-is-why-i-think-you-should-be/ "HSLA and You"
hsla($0)
hyp
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
$0
inl
Comment out the whitespace between elements in your markup if you need pixel perfect alignment (although pixel perfection is not realistic).
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
$0
ita
font-style: italic;
$0
key
This snippet makes good use of Sublime Text 2's multiple selection capabilites. If you lose the multiple selection, a quick way to regain it is to select 'keyframes', hit CMD+D (CTRL+D on Windows) four times, and then use the arrow keys to navigate. Continuing to tab will reduce the caret back down to a single selection, but you can also force it using ESC.
@-webkit-keyframes $1 {
0% { $2 }
100% { $3 }
}
@-moz-keyframes $1 {
0% { $2 }
100% { $3 }
}
@-ms-keyframes $1 {
0% { $2 }
100% { $3 }
}
@-o-keyframes $1 {
0% { $2 }
100% { $3 }
}
@keyframes $1 {
0% { $2 }
100% { $3 }
}
lef
left: 0;
$0
lin
line-height: 1.5;
$0
mar
margin: 0;
$0
med
When designing with a focus on responsiveness, using min-width is recommended (it means that smaller devices, such as mobiles, aren't applying styles that aren't being used).
@media (min-width: $1) {
$2
}
non
text-decoration: none;
$0
pad
padding: 0;
$0
pla
-webkit-animation-play-state: ${1:running|paused};
-moz-animation-play-state: ${1:running|paused};
-ms-animation-play-state: ${1:running|paused};
-o-animation-play-state: ${1:running|paused};
animation-play-state: ${1:running|paused};
r
My preference is hsla(), and I have written [an article explaining][2] why.
rgba($0)
rel
position: relative;
$0
rig
right: 0;
$0
san
font-family: sans-serif;
$0
ser
font-family: serif;
$0
sha
-webkit-box-shadow: ${1:horizontal-offset} ${2:vertical-offset} ${3:blur-radius} ${4:spread-distance} ${5:hsla(0,0%,0%,.25)};
box-shadow: ${1:horizontal-offset} ${2:vertical-offset} ${3:blur-radius} ${4:spread-distance} ${5:hsla(0,0%,0%,.25)};
t
transparent$0
tap
This overrides the highlight color on iPhones/iPads.
-webkit-tap-highlight-color: hsla(0,0%,0%,.5);
tap-highlight-color: hsla(0,0%,0%,.5);
$0
tex
Use wisely, please keep readability in mind.
text-shadow: $0;
top
top: 0;
$0
transform
This is too complex to write out all options.
-webkit-transform: $0;
-moz-transform: $0;
-ms-transform: $0;
-o-transform: $0;
transform: $0;
transition
Transition shorthand: transition-propery transition-duration transition-timing-function transition-delay. The default values are: all 0 ease 0, this means that if you want to apply a transition to all properties, using the ease timing-function, you only need to declare the duration (e.g. transition: .5s;).
-webkit-transition: ${1:all} ${2:.25s} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)};
-moz-transition: ${1:all} ${2:.25s} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)};
-ms-transition: ${1:all} ${2:.25s} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)};
-o-transition: ${1:all} ${2:.25s} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)};
transition: ${1:all} ${2:.25s} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)};
upp
text-transform: uppercase;
$0
wra
For legacy reasons, UAs may also accept ‘word-wrap’ as an alternate name for the 'overflow-wrap' property. However this syntax non-conforming in author style sheets. (http://www.w3.org/TR/css3-text/#overflow-wrap)
overflow-wrap: break-word;
word-wrap: break-word;
$0