DEV Community

Rishi
Rishi

Posted on

1 1

Emmet Simplified 😍

Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow

Type Syntax Example1
Child > nav>ul>li
Sibling + div+p+bq
Climb-up ^ div+div>p>span+em^^bq
Multiplication * ul>li*5
Grouping () (div>dl>(dt+dd)*3)+footer>p
Item numbering $ ul>li.item$*5>{$}
Item numbering h$[title=item$]{Header $$$}*6
Id # div#title
Class . div.title
Custom attributes [] p[title="Hello Rishi Abee"]
Text {} a{Click me}
Lorem (random length) >lorem p>lorem
Lorem (defined length) >lorem10 p>lorem10

HTML boilerplate

! β†’
link β†’
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css

Alt Text

Usage example - Header

nav.navbar.navbar-expand-md.navbar-dark.fixed-top.bg-dark>a.navbar-brand>{Brown Bag Session}^^main>((div.jumbotron>div.container>h1.display-3>{Hello Rishi Abee})+div.container) β†’

Usage example - Body

(h${Header $}*6)+(bq.blockquote3>p.mb-0>lorem10+footer.blockquote-footer>lorem2) β†’

Usage example - Footer

hr+footer.container>p>{UnLicensed} β†’


  1. Emmet cheatsheet β†©

Image of Docusign

πŸ› οΈ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Image of Docusign

πŸ› οΈ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more