Jays-custom-Emmet-shortcuts
How to install
In Sublime, select Preferences > Package Settings > Emmet > Settings - User and paste the contents of Emmet.sublime-settings in there. Or alternatively overwrite your ~/Library/Application Support/Sublime Text 3/Packages/User/Emmet.sublime-settings file with this one.
How to use
After installing simply type any of the below abbreviation triggers and press tab
Includes:
imglazy
An improvement over the standard img trigger. Includes Chrome's native lazy loading, width, and height attributes. Far more useful than the default img trigger.
img[loading='lazy' width='256px' height='256px' src='https://placehold.it/256/jpg?text=JPG+256']
pic
Insert a picture element with multiple placeholder sources. Far more useful than the default picture trigger.
picture>source[type='image/webp' srcset='https://placehold.it/256/webp' media='(min-width: $@100px)']*3+imglazy
webp
Insert a placeholder .webp image (with jpg fallback) using the picture element.
picture>source[type='image/webp' srcset='https://placehold.it/256/webp']+source[type='image/jpg' srcset='https://placehold.it/256/jpg']+imglazy
youtube
Instant embed code for Paul Irish's Lite YouTube Embed
c{LITE YOUTUBE EMBED - SEE: https://github.com/paulirish/lite-youtube-embed}+link[rel='stylesheet' href='node_modules/lite-youtube-embed/src/lite-yt-embed.css']+script[src='node_modules/lite-youtube-embed/src/lite-yt-embed.js']+lite-youtube[videoid='ogfYd705cRs']
Bootstrap Shortcuts
Misc. bootstrap snippets have been included to make page building a task that takes seconds instead of minutes.
Try:
- b4-boilerplate
- b4-container
- b4-jumbotron
- br-cols3
Shout out
Hat tip to @OdatNurd for guiding me towards figuring out how to modify default autocompletion behavior.