AnalogGhost/emmetDom.md

## emmetDom.md

      
    Raw
  

              emmetDom.md
            
          
    Emmet - DOM Shortcuts

Bonus Activity

What is Emmet?

With Emmet you can rapidly create your markup.
You write simple abbreviations and just press Tab or Ctrl+E or any other other supported keyboard shortcut and Emmet expands the simple abbreviations into complex HTML and CSS code snippets.
Emmet will make your HTML and CSS workflow much faster.
Try the following

Open your compatible text editor and make sure emmet is installed.
Type the following and then hit tab.
div#header>h1.logo>a{site Name}

As we go through this exercise, you should understand how emmet turns that text into
<div id="header">
  <h1 class="logo"><a href="">site Name</a></h1>
</div>
The Shortcuts

Type the following into your text editor and then hit tab to see the results.
HTML Template

!

should reveal
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>
HTML Elements

div
p
span
{etc}

typing the name of any HTML element and hitting tab should give you a completed tag.
<div></div>
<p></p>
<span></span>
Element IDs

div#header

should give you
<div id="header"></div>
Try a few more with element/id combinations of your choosing.
Element Classes

div.logo

should give you
<div class="logo"></div>
Try a few more with element/class combinations of your choosing.
Try nesting classes like this
div.logo.big

you should see
<div class="logo big"></div>
Elements with IDs and Classes

div#header.logo

should reveal
<div id="header" class="logo"></div>
Experiment with some more combinations of your choosing.
Child Elements

ul>li>img

should give you
<ul>
  <li><img src="" alt=""></li>
</ul>
We can also add ids and classes to our nested elements.
div.header>div#main>.post

gives you
<div class="header">
  <div class="main">
    <div class="post"></div>
  </div>
</div>
notice that .post - it inferred it should be a div.  Try that with some other tag combinations.
Sibling elements

h1+h2

expands to
<h1></h1>
<h2></h2>
Multiplying Elements

li*5

will duplicate the element.  Very useful for list items.
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
Numbering

li.item$*5

will multiply to
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
try this
div#section$*5

Climb Up

header>#main^footer

With ^ operator, you can climb one level up the DOM and change context where following elements should appear.  Like a “..” for the DOM.
So the previous command expands to
<header>
  <div id="main"></div>
</header>
<footer></footer>
Grouping

Parentheses can be used for grouping.
(ul>li#item$*5)*3

This is incredibly powerful - everything between the parentheses is treated as a group.
So this command will create 3 unordered lists with 5 list items each.
<ul>
  <li id="item1"></li>
  <li id="item2"></li>
  <li id="item3"></li>
  <li id="item4"></li>
  <li id="item5"></li>
</ul>
<ul>
  <li id="item1"></li>
  <li id="item2"></li>
  <li id="item3"></li>
  <li id="item4"></li>
  <li id="item5"></li>
</ul>
<ul>
  <li id="item1"></li>
  <li id="item2"></li>
  <li id="item3"></li>
  <li id="item4"></li>
  <li id="item5"></li>
</ul>
Links

Emmet Cheat Sheet