01- Emmet

Work Flow - Markup & Styling

Emmet

Nesting >

Example

ul>li>a 🔁

Result

<ul> <li><a href=""></a></li> </ul>

Sibling +

Example

section+header+nav 🔁

Result

<section></section> <header></header> <nav></nav>

Repeat *

Example

ul>li*3 🔁

Result

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

Clases .

Example

div.contendor🔁

Result

<div class="contendor"></div>

ID #

Example

nav#menu🔁

Result

<nav id="menU"></nav>

Text {}

Example

div{Lorem Ipsum Dolor}🔁

Result

<div>Lorem Ipsum Dolor</div>

Custom Ahr []

Example

a[enlace]🔁

Result

<a href="www.google.com"></a>

Numbering $

Example

ul.li.num$*3🔁

Result

<ul class="li num1"></ul> <ul class="li num2"></ul> <ul class="li num3"></ul>

Invert numbs @

Example

ul>li.num$@-*3🔁

Result

<ul> <li class="num3"></li> <li class="num2"></li> <li class="num1"></li> </ul>

Base Numb @n

Example

ul>li.num$@3*4🔁

Result

<ul> <li class="num3"></li> <li class="num4"></li> <li class="num5"></li> <li class="num6"></li> </ul>

Leveling ^

Example

section>article>div^p🔁

Result

<section> <article> <div></div> </article> <p></p> </section>

Grouping ( )

Example

(header>nav)+(section>article)🔁

Result

<header> <nav></nav> </header> <section> <article></article> </section>

Dummy Text LOREM

Example

lorem🔁

Result

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur doloremque, nam id libero ipsam quisquam cumque consequuntur similique eveniet tenetur iusto officia placeat aspernatur, atque odio est accusamus repudiandae nostrum.

Reto

Example

header#header>nav.navbar.navbar-inverse>div.container>(div.navbar-header>(button[type="button"].narvar.navbar-toggle>(span.sr-only{Toggle navigation})>(span.icon-bar*3))(a.navbar-brand[href="index.php"]>img[src="imgs/logo.png"]))(div.collapse>ul.nav.navbar-nav>(li>a[href="index.html"].link{inicio})(li.active.link>a[href="login.html"].link{Ingresar})(li>a[href="registro.html"].link{Registarse})(li>a[href="contacto.html"].link{Contacto}))

Result

<header id="header"> <nav class="navbar navbar-inverse"> <div class="container"> <div class="navbar-header"> <button type="button" class="narvar navbar-toggle"> <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" class="link">Ingresar</a> </li> <li> <a href="registro.html" class="link">Registarse</a> </li> <li><a href="contacto.html" class="link">Contacto</a> </li> </ul> </div> </div> </nav> </header>