Nauczycie się pisać szybszy i wydajniejszy kod HTML i CSS.
Aby Tab w Emmet działał plik musi być zapisany jako html.
Jeżeli piszemy skrót dla Emmeta i przejdziemy do innej linijki to nasze polecenie zostanie „zapomniane”, należy wtedy wykasować ostatnią literkę i kontynuować pisanie polecenia.
Proponuję korzystać z Visual’a (ma więcej podpowiedzi niż Sublime).
Lista skrótów
Po każdym skrócie klikamy Tab
! – struktura witryny
<!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>
Wstawianie css i skryptów
link:css – wstawianie linków
<link rel=”stylesheet” href=”style.css”>
link:css[href=bla] – wstawianie linków i określanie ściezki dostępu
<link rel=”stylesheet” href=”bla”>
script:src – wstawianie skryptów
<script src=””></script>
meta:vp – wstawianie metatagów
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
————————————————————————–
Ctrl+/ – komentarz dla całej linii nie ważne gdzie jesteśmy
Shift+alt+a – komentarz zaznaczenia
shift+alt+up/down(w visual) lub Ctrl+shift+d(w sublime) – duplikuje nam wiersz, w którym mamy postawiony kursor lub zaznaczony fragment
div*3 – wiele elementów na raz
<div></div>
<div></div>
<div></div>
alt+up/down(w visual) lub ctrl+shift+up/down(w sublime) – przesuwamy wiersz w górę lub w dół. Nie musi on być zaznaczony.
Combinator selectors w CSS mają zastosowanie w działaniu emmeta
> bezpośrednie child w danym elemencie np. nav>ul>li
<nav>
<ul>
<li></li>
</ul>
</nav>
+ siblings działają na tym samym poziomie np. div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>
^ wychodzenie poziom wyżej przy pisaniu komend np. div+div>p>span+em^bq (można stawiać kilka ^^)
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
() oddziela poziomy od siebie np. div>(header>ul>li*2>a)+footer>p
<div>
<header>
<ul>
<li><a href=””></a></li>
<li><a href=””></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
$ – zamieniany jest na kolejne liczby np. p{tekst $}*5 wyświetli 5 akapitów i w tekście po kolei od 1 do 5; jeżeli po $ dodamy @jakaścyfra, to numerowanie rozpocznie się od podanej cyfry
p{tekst $}*3
<p>tekst 1</p>
<p>tekst 2</p>
<p>tekst 3</p>
h$[title=item$]{Header $}*3
<h1 title=”item1″>Header 1</h1>
<h2 title=”item2″>Header 2</h2>
<h3 title=”item3″>Header 3</h3>
ul>li.item$@3*5
<ul>
<li class=”item3″></li>
<li class=”item4″></li>
<li class=”item5″></li>
<li class=”item6″></li>
<li class=”item7″></li>
</ul>
ul>li.item$@-*5(w sublime) lub w visualu nie jest obsługiwana tak jak div$@*2
<ul>
<li class=”item5″></li>
<li class=”item4″></li>
<li class=”item3″></li>
<li class=”item2″></li>
<li class=”item1″></li>
</ul>
ul>li.item$$$*5
<ul>
<li class=”item001″></li>
<li class=”item002″></li>
<li class=”item003″></li>
<li class=”item004″></li>
<li class=”item005″></li>
</ul>
Klasy, ID, atrybuty, zawartość
.nazwa – tworzy div z klasą
<div class=”nazwa”></div>
#nazwa – tworzy div z id
<div id=”nazwa”></div>
form#search.wide
<form action=”” id=”search” class=”wide”></form>
p.text – nadaje klasę podanemu znacznikowi
<p class=”text”></p>
[name] – dodaje atrybut do div, można atrybutowi nadać wartość np. href=#, kolejne atrybuty nadajemy dalej po spacji
<div name=””></div>
img[alt=bla] – dodaje atrybut do konkretnego znacznika, można atrybutowi nadać wartość np. href=#, kolejne atrybuty nadajemy dalej po spacji
<img src=”” alt=”bla”>
td[rowspan=2 colspan=3 title]
<td rowspan=”2″ colspan=”3″ title=””></td>
a{Click me} – dodawanie tekstu wewnątrz znaczników
<div class=”a”>Click me</div>
p>{Click }+a{here}+{ to continue}
<p>
Click
<a href=””>here</a>
to continue
</p>
Emmet wie jakie tagi umieszczać wewnątrz nadrzędnego tagu, np.
ul>.klasa*5 – automatycznie doda li
<ul>
<li class=”klasa”></li>
<li class=”klasa”></li>
<li class=”klasa”></li>
<li class=”klasa”></li>
<li class=”klasa”></li>
</ul>
em>.klasa – doda span do znacznika pochylającego tekst i podnoszącego jego wartość semantyczną
<em><span class=”klasa”></span></em>
table>.a$*3>.b$*2
<table>
<tr class=”a1″>
<td class=”b1″></td>
<td class=”b2″></td>
</tr>
<tr class=”a2″>
<td class=”b1″></td>
<td class=”b2″></td>
</tr>
<tr class=”a3″>
<td class=”b1″></td>
<td class=”b2″></td>
</tr>
</table>
podajemy typ używając tag:
input:podajemytyp
<input type=”password” name=”” id=””>
a:mail
<a href=”mailto:”></a>
lorem ipsum
lorem – dodaje klasyczny loremipsum 2 zdaniowy
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione, laborum similique placeat amet illum quibusdam aperiam doloremque aliquam, sunt dolorum minus est voluptatum tempora? Vitae veniam fugiat voluptatibus voluptas impedit.
lorem5 – lorem z 5 wyrazów
Lorem ipsum dolor sit amet. lorem5 – lorem z 5 wyrazów
p*3>lorem10 – 3 akapity z 10 wyrazowym lorem
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam, veniam.</p>
<p>Accusamus non doloribus ipsam nisi odio a, vel omnis impedit?</p>
<p>Odio commodi expedita voluptas voluptate officiis maxime similique iste sunt?</p>
———————————————————————–
Możemy ustawić się w wielu miejscach na raz, by jednocześnie wpisywać teskt w różnych linijkach np. gdy zapomnimy dodać alt do img, aby tego dokonać wciskamy
lewy alt i klikamy tam, gdzie chcemy umieścić kursor lub możemy też nacisnąć ctrl+shift+alt i strzałkami góra/dół tworzyć nowe kursory
ctrl+d zaznacza takie same wyrazy tworząc nowe kursory, możemy wprowadzać zmiany w wielu miejscach na raz
ctrl+shift+g (w sublime) obejmowanie znacznikiem zaznaczenia, tzw. wrapping,
w visualu klikamy ctrl+shift+p lub edit->emmet… i wpisujemy emmet: wrap with abbreviation
Pełna lista skrótów https://docs.emmet.io/cheat-sheet/