diff --git a/emmet.md b/emmet.md new file mode 100644 index 000000000..65a085421 --- /dev/null +++ b/emmet.md @@ -0,0 +1,175 @@ +--- +title: Emmet +category: Markup +layout: 2017/sheet +prism_languages: [html] +--- + +### Child: > + +``` +nav>ul>li +``` +Expands to +```html + +``` + + +### Sibling: + + +``` +section>p+p+p +``` +Expands to +```html +
+

+

+

+
+``` + +### Climb Up: ^ + +``` +section>header>h1^footer +``` +Expands to +```html +
+
+

+
+ +
+``` + +### Grouping: () + +``` +section>(header>nav>ul>li)+footer>p +``` +Expands to +```html +
+
+ +
+ +
+``` + +### Multiplication: \* + +``` +ul>li*3 +``` +Expands to +```html + +``` + +### IDs and Classes: . # + +``` +ul.menu>li.menu__item+li#id_item+li.menu__item#id_2 +``` +Expands to +```html + +``` + +### Numbering: $ + +``` +ul>li.item$*3 +ul>li.item$$*3 +ul>li.item$@-*3 +ul>li.item$@3*5 +``` +Expands to +```html + + + + +``` + +### Attributes: [] + +``` +input[type="text"] +div[data-attr="test"] +``` +Expands to +```html + +
+``` + +### Text: {} + +``` +p{Lorem ipsum} +``` +Expands to +```html +

Lorem ipsum

+``` + +### Implicit tags + +``` +.default-block +em>.default-inline +ul>.default-list +table>.default-table-row>.default-table-column +``` +Expands to +```html +
+ + + + + + +
+```