Emmet Cheat Sheet
=================
EMMET
------------------------------------------------------------------------
### Emmet Cheat Sheet
### EMMET
*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:
- Tab Expand Way: Type your emmet code and press `Tab` key
- Interactive Method: Press `alt + ctrl + Enter` and start typing your expressions. This should automatically generate HTML snippets on the fly.
**This cheatsheet will assume that you press** `Tab` **after each expressions.**
### HTML
### Generating HTML 5 DOCTYPE
`html:5`
Will generate
Document
### Child items
Child items are created using `>`
`ul>li>p`
### Sibling Items
Sibling items are created using `+`
`html>head+body`
### Multiplication
Items can be multiplied by `*`
`ul>li*5`
### Grouping
Items can be grouped together using `()`
`table>(tr>th*5)+tr>t*5`
### Class and ID
Class and Id in Emmet can be done using `.` and `#`
`div.heading`
`div#heading`
ID and Class can also be combined together
`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`
Emmet is awesome
Every front end developers should use this
This is paragraph
This is paragraph
### Attributes inside HTML tags
Attributes can be added using `[]`
`a[href=https://?google.com data-toggle=something target=_blank]`
### Numbering
Numbering can be done using `$`
You can use this inside tag or contents.
`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
`img[src=image$$@-.jpg]*5`
To start the numbering from specific number, use this way
`img[src=emmet$@100.jpg]*5`
### Tips
- Use `:` to expand known abbreviations
`input:date`
`form:post`
`link:css`
- Building Navbar
`.navbar>ul>li*3>a[href=#]{Item $@-}`
To start the numbering from specific number, use this way
`img[src=emmet$@100.jpg]*5`
### Tips
- Use `:` to expand known abbreviations
`input:date`
`form:post`
`link:css`
- Building Navbar
`.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`
`d:ib`
display: inline-block;
- You can use `m` for margin and `p` for padding followed by direction
`mr` -> `margin-right`
`pr` -> `padding-right`
- `@f` will result in
@font-face {
font-family:;
src:url();
}
You can also use these shorthands