Emmet

Emmet -zestaw narzędzi do skrótowego pisania kodu HTML i CSS – wpisujemy skrót i wciskamy TAB

 

główna strona Emmet

 

funkcjonalności

 

ul#menu>li.item-$*5>a[href=#]{Menu link $}

otrzymujemy:


<ul id="menu">
  
<li class="item-1"><a href="#">Menu link 1</a></li>

  
<li class="item-2"><a href="#">Menu link 2</a></li>

  
<li class="item-3"><a href="#">Menu link 3</a></li>

  
<li class="item-4"><a href="#">Menu link 4</a></li>

  
<li class="item-5"><a href="#">Menu link 5</a></li>

</ul>

w css dajemy: lg(top, red, blue)

otrzymujemy:


background-image: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
background-image: -webkit-linear-gradient(red, blue);
background-image: -moz-linear-gradient(red, blue);
background-image: -o-linear-gradient(red, blue);
background-image: linear-gradient(red, blue);

 

HTML

stworzenie szkieletu dokumentu HTML

!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

dodanie kilku class

div.bgText.bgText1>p{photo}

<div class="bgText bgText1">photo</div>

 

br tag:


p{Lorem ipsum dolor sit amet}>br+{consectetur adipiscing elit, sed do eiusmod tempor}>br+{incididunt ut labore}>br+{Tlf: 35364913}>br+{Ut enim ad minim veniam}>br+{quis nostrud}

Lorem ipsum generator

wpisując p>lorem80, otrzymujemy:



Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iure error, debitis quibusdam. Iste, quos, pariatur. Commodi, nesciunt amet rerum modi, eius saepe doloremque maxime rem. Itaque magni vel, quidem pariatur deleniti vero. Veniam, aliquam nostrum quae eaque sed aliquid omnis, repudiandae quasi error non eius debitis voluptatum corporis distinctio iste. Iure eos autem quae molestias accusantium, ratione incidunt aliquid nemo? Quisquam, autem, reprehenderit. Asperiores, impedit rerum reiciendis saepe veritatis harum, aperiam, maxime enim, odio ducimus adipisci iure. Inventore, tempora!


podając ul.generic-list>lorem10.item*4, otrzymujemy:




<ul class="generic-list">



<li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nesciunt?</li>






<li class="item">Iure, similique sequi odit. Perferendis nam, autem porro repudiandae sint.</li>






<li class="item">Quae quas nihil tempore cupiditate commodi temporibus dolores suscipit accusantium.</li>






<li class="item">Commodi eligendi odit dicta velit dolorem iure quisquam ullam delectus!</li>



</ul>



 

korzystanie z Emmet ułatwia fuzzy search – przeszukanie dostępnych definicji względem podanego zapytania nawet jeśli skrót nie jest poprawny.

wywołania:

dają efekt: overflow: hidden;

wywołania:

daje efekt: margin: 10px;

 

Skróty

# – nadanie id elementowi

. – nadanie klasy elementowi

> – element potomny

$*6 – zmienna odliczana od 1 do 6

$ – wstawiona zmienna licznika

* – mnożnik, ile razy zostanie wstawiony dany element – p*3

[] –  wprowadzone atrybuty znacznika, jeden po drugim rozdzielone spacją, automatyczne dodanie obowiązkowych atrybutów – img.myClass[width=100px height=100px src=img/pic alt=myPic]

{} – wprowadzanie tekstu do znacznika

+ – dodaje kolejne elementy na tym samym poziomie zagnieżdżenia, rodzeństwo, podane w () – (header>h2)+(article>p*3)

^ – powrót do rodzica i wstawienie za nim kolejnego elementu – header>h1#main^footer>p{All rights reserved.}

 

CSS

type ->  get

 

Skróty w CSS

+ – dodaje wszystkie dodatkowe wartości

f -> font: |;

f+ -> font: 1em Arial,sans-serif;

bd+ -> border: 1px solid #000;

 

dla uzyskania prefiksów dla przeglądarek

-transition ->

-webkit-transition: |;
-o-transition: |;
transition: |;

 


padding:  !important;
margin: 10em !important;

 

Gradient

lg(left, #fff 10%, #000)

background-image: -webkit-linear-gradient(left, #fff 10%, #000);
background-image: -o-linear-gradient(left, #fff 10%, #000);
background-image: linear-gradient(to right, #fff 10%, #000);

 

Akcje Emmet

poruszanie pomiędzy punktami edycji – http://docs.emmet.io/actions/go-to-edit-point/

wzbogacanie znacznika img o atrybuty width, height – http://docs.emmet.io/actions/update-image-size/

http://docs.emmet.io/actions/

http://docs.emmet.io/#referrer=blog.kamilbrenk.pl

http://docs.emmet.io/cheat-sheet/#referrer=blog.kamilbrenk.pl

http://docs.emmet.io/cheat-sheet/

http://eduweb.pl/live/emmet—pisz-kod-html-i-css-z-predkoscia-swiatla

 

https://designshack.net/articles/css/7-awesome-emmet-html-time-saving-tips/

http://www.hongkiat.com/blog/html-css-faster-emmet/

http://peiwen.lu/Emmet-Css-Snippets-for-Sublime-Text-2/

 

trochę przykładów:


(.ws_filtr__option>input#ws_checkbox-5$[type=checkbox name=group5]+label[for=ws_checkbox-5$]>span.ws_checkbox{text})*4

#web development

Agnieszka Trefler

Agnieszka Trefler (Ruda) - freelancer, web developer, specjalistka od WordPressa z Wrocławia. Z pasją budowania stron, blogowania i fotografowania. Twórca Inspiracji fotograficznych.