[deprecated] Write CSS in VIM faster.
Switch branches/tags
Nothing to show
Clone or download
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
bgcb background-clip: border-box;
bgcc background-clip: content-box;
bgcp background-clip: padding-box;
bgclip `background-clip: {border-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
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
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
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
tac text-align: center;
taj text-align: justify;
tal text-align: left;
tar text-align: right;
ta `text-align: {left
tdlt text-decoration: line-through;
tdn text-decoration: none;
tdu text-decoration: underline;
td `text-decoration: {none
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
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
vabl vertical-align: baseline;
vab vertical-align: bottom;
vam vertical-align: middle;
vat vertical-align: top;
va `vertical-align: {top
vc visibility: collapse;
vh visibility: hidden;
vv visibility: visible;
v `visibility: {visible
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.