01- Emmet
Work Flow - Stylling
Nesting >
Example
ul>li>a ↔️
Result
<![CDATA[
<ul>
<li><a href=""></a></li>
</ul>
]]>
Sibling >
Example
section+header+nav ↔️
Result
<![CDATA[
<section></section>
<header></header>
<nav></nav>
]]>
Repeat >
Example
ul>li*3 ↔️
Result
<![CDATA[
<ul>
<li></li>
<li></li>
<li></li>
</ul>
]]>
Class >
Example
div.contenedor ↔️
.contenedor2 ↔️
Result
<![CDATA[
<div class="contenedor"></div>
<div class="contenedor2"></div>
]]>
Multiple Classes >
Example
div.clase1.clase2.clasen ↔️
Result
<![CDATA[
<div class="clase1 clase2 clasen"></div>
]]>
Identifier attribute >
Example
nav#menu ↔️
Result
<![CDATA[
<nav id="menu"></nav>
]]>
Add text >
Example
div{Lorem Ipsum Dolor} ↔️
a{Click Aquí} ↔️
Result
<![CDATA[
<div>Lorem Ipsum Dolor</div>
<a href="">Click Aquí</a>
]]>
Customize attributes >
Example
a[href=www.google.com] ↔️
Result
<![CDATA[
<a href="www.google.com"></a>
]]>
Consecutive numbers >
Example
ul>li.num$*3 ↔️
section>article.sec$$$*3 ↔️
Result
<![CDATA[
<ul>
<li class="num1"></li>
<li class="num2"></li>
<li class="num3"></li>
</ul>
<section>
<article class="sec001"></article>
<article class="sec002"></article>
<article class="sec003"></article>
</section>
]]>
Adress consecutive numbers >
Example
ul>li.num$@-*3 ↔️
Result
<![CDATA[
<ul>
<li class="num3"></li>
<li class="num2"></li>
<li class="num1"></li>
</ul>
]]>
Base consecutive numbers >
Example
ul>li.num$@3*4 ↔️
Result
<![CDATA[
<ul>
<li class="num3"></li>
<li class="num4"></li>
<li class="num5"></li>
<li class="num6"></li>
</ul>
]]>
Level up >
Example
section>article>div^p ↔️
Result
<![CDATA[
<section>
<article>
<div></div>
</article>
<p></p>
</section>
]]>
Group elements >
Example
(header>nav)(section>article) ↔️
Result
<![CDATA[
<header>
<nav></nav>
</header>
<section>
<article></article>
</section>
]]>
Generate "Lorem Ipsum Dolor" >
Example
lorem ↔️
lorem20 ↔️
lorem*5 ↔️
Result
<![CDATA[
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque officiis harum vitae eius fuga exercitationem iure blanditiis, impedit ex! Nemo doloribus facere rem iste ipsam cumque tempore quos at neque.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, suscipit vero odio deleniti sit distinctio perspiciatis praesentium porro enim magnam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga dolorem maxime amet praesentium harum in id, sint deleniti sit sunt recusandae, assumenda veniam officiis enim dolores quia aut fugit mollitia.
Natus neque et voluptatem vel beatae modi quod commodi! Accusantium, veritatis, voluptatem deserunt laborum, dignissimos quos ea voluptatibus fuga adipisci eum repudiandae iusto velit necessitatibus reiciendis! Qui nihil sed alias?
Quas perferendis commodi reprehenderit soluta alias sunt corporis quam officia deserunt dignissimos numquam ipsa magnam fugiat, dolores id quidem quaerat. Commodi, consequuntur rem ipsum vero tempore reprehenderit harum nesciunt sapiente?
Blanditiis ratione iure nisi numquam at tempora. Iure recusandae, dolore officiis aperiam dolorum quisquam quos fugit doloribus nobis! Voluptates possimus illo hic eos consectetur commodi placeat, adipisci laborum aperiam minima.
Rem tempore corporis molestias, ut nemo maxime beatae provident aliquam. In placeat deserunt laudantium rerum provident sint officia consequatur, quae eligendi itaque corrupti eaque cupiditate! Ducimus veniam non consectetur blanditiis.
]]>
Documents HTML >
Example
html:xs ↔️
html:xt ↔️
html:4s ↔️
html:4t ↔️
html:5 ↔️
Result
<![CDATA[
<html:xs></html:xs>
<html:xt></html:xt>
<html:4s></html:4s>
<html:4t></html:4t>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
]]>
Meta TAGS >
Example
meta:vp ↔️
Result
<![CDATA[
<meta name="viewport" content="width=device-width, initial-scale=1.0">
]]>
Challenge >
Example
header#header>nav.navbar.navbar-inverse>div.container>div.navbar-header>button.navbar-toggle[type="button"]>(span.sr-only{Toggle navigation}+span.icon-bar*3)^a.navbar-brand[href="index.php"]>img[src="imgs/logo.png" alt=""]^^div.collapse>ul.nav.navbar-nav>li>a.link[href="index.html"]{Inicio}^li.active.link>a[href="login.html"]{Ingresar}^li>a.link[href="registro.html"]{Registrarse}^li>a.link[href="contacto.html"]{Contacto} ↔️
Result
<![CDATA[
<header id="header">
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.php" class="navbar-brand">
<img src="imgs/logo.png" alt="">
</a>
</div>
<div class="collapse">
<ul class="nav navbar-nav">
<li>
<a href="index.html" class="link">Inicio</a>
</li>
<li class="active link">
<a href="login.html">Ingresar</a>
</li>
<li>
<a href="registro.html" class="link">Registrarse</a>
</li>
<li>
<a href="contacto.html" class="link">Contacto</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
]]>