GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → joelbqz → Sketch Emmet

joelbqz / Sketch Emmet

Licence: mit
A Sketch plugin that gets Emmet abbreviations to be expanded as HTML

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

sketch-pluginsketch-app

Projects that are alternatives of or similar to Sketch Emmet

Sketch Lint
Check the compliance of your design guidelines within seconds
Stars: ✭ 291 (+401.72%)
Mutual labels:  sketch-app, sketch-plugin
Slinky
Export your Sketch designs as HTML email templates
Stars: ✭ 604 (+941.38%)
Mutual labels:  sketch-app, sketch-plugin
Sketch Image Compressor
A Plugin for Sketch that compresses your bitmap assets, to keep filesize to a minimum.
Stars: ✭ 338 (+482.76%)
Mutual labels:  sketch-app, sketch-plugin
Sketch Gifme Plugin
Embed gifs and videos in your Sketch files!
Stars: ✭ 274 (+372.41%)
Mutual labels:  sketch-app, sketch-plugin
Renamer
Sketch Plugin to rename multiple selected layers or groups or artboards at once
Stars: ✭ 16 (-72.41%)
Mutual labels:  sketch-app, sketch-plugin
Google Sheets Content Sync Sketch Plugin
Sync content within a Google Sheets document, to text layers — based on their names. Edit and collaborate on your content in Google Sheets, then sync in back to your sketch files.
Stars: ✭ 277 (+377.59%)
Mutual labels:  sketch-app, sketch-plugin
Sketch Styles Generator
Generate hundreds of Sketch Shared Styles in a matter of seconds.
Stars: ✭ 537 (+825.86%)
Mutual labels:  sketch-app, sketch-plugin
ForeignIpsum
Generate text for your mockups in multiple languages ¯\_(ツ)_/¯
Stars: ✭ 43 (-25.86%)
Mutual labels:  sketch-plugin, sketch-app
Sketch Commands
A collection of script commands for Sketch.app
Stars: ✭ 826 (+1324.14%)
Mutual labels:  sketch-app, sketch-plugin
Sketch Find And Replace
Sketch plugin to do a find and replace on text within layers
Stars: ✭ 693 (+1094.83%)
Mutual labels:  sketch-app, sketch-plugin
sketch-nudged
A Sketch plugin to easily edit your nudge distance settings.
Stars: ✭ 70 (+20.69%)
Mutual labels:  sketch-plugin, sketch-app
Import Colors Sketch
Import colors from macOS CLR, Photoshop ACO/ACT, Illustrator ASE, GIMP GPL, Sketch, Text file to Sketch color variables.
Stars: ✭ 32 (-44.83%)
Mutual labels:  sketch-app, sketch-plugin
autopdfexporter-sketch-plugin
A Sketch Plugin to auto-export all '[S]' Prefix artboards to a single pdf, no slices needed! Plugin auto creates slices from prefixed Artboards and exports them into a single page-sorted pdf file.
Stars: ✭ 16 (-72.41%)
Mutual labels:  sketch-plugin, sketch-app
Keys For Sketch
Advanced shortcut manager for Sketch app.
Stars: ✭ 281 (+384.48%)
Mutual labels:  sketch-app, sketch-plugin
sketch-library-audit
Export Symbol and Shared Style data from any Sketch Library to CSV.
Stars: ✭ 17 (-70.69%)
Mutual labels:  sketch-plugin, sketch-app
Chromatic Sketch
Sketch plugin for creating good-looking and perceptually uniform gradients and color scales.
Stars: ✭ 445 (+667.24%)
Mutual labels:  sketch-app, sketch-plugin
Sketch-PageNumbers
Sketch plugin for adding page numbers to artboards.
Stars: ✭ 27 (-53.45%)
Mutual labels:  sketch-plugin, sketch-app
RemoveAllGuides
Plugin for Sketch App.
Stars: ✭ 21 (-63.79%)
Mutual labels:  sketch-plugin, sketch-app
Artboard Manager
Because moving Artboards manually is *so* 2016
Stars: ✭ 672 (+1058.62%)
Mutual labels:  sketch-app, sketch-plugin
Svgo Compressor
A Plugin that compresses SVG assets using SVGO, right when you export them.
Stars: ✭ 1,068 (+1741.38%)
Mutual labels:  sketch-app, sketch-plugin
View All Similar Projects ➔

What's Sketch Emmet?

A plugin that gets Emmet HTML abbreviations snippets to be expanded based on layers list structure and naming. Sketch to Emmet HTML

Download

Install with Sketch Runner

With Sketch Runner, just go to the install command and search for Sketch Emmet. Runner allows you to manage plugins and do much more to speed up your workflow in Sketch. Download Runner here

How it works?

You just need to organize and name your groups/layers correctly using Emmet’s abbreviations syntax, and then go to Plugins » Sketch Emmet » Get Emmet Snippet

https://vimeo.com/236480843

NOTE: In addition to Sketch Emmet you will need to have Emmet Plugin in your editor favorite to expand the snippets abbreviations properly.

Tips and tricks

  1. Add a % character as prefix if you want to ignore or prevent a layer or group of layers to be copied.

  2. If you have a block or a image with a prefix or name as "img" it will automatically add width and height attributes. Example:

  • img
  • img.classname
  • img.classname#id
  • img.classname#id[src=#]
  1. Text layers just output the text inside it, unless you asign a proper HTML tag as name. Example:
  • p
  • h1
  • h2
  • h3
  • p.classname
  • p.classname#id
  • p.classname#id[attribute=value]

Learn more about Emmet Abbreviations Syntax https://docs.emmet.io/

Credits

Thanks to Marisa Roque, I was inspired and used some code from his plugin Sketch Markup Listify

Did it help you?

You might want to invite me a coffee

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].