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:
db<tab>
m0<tab>
fl<tab>
l5<tab>
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.
- My website (ricostacruz.com)
- Github (@rstacruz)
- Twitter (@rstacruz)