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
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}
β