Intégrer en live avec Emmet LiveStyle

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

Avec l’évolution perpétuelle du web, les tâches des intégrateurs s’avèrent de plus en plus complexe, mais d’un autre coté on est obligé de nous organiser pour ne pas être pénalisé sur la productivité.

Emmet LiveStyle est un plug-in qui va nous aider à booster notre production car le navigateur va prendre immédiatement en compte les modifications de notre CSS et qui nous évite de rafraîchir la page, mais aussi toutes les propriétés CSS modifiées via l’inspecteur d’élément seront également ajoutées automatiquement dans les fichiers CSS.

Malgré le fait qu’il soit encore en version bêta, il est tout à faire opérationnel, disponible pour Chrome, Safari en le combinant avec l’éditeur Sublime Text .

Tout de même une remarque s’impose, pour les modifs sur la structure html de la page il faudrait rafraichir la page (F5), nous espérons que les prochaines versions du module nous affranchisse définitivement de la touche F5.

Installation de l’extension sur Sublime Text

Ouvrez votre éditeur Sublime Text ou installez-le si ce n’est pas encore le cas, puis rendez vous sur le Package Control puis installer l’extension « LiveStyle ».

Livestyle

Installation de l’extension pour le navigateur :

Téléchargez l’extension pour le navigateur que vous utilisez (dans notre cas Google Chrome).

chrome extension

Si tous ce passe bien, rendez-vous sur la page que vous souhaitez intégrer et ouvrez votre inspecteur d’élément ( F12).
Vous devriez voir le module « LiveStyle » sur votre menu horizontal.

menu

Cliquez sur « LiveStyle » et assurez-vous que le plug-in se synchronise bien avec Sublime text.
Il vous suffit ensuite d’indiquer le chemin vers votre feuille de styles et le tour est joué.

instruction

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

Répondre