The a toolkit for web-developers

Introduction

Emmet is a productivity toolkit for web developers that uses expressions to generate HTML snippets.

Installation

Normally, installation for Emmet should be a straight-forward process from the package-manager, as most of the modern text editors support Emmet.

### Usage

You can use Emmet in two ways:

- <span id="856f">Tab Expand Way: Type your emmet code and press `Tab` key</span>
- <span id="9aea">Interactive Method: Press `alt + ctrl + Enter` and start typing your expressions. This should automatically generate HTML snippets on the fly.</span>

**This cheatsheet will assume that you press** `Tab` **after each expressions.**

HTML

Generating HTML 5 DOCTYPE

html:5` Will generate

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>

    </body>
    </html>

---


### Child items

Child items are created using `>`

```html
ul>li>p`

<ul>
  <li>
    <p>
</p>
  </li>
</ul>

Sibling Items

Sibling items are created using +

html>head+body`

<html>
  <head>
</head>
  <body>
</body>
</html>

Multiplication

Items can be multiplied by *

ul>li*5`

<ul>
  <li>
</li>
  <li>
</li>
  <li>
</li>
  <li>
</li>
  <li>
</li>
</ul>

Grouping

Items can be grouped together using ()

table>(tr>th*5)+tr>t*5`

<table>
  <tr>
    <th>
</th>
    <th>
</th>
    <th>
</th>
    <th>
</th>
    <th>
</th>
  </tr>
  <tr>
    <t>
</t>
    <t>
</t>
    <t>
</t>
    <t>
</t>
    <t>
</t>
  </tr>
</table>

Class and ID

Class and Id in Emmet can be done using . and #

html div.heading`

`html div#heading`

ID and Class can also be combined together `html div#heading.center`

Adding Content inside tags

Contents inside tags can be added using {}

h1{Emmet is awesome}+h2{Every front end developers should use this}+p{This is
paragraph}*2`

<h1>Emmet is awesome</h1>
<h2>Every front end developers should use this</h2>
<p>This is paragraph</p>
<p>This is paragraph</p>

Attributes inside HTML tags

Attributes can be added using []

a[href=https://?google.com data-toggle=something target=_blank]`

<a href="https://?google.com" data-toggle="something" target="_blank">
</a>

Numbering

Numbering can be done using $
You can use this inside tag or contents.

html h${This is so awesome $}*6`

This is so awesome 1

This is so awesome 2

This is so awesome 3

This is so awesome 4

This is so awesome 5
This is so awesome 6

Use @- to reverse the Numbering `html img[src=image$$@-.jpg]*5`

To start the numbering from specific number, use this way `html img[src=emmet$@100.jpg]*5`

Tips

  • Use : to expand known abbreviations

html input:date`

`html form:post`

`html link:css`

  • Building Navbar

`html .navbar>ul>li*3>a[href=#]{Item $@-}`

CSS

Emmet works surprisingly well with css as well.

  • f:l
    float: left;

You can also use any options n/r/l

  • pos:a­
    position: absolute;

Also use any options, pos:a/r/f

  • d:n/b­/f/­i/ib

html d:ib` display: inline-block; - <span id="26f6"

You can use m for margin and p for padding followed by direction</span

html mr` -&gt; `margin-right`html pr-&gt;padding-right- <span id="01cc">@f` will result in

@font-face { font-family:; src:url(); } You can also use these shorthands