CSS Snippets
A set of custom CSS snippets for Sublime Text
Details
Installs
- Total 262K
- Win 172K
- Mac 63K
- Linux 28K
| Apr 26 | Apr 25 | Apr 24 | Apr 23 | Apr 22 | Apr 21 | Apr 20 | Apr 19 | Apr 18 | Apr 17 | Apr 16 | Apr 15 | Apr 14 | Apr 13 | Apr 12 | Apr 11 | Apr 10 | Apr 9 | Apr 8 | Apr 7 | Apr 6 | Apr 5 | Apr 4 | Apr 3 | Apr 2 | Apr 1 | Mar 31 | Mar 30 | Mar 29 | Mar 28 | Mar 27 | Mar 26 | Mar 25 | Mar 24 | Mar 23 | Mar 22 | Mar 21 | Mar 20 | Mar 19 | Mar 18 | Mar 17 | Mar 16 | Mar 15 | Mar 14 | Mar 13 | Mar 12 | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Windows | 0 | 6 | 1 | 3 | 6 | 1 | 5 | 4 | 4 | 6 | 4 | 5 | 1 | 5 | 5 | 5 | 8 | 5 | 7 | 6 | 6 | 8 | 4 | 3 | 6 | 2 | 3 | 8 | 3 | 5 | 5 | 7 | 7 | 6 | 7 | 6 | 7 | 5 | 9 | 7 | 4 | 4 | 12 | 3 | 6 | 9 |
| Mac | 0 | 0 | 0 | 0 | 3 | 1 | 0 | 0 | 0 | 0 | 0 | 2 | 1 | 0 | 3 | 0 | 1 | 0 | 2 | 1 | 0 | 10 | 2 | 2 | 1 | 2 | 2 | 2 | 1 | 0 | 2 | 1 | 1 | 1 | 0 | 2 | 0 | 0 | 0 | 2 | 1 | 2 | 1 | 1 | 1 | 1 |
| Linux | 0 | 0 | 2 | 3 | 1 | 1 | 0 | 2 | 0 | 0 | 1 | 1 | 0 | 1 | 0 | 2 | 2 | 4 | 1 | 0 | 1 | 0 | 2 | 3 | 1 | 1 | 0 | 0 | 0 | 1 | 1 | 1 | 1 | 1 | 2 | 4 | 0 | 3 | 1 | 1 | 0 | 0 | 2 | 2 | 1 | 1 |
Readme
- Source
- raw.githubusercontent.com
Sublime Text CSS Snippets
UPDATE: The scope has been expanded to include LESS, Sass and Stylus files.
Type the snippet shortcode and then press Tab to complete the snippet.
The snippets are listed below in alphabetical order. The '$1' indicates the initial 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 tricky 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 so that I can improve these for everybody. Thanks!
That's a backtick in case you were unsure (it's on the same key as the tilde (~), directly above Tab).
/* $1 **************************************************/
abs
position: absolute;
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;
}
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: ${1:0} auto;
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;
bol
font-weight: bold;
bor
border-radius: $1;
bot
bottom: ${1:0};
box
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
cen
text-align: center;
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;
}
con
content: '$1';
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;
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($1);
background-image: -moz-linear-gradient($1);
background-image: -ms-linear-gradient($1);
background-image: -o-linear-gradient($1);
background-image: linear-gradient($1);
hid
overflow: hidden;
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
}
h
My preference over rgba(), and I have written an article explaining why
hsla(${1:0},${2:0}%,${3:0}%,${4:1})
hyp
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
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;
${1:zoom: 1;${2: /* Fix for IE7 */}
*display: inline;${2: /* Fix for IE7 */}}
ita
font-style: italic;
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: ${1:0};
lin
line-height: ${1:1.5};
mar
margin: ${1: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;
pad
padding: ${1: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 why.
rgba(${1:0},${2:0},${3:0},${4:1})
rel
position: relative;
rig
right: ${1:0};
san
font-family: ${1:<font-name>,} sans-serif;
ser
font-family: ${1:<font-name>,} serif;
sha
box-shadow: ${1:horizontal-offset} ${2:vertical-offset} ${3:blur-radius} ${4:spread-distance} ${5:hsla(0,0%,0%,.25)};
t
transparent
tap
This overrides the highlight color on iPhones/iPads.
-webkit-tap-highlight-color: ${1:hsla(0,0%,0%,.5)};
tap-highlight-color: ${1:hsla(0,0%,0%,.5)};
tex
Use wisely, please keep readability in mind.
text-shadow: ${1:horizontal-offset} ${2:vertical-offset} ${3:blur-radius} ${4:hsla(0,0%,0%,.25)};
top
top: ${1:0};
transform
This is too complex to write out all options.
-webkit-transform: $1;
-moz-transform: $1;
-ms-transform: $1;
-o-transform: $1;
transform: $1;
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;
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;