Skip to content
[deprecated] Write CSS in VIM faster.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

CSS snippets for UltiSnips.vim

Style faster.

DEPRECATED: vim-hyperstyle is a new and better implementation of this idea.

My collection of CSS snippets lets you type CSS faster. Just use these on a Vim+UltiSnips setup and you can type abbreviations of declarations to expand to full CSS like so:


To become:

display: block;
margin: 0;
float: left;
left: 5px;


Add to your .vimrc:

Bundle 'SirVer/ultisnips'
Bundle 'rstacruz/vim-ultisnips-css'


Below is a list of available snippets. For those with #, you can replace it with a number. For instance, l# can be l0 (left: 0), or l10 (left: 10), etc

Snippet Description
cf +clearfix
@nondesktop @media (max-width: 1200px) /* phone, tablet, laptop */
@portrait @media (max-width: 480px) /* portrait */
@phone @media (max-width: 768px) /* phone */
@mobile @media (max-width: 992px) /* mobile */
@desktop @media (min-width: 1201px) /* desktop */
@tablet @media (min-width: 769px) /* tablet, desktop */
@laptop @media (min-width: 993px) /* laptop */
an animation: {name 300ms linear infinite}
bgaf background-attachment: fixed;
bgal background-attachment: local;
bgas background-attachment: scroll;
bga background-attachment: {scroll|fixed|local}
bgcb background-clip: border-box;
bgcc background-clip: content-box;
bgcp background-clip: padding-box;
bgclip background-clip: {border-box|padding-box|content-box};
bgc background-color: {transparent}
bgi background-image: {url()}
bpos background-position: {x y}
bgp background-position: {x y}
bp background-position: {x y}
brn background-repeat: no-repeat;
bgrn background-repeat: no-repeat;
bgrx background-repeat: repeat-x;
brx background-repeat: repeat-x;
bry background-repeat: repeat-y;
bgry background-repeat: repeat-y;
bgr background-repeat: {no-repeat}
bgsa background-size: auto;
bgst background-size: contain;
bgsc background-size: cover;
bgcover background-size: cover;
bgs background-size: {auto}
bg background: {#fff url(image.png) no-repeat left top fixed}
bbr border-bottom-left-radius: {!3px}; border-bottom-right-radius: {!3px};
bblr border-bottom-left-radius: {3px}
bbrr border-bottom-right-radius: {3px}
bb# border-bottom: {#};
bb border-bottom: {solid 1px #333}
bcc border-collapse: collapse;
bl# border-left: {#};
bl border-left: {solid 1px #333}
brad# border-radius: {#};
brad border-radius: {3}
br# border-right: {#};
br border-right: {solid 1px #333}
blr border-top-left-radius: {!3px}; border-bottom-left-radius: {!3px};
btr border-top-left-radius: {!3px}; border-top-right-radius: {!3px};
btlr border-top-left-radius: {3px}
brr border-top-right-radius: {!3px}; border-bottom-right-radius: {!3px};
btrr border-top-right-radius: {3px}
bt# border-top: {#};
bt border-top: {solid 1px #333}
b# bottom: {#};
b bottom: {0}
bs box-shadow: {x y blur spead color}
bsb box-sizing: border-box;
bsp box-sizing: padding-box;
cb clear: both;
cl clear: left;
cr clear: right;
cf clearfix()
co color: {#333}
cud cursor: default;
cd cursor: default;
cuew cursor: ew-resize;
cuna cursor: not-allowed;
cuns cursor: ns-resize;
cup cursor: pointer;
cp cursor: pointer;
ct cursor: text;
cut cursor: text;
cu cursor: {default|pointer|text}
db display: block;
dib display: inline-block;
di display: inline;
dn display: none;
dtc display: table-cell;
dtr display: table-row;
dt display: table;
d display: {none|inline|block}
fl float: left;
fr float: right;
ff font-family: {sans-serif}
fs font-size: {1em}
fi font-style: italic;
italic font-style: italic;
fsi font-style: italic;
fsn font-style: normal;
fw1 font-weight: 100;
f1 font-weight: 100;
f3 font-weight: 300;
fw3 font-weight: 300;
fw4 font-weight: 400;
f4 font-weight: 400;
fw5 font-weight: 500;
f5 font-weight: 500;
f7 font-weight: 700;
fw7 font-weight: 700;
fw9 font-weight: 900;
f9 font-weight: 900;
bold font-weight: bold;
fb font-weight: bold;
fwb font-weight: bold;
fwn font-weight: normal;
fn font-weight: normal;
font font: {italic bold 1em/1.5em serif}
f font: {italic bold 1em/1.5em serif}
h100 height: 100%;
h# height: {#};
hlh height: {0px}; line-height: {1.5};
h height: {0}
l# left: {#};
l left: {0}
lb left: {0}; bottom: {0};
lt left: {0}; top: {0};
ls letter-spacing: {0}
lh line-height: {1.5}
mb# margin-bottom: {#};
mb margin-bottom: {0}
ml# margin-left: {#};
ml margin-left: {0}
mr# margin-right: {#};
mr margin-right: {0}
mt# margin-top: {#};
mt margin-top: {0}
m0a margin: 0 auto;
moa margin: 0 auto;
m0p0 margin: 0; padding: 0;
mopo margin: 0; padding: 0;
m# margin: {#};
m margin: {0}
mah max-height: {none}
maw max-width: {none}
mh min-height: {100%}
mw min-width: {100%}
nr no-repeat
op opacity: {0}
oxa overflow-x: auto;
oxh overflow-x: hidden;
oxs overflow-x: scroll;
oya overflow-y: auto;
oyh overflow-y: hidden;
oys overflow-y: scroll;
oa overflow: auto;
oh overflow: hidden;
os overflow: scroll;
o overflow: {hidden|auto|scroll}
pb# padding-bottom: {#};
pb padding-bottom: {0}
pl# padding-left: {#};
pl padding-left: {0}
pr# padding-right: {#};
pr padding-right: {0}
pt# padding-top: {#};
pt padding-top: {0}
p# padding: {#};
p padding: {0}
poa position: absolute;
pof position: fixed;
por position: relative;
pos position: static;
rx repeat-x
ry repeat-y
rb rgba(black, {0.2})
rw rgba(white, {0.2})
ra rgba({0, 0, 0}, {0.5})
r# right: {#};
r right: {0}
rb right: {0}; bottom: {0};
rt right: {0}; top: {0};
tla table-layout: auto;
tlf table-layout: fixed;
tl table-layout: {fixed|auto}
tac text-align: center;
taj text-align: justify;
tal text-align: left;
tar text-align: right;
ta text-align: {left|right|center|justify}
tdlt text-decoration: line-through;
tdn text-decoration: none;
tdu text-decoration: underline;
td text-decoration: {none|underline|strikethrough}
ti text-indent: {0}
ts text-shadow: {0 1px 0 #333}
ttc text-transform: capitalize;
ttl text-transform: lowercase;
ttu text-transform: uppercase;
tt text-transform: {capitalize|uppercase|lowercase}
t# top: {#};
t top: {0}
tf transform: {scale(1.0)}
tst transition: {all 300ms ease}
usa user-select: all;
usn user-select: none;
ust user-select: text;
us user-select: {none|text|toggle|element|elements|all}
vabl vertical-align: baseline;
vab vertical-align: bottom;
vam vertical-align: middle;
vat vertical-align: top;
va vertical-align: {top|bottom|baseline|middle}
vc visibility: collapse;
vh visibility: hidden;
vv visibility: visible;
v visibility: {visible|hidden|collapse}
w100 width: 100%;
wa width: auto;
w# width: {#};
w width: {0}
wh width: {0}; height: {0};
zi z-index: {1}


Just edit the YML file, don't edit the snippet files themselves.


© 2012, Rico Sta. Cruz. Released under the MIT License.

Something went wrong with that request. Please try again.