- Sublime Text (2 or 3)
- nonlinear/snippets
- Open or create your
mixins
stylesheet (.sass
or.scss
), typemixin
, hit tab and save. - You now have access to all the mixins below.
Base Snippets | |
---|---|
border-box |
reverts border-box so margin and padding counts in, not out |
clearfix |
adds latest clearfix hack on object |
find |
adds ugly border on object, good to ensure you are touching the right object |
gradient |
powerful linear gradient solution, check tutorial |
disable |
prevents link, drag or select |
placeholder |
allows styling of form placeholders |
prefix |
loops one or more parameter/value against prefixes |
radius |
regular or irregular radius |
shadow |
box or text shadow |
opacity |
0 to 100 |
reset |
all, margin, padding, border, bg, list, select, shadow, outline, shadow-text, number |
Transition Snippets | |
---|---|
transition |
smooth transitions |
rotate |
variable is the degree (just number) |
scale |
1 is normal, 1+ (1.2, 1.3) scales up, 1- (.5, .7) scales down |
skew |
variable is degree |
translate |
x, y |
translate 3d |
x, y, z |
animate |
create your own animation mixin |
Typography Snippets | |
---|---|
ellipsis |
adds ... |
font-face |
assigns font to CSS (default position is app/fonts , check fontgen for more |
hide-text |
forces text to hide |
word-wrap |
wraps text |
Useful CSS Snippets | |
---|---|
if |
if/else rules |