A set of custom CSS snippets for Sublime Text
Latest commit b70edb8 Jul 12, 2014 @joshnh Update README.md
Failed to load latest commit information.
README.md Update README.md Jul 12, 2014
absolute.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
active.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
after.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
ampersand.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
animation-fill-mode.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
animation-play-state.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
animation.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
auto.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
background.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
before.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
block.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
bold.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
border-radius.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
bottom.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
box-shadow.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
box-sizing.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
center.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
clearfix.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
comment.sublime-snippet update comment.sublime-snippet Nov 9, 2012
content.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
cursor.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
fixed.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
font.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
hidden.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
hover.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
hsla.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
hyphens.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
inline-block.sublime-snippet Update inline-block.sublime-snippet Nov 29, 2012
italic.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
keyframes.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
left.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
line-height.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
linear-gradient.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
margin.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
media.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
padding.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
relative.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
rgba.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
right.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
sans-serif.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
serif.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
tap-highlight-color.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
text-decoration.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
text-shadow.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
top.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
transform.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
transition.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
transparent.sublime-snippet change sass.source to scss.source Nov 9, 2012
uppercase.sublime-snippet improving snippets as per issue #5 Nov 9, 2012
word-wrap.sublime-snippet improving snippets as per issue #5 Nov 9, 2012

README.md

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 (via email, Twitter, GitHub or as a comment on the original blog post) 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;