Bearbeiten Sie Ihre CSS-Designs im Browser mit CSS George
Wolltest du schon mal? direkte Änderungen vornehmen in Ihrem Browser, ohne zurück zu Ihren CSS-Dateien zu wechseln? Eine Lösung sind die Chrome Developer Tools, aber einige Entwickler lieber einen einfacheren Workflow.
Das ist wo CSS George kommt rein. Das ist kostenlos In-Browser-Bearbeitungstool funktioniert auf WENIGER und es wird von a initiiert einfache JavaScript-Datei.
Die meisten Entwickler bevorzugen eine Browser-basierter Editor da nicht jeder den LESS-Precompiler verwendet. Aber CSS George läuft in einer LESS-Umgebung das kann schnell installiert werden über npm.
Wenn Sie npm installiert haben, können Sie diesen einfachen Code ausführen Fügen Sie die Quelldateien hinzu zu Ihrem aktuellen Projekt:
npm install --save-dev css-george
Oder du kannst Zieh den George.js Datei von GitHub, wo es zusammen mit allen anderen Quelldateien gehostet wird. Das gesamte Projekt ist kostenlos und Open Source, so dass Sie es können Laden Sie eine vollständige Kopie herunter von GitHub, wenn Sie npm nicht verwenden möchten.
Mit dem .js Datei zu Ihrem Site-Header hinzugefügt, können Sie beginnen George-Funktionen ausführen direkt aus dem Browser. Zu Öffnen Sie das Editorfenster, Klicken Sie auf die Tilde-Taste, die über Umschalttaste + in der oberen linken Ecke der meisten Tastaturen aufgerufen werden kann. EIN neues Fenster sollte erscheinen, das ungefähr so aussieht:
Von diesem Bildschirm aus können Sie Bearbeiten Sie die LESS-Variablen Wird für alles verwendet, von Farben über Schriftgrößen oder Schriftfamilien.
Hier ist das LESS-Plugin wird eine Notwendigkeit weil Sie CSS George sagen müssen welche Variablen enthalten sind. Sobald sie eingerichtet sind, können Sie dies einfach tun Öffnen Sie den CSS George Browser-Editor und geh in die Stadt.
Ich hoffe es ist offensichtlich, dass dieses Tool sollte nicht zur Laufzeit enthalten sein. Es sei denn, Sie möchten Besucher ausdrücklich zulassen Bearbeiten Sie die Seitenfarbe und den Stil, Das ist im Allgemeinen keine gute Idee. Aber für lokales Testen, CSS George ist ein seltenes Tool, das allen Frontend-Entwicklern nützliche Funktionen bietet.
Sie können sieh es live auf der Demo-Seite von CSS George oder Laden Sie eine vollständige Kopie herunter über npm oder aus dem GitHub-Repo.
