Emmet LiveStyle – Votre CSS en live

video.jpg
Source vidéo : http://livestyle.emmet.io/

L’intégration HTML/ CSS est une tâche qui peut être plus ou moins longue suivant la complexité du projet. Les intégrateurs recherchent constamment de nouvelles techniques et fonctionnalités qui leur permettent de gagner du temps ici et là.

Emmet LiveStyle est un plug-in actuellement en version bêta, disponible sur Chrome, Safari et Sublime Text 2 et 3. Il permet au navigateur de prendre immédiatement en compte les modifications de votre feuille de styles ce qui vous évite de rafraîchir la page.
Ce n’est pas tout : Toutes les propriétés CSS modifiées via l’inspecteur d’élément seront également ajoutées automatiquement à votre feuille de styles.

Attention, pour toute modification du code HTML, vous devrez rafraîchir votre page comme d’habitude, souhaitons que les prochaines versions nous affranchisse définitivement de la touche F5.

Installation

Installer l’extension « LiveStyle » depuis le Package Control de Sublime Text.
Livestyle.png

Téléchargez ensuite l’extension pour le navigateur que vous utilisez (ici Google Chrome).
extension_chrome.png

Rendez-vous sur la page que vous souhaitez intégrer et ouvrez votre inspecteur d’élément.
Vous devriez voir apparaitre l’item « LiveStyle » sur votre menu horizontal.
menu.png

Cliquez sur « LiveStyle » et assurez-vous que le plug-in détecte bien votre éditeur de texte.
detection.png

Il vous suffit ensuite d’indiquer le chemin vers votre feuille de styles et le tour est joué.
instruction.png

Pour que la synchronisation se face correctement vous devez laisser la fenêtre de l’inspecteur d’élément ouverte.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.