From b70c19b7399a79fa80a6c9b1bcbbbe283506d0d0 Mon Sep 17 00:00:00 2001 From: Yogesh Ojha Date: Sun, 21 Jun 2020 20:15:24 +0530 Subject: [PATCH 1/7] Cheatsheet for Emmet created --- tools/emmet.md | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 tools/emmet.md diff --git a/tools/emmet.md b/tools/emmet.md new file mode 100644 index 0000000..7c25c24 --- /dev/null +++ b/tools/emmet.md @@ -0,0 +1,78 @@ +# EMMET +*The essential toolkit for web-developers* + +## Introduction +Emmet is a productivity toolkit for web developers that uses expressions to generate HTML snippets. + +## Installation +Normally, Emmet installation should be a straight-forward process from the package-manager as most of the modern text editors support Emmet. If you have difficulty setting up emmet with your editor and wish to check if emmet supports your favorite editor or not, you can check from here. [Emmet Installation instructions](https://emmet.io/download/) + +## 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.__ + +## Basics + +### Generating HTML 5 Snippet +`html:5` +Will generate + +```HTML + + + + + + + Document + + + + + +``` + +### Child items +Child items are created using `>` + +`ul>li>p` + +```html + +``` + +### Sibling Items +Sibling items are created using `+` + +`html>head+body` + +```html + + + + + + +``` + +### Multiplication +Items can be multiplied by `*` + +`ul>li*5` + +```html + +``` From 5f2ce016631ff55a2f0b7d5c7d57693439ad4bcf Mon Sep 17 00:00:00 2001 From: Yogesh Ojha Date: Sun, 21 Jun 2020 20:28:47 +0530 Subject: [PATCH 2/7] Groupings added --- tools/emmet.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/tools/emmet.md b/tools/emmet.md index 7c25c24..41fcbb2 100644 --- a/tools/emmet.md +++ b/tools/emmet.md @@ -76,3 +76,27 @@ Items can be multiplied by `*`
  • ``` + +### Grouping +Items can be grouped together using `()` + +`table>(tr>th*5)+tr>t*5` + +```html + + + + + + + + + + + + + + + +
    +``` From 499ce17202fe4ef4f58200c90a9d72ffb9740ce4 Mon Sep 17 00:00:00 2001 From: Yogesh Ojha Date: Sun, 21 Jun 2020 20:38:22 +0530 Subject: [PATCH 3/7] Attributes and contents added for Emmet --- tools/emmet.md | 44 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/tools/emmet.md b/tools/emmet.md index 41fcbb2..c38731d 100644 --- a/tools/emmet.md +++ b/tools/emmet.md @@ -100,3 +100,47 @@ Items can be grouped together using `()` ``` + +### Class and ID +Class and Id in Emmet can be done using `.` and `#` + +`div.heading` + +```html +
    +``` + +`div#heading` + +```html +
    +``` + +ID and Class can also be combined together + +`div#heading.center` + +```html +
    +``` + +### 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` + +```HTML +

    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]` + +```HTML + +``` From e4930c1e2fd550889ccf6c339ff8ff36cb103e12 Mon Sep 17 00:00:00 2001 From: Yogesh Ojha Date: Sun, 21 Jun 2020 21:02:23 +0530 Subject: [PATCH 4/7] Updated Readme.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 188cfc4..b7ef2e8 100644 --- a/README.md +++ b/README.md @@ -101,6 +101,7 @@ Feel free to take a look. You might learn new things. They have been designed to - [VIM](tools/vim.txt) - [Visual Studio Code](tools/vscode.md) - [Xcode](tools/xcode.txt) +- [Emmet](tools/emmet.md) #### Infrastructure From 8a1b3c86ce99150ea37a694b5bcaa38960d338cf Mon Sep 17 00:00:00 2001 From: Yogesh Ojha Date: Sun, 21 Jun 2020 21:03:10 +0530 Subject: [PATCH 5/7] Tips and Cheatsheet added for Emmet --- tools/emmet.md | 73 +++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 72 insertions(+), 1 deletion(-) diff --git a/tools/emmet.md b/tools/emmet.md index c38731d..74b4977 100644 --- a/tools/emmet.md +++ b/tools/emmet.md @@ -16,7 +16,7 @@ __This cheatsheet will assume that you press `Tab` after each expressions.__ ## Basics -### Generating HTML 5 Snippet +### Generating HTML 5 DOCTYPE `html:5` Will generate @@ -144,3 +144,74 @@ Attributes can be added using `[]` ```HTML ``` + +### Numbering +Numbering can be done using `$` +You can use this inside tag or contents. + +`h${This is so awesome $}*6` + +```HTML +

    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` + +```HTML + + + + + +``` + +To start the numbering from specific number, use this way + +`img[src=emmet$@100.jpg]*5` + +```HTML + + + + + +``` + +## Tips +* Use `:` to expand known abbreviations + +`input:date` +```HTML + +``` + +`form:post` +```HTML +
    +``` + +`link:css` +```html + +``` + +* Building Navbar + +`.navbar>ul>li*3>a[href=#]{Item $@-}` + +```HTML +
    + +
    +``` From b888d801db377a10b2f611bccad2f633ac2e73c4 Mon Sep 17 00:00:00 2001 From: Yogesh Ojha Date: Sun, 21 Jun 2020 21:12:31 +0530 Subject: [PATCH 6/7] Typos fixed --- tools/emmet.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tools/emmet.md b/tools/emmet.md index 74b4977..64f6b52 100644 --- a/tools/emmet.md +++ b/tools/emmet.md @@ -5,7 +5,7 @@ Emmet is a productivity toolkit for web developers that uses expressions to generate HTML snippets. ## Installation -Normally, Emmet installation should be a straight-forward process from the package-manager as most of the modern text editors support Emmet. If you have difficulty setting up emmet with your editor and wish to check if emmet supports your favorite editor or not, you can check from here. [Emmet Installation instructions](https://emmet.io/download/) +Normally, installation for Emmet should be a straight-forward process from the package-manager, as most of the modern text editors support Emmet. If you have difficulty setting up emmet with your editor and wish to check Emmet is supported by your favourite editor or not, you can check it from here. [Emmet Installation instructions](https://emmet.io/download/) ## Usage You can use Emmet in two ways: From 11f5b5b6c80cdfe5c039d12fa0b40dcc6814b930 Mon Sep 17 00:00:00 2001 From: Yogesh Ojha Date: Sun, 21 Jun 2020 21:26:15 +0530 Subject: [PATCH 7/7] Emmet in alphabetical order --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1b80f71..bb422c2 100644 --- a/README.md +++ b/README.md @@ -95,13 +95,13 @@ Feel free to take a look. You might learn new things. They have been designed to - [cURL](tools/curl.sh) - [Elasticsearch](tools/elasticsearch.js) +- [Emmet](tools/emmet.md) - [Git](tools/git.sh) - [Puppeteer](tools/puppeteer.js) - [Sublime Text](tools/sublime_text.md) - [VIM](tools/vim.txt) - [Visual Studio Code](tools/vscode.md) - [Xcode](tools/xcode.txt) -- [Emmet](tools/emmet.md) #### Infrastructure