Écrire un article
Tea Innovation



Nous vous parlions de LESS dans un précédent article qui vous permettait d'écrire plus rapidement vos feuilles de style. Emmet révolutionne encore le processus de rédaction : lorsque vous l'aurez essayé vous ne pourrez plus vous en passer ! 



C'est quoi ?

Emmet est un système performant d'abréviations qui convertit quelques lettres en ligne CSS ou HTML complète.


Installation

Emmet est disponible pour votre éditeur de textes favori sur cette page :
www.emmet.io/download

Pour Brackets, il vous suffit simplement de rechercher emmet dans Fichier > Gestionnaire d'extensions (finalement Brackets est très pratique pour le CSS, le LESS et le HTML, je préfère Notepad++ pour PHP, JS et txt).

Pour Notepad++, il vous faudra également installer le plugin Python Script (ça ne fonctionne pas chez moi).


Tutoriel

Prérequis
CSS niveau basique
HTML niveau basique

Dans une feuille CSS tapez

w:100


Tapez la touche Tab

w:100 est devenu width: 100px; !


Quelques exemples

h:250

devient

height: 250px;

 

 

ml:20

devient

margin-left: 20px;

 

 

d:n

devient

display: none;

 

 

p:a

devient

position: absolute;

 

 

bg:#ff0

devient

background: #ff0;

 

 

bg+

devient

background: #fff url() 0 0 no-repeat;

 

 

tt

devient

text-transform: uppercase;



et très pratique :

!

devient

!important

 

 

Et ça fonctionne aussi pour html !

toto

devient

<toto></toto>

 

 

#toto

devient

<div id="toto"></div>

 

 

.toto

devient

<div class="toto"></div>

 

 

div>div

devient

<div>
    <div></div>
</div>

 

 

html:5

devient

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   
</body>
</html>



Si vous vous trompez de syntaxe Emmet met ce qui lui semble le plus proche.

Les 2 points sont optionnels avec les chiffres lorsqu'il n'y a pas d’ambiguïté. Par exemple :

 

h250

devient

height: 250px;



Vous pouvez jouer à chercher vous-même les syntaxes pour chaque commande ou utiliser la liste des commandes :
docs.emmet.io/cheat-sheet

 

 

Auteur : Nicolas Barré



retour au blog

Commentaires  

Aubrey 10-10-2019 17:38
Does your blog have a contact page? I'm having problems locating it
but, I'd like to send you an email. I've got some suggestions for your blog you might be interested in hearing.
Either way, great blog and I look forward to seeing it grow over time.


Also visit my web-site - cheap cialis: http://cheapestcial.com
Signaler à l’administrateur
KelGell 15-08-2019 05:33
Lybrel Birth Control No Persciption buy generic cialis Maximum Amoxicillin Dose During Pregnancy Cialis Overnight Delivery Us Baclofene Contre Indication
Signaler à l’administrateur
KelGell 06-08-2019 17:15
Levitra 5 Mg Tutti I Giorni Amoxicillin Liver Damage Reversible where to buy cialis online safely Zithromax Cure Gonorrhea Acheter Du Clamoxil Preis Viagra Mg
Signaler à l’administrateur
KelGell 02-08-2019 19:30
Propecia Cuidados priligy foro Promethazine Without Prescription Finasteride Propecia Side Effects Precio Del Cialis En Farmacias
Signaler à l’administrateur
KelGell 29-07-2019 22:18
Amoxicillin Tr K Clv 875 125mg cialis no prescription Moulineaux Comprar Cialis Barcelona Online Achat Cytotec Sur Internet
Signaler à l’administrateur
urifefezuw 27-06-2019 08:59
http://mewkid.net/buy-amoxicillin/ - Amoxicillin - Prix.achetercommander.fr Amoxicillin ioe.vwod.poussenews.fr.bdh.zg http://mewkid.net/buy-amoxicillin/
Signaler à l’administrateur
ariziqihlita 27-06-2019 08:08
http://mewkid.net/buy-amoxicillin/ - Amoxicillin Without Prescription Amoxicillin cow.rbsa.poussenews.fr.onw.qo http://mewkid.net/buy-amoxicillin/
Signaler à l’administrateur
KelGell 08-05-2019 01:19
Amoxicillin Online Pills levitra generico prezzo Zithromax Dosage For Adults Zentel Valbazen Overnight Shipping Buy Without Perscription Discount Purchase Fluoxetine No Prior Script
Signaler à l’administrateur
KelGell 18-04-2019 18:06
Kamagra Jelly For Sale Amoxicillin Bp 500 Mg comment utiliser le levitra 20mg Cialis Pas Cher Lyon
Signaler à l’administrateur

Posez votre question !

Code de sécurité