Modifiez vos conceptions CSS dans le navigateur avec CSS George
Avez-vous déjà voulu faire des modifications directes dans votre navigateur sans revenir à vos fichiers CSS? Une solution est Chrome Developer Tools, mais certains développeurs préférez un flux de travail plus simple.
C'est là que CSS George entre. Cette libre outil d'édition dans le navigateur travaux au-dessus de MOINS et c'est initié par un fichier JavaScript simple.
La plupart des développeurs préfèrent un éditeur basé sur un navigateur puisque tout le monde n’utilise pas le précompilateur LESS. Mais CSS George fonctionne sur un environnement MOINS qui peut être installé rapidement via npm.
Si vous avez installé npm, vous pouvez exécuter ce code simple pour: ajouter les fichiers source à votre projet actuel:
npm installer --save-dev css-george
Ou tu peux tirer le George.js fichier depuis GitHub où il est hébergé avec tous les autres fichiers source. L'ensemble du projet est gratuit et open source afin que vous puissiez télécharger une copie complète depuis GitHub si vous ne voulez pas utiliser npm.
Avec le .js fichier ajouté à l'en-tête de votre site, vous pouvez commencer exécuter des fonctions de George directement depuis le navigateur. À ouvrir la fenêtre de l'éditeur, cliquez sur la touche tilde accessible à partir de Maj + 'située dans le coin supérieur gauche de la plupart des claviers. UNE nouvelle fenetre devrait ressembler à quelque chose comme ça:
A partir de cet écran, vous pouvez éditer les variables LESS utilisé pour tout, des couleurs aux tailles de police ou aux familles de polices.
C’est là que le plugin LESS devient une nécessité parce que vous devez dire CSS George quelles variables inclure. Une fois qu'ils sont installés, vous pouvez simplement ouvrez l'éditeur de navigateur CSS George et aller en ville.
J'espère qu'il est évident que cet outil ne devrait pas être inclus à l'exécution. Sauf si vous voulez spécifiquement laisser les visiteurs éditer la couleur et le style de la page, ce qui n'est généralement pas une bonne idée. Mais pour test local, CSS George est un outil rare qui offre un utilitaire pour tous les développeurs front-end.
Vous pouvez le voir en direct sur la page de démonstration CSS George, ou télécharger une copie complète via npm ou depuis le dépôt GitHub.
