Startpagina » Webontwerp » Bewerk je CSS-ontwerpen in de browser met CSS George

    Bewerk je CSS-ontwerpen in de browser met CSS George

    Heb je dat ooit gewild voer directe bewerkingen uit in uw browser zonder terug te schakelen naar uw CSS-bestanden? Een oplossing is Chrome-ontwikkelaarstools, maar enkele ontwikkelaars liever een eenvoudiger workflow.

    Dat is waar CSS George komt binnen. Dit is gratis bewerkingsprogramma in de browser werken bovenop LESS en het wordt geïnitieerd door een eenvoudig JavaScript-bestand.

    De meeste ontwikkelaars geven de voorkeur aan een browser-gebaseerde editor omdat niet iedereen de LESS-precompiler gebruikt. Maar CSS George werkt op een LESS-omgeving welke snel kan worden geïnstalleerd via npm.

    Als u npm hebt geïnstalleerd, kunt u deze eenvoudige code uitvoeren naar voeg de bronbestanden toe naar je huidige project:

     npm install --save-dev css-george 

    Of je kan trek aan de George.js het dossier van GitHub waar het samen met alle andere bronbestanden wordt gehost. Het hele project is gratis en open source, dus dat kan download een volledige kopie van GitHub als je npm niet wilt gebruiken.

    Met de .js bestand toegevoegd aan de kop van uw site, kunt u starten uitvoeren van George-functies rechtstreeks vanuit de browser. Naar open het editorvenster, klik op de tilde-sleutel die toegankelijk is vanuit Shift + 'in de linkerbovenhoek van de meeste toetsenborden. EEN nieuw raam zou moeten verschijnen dat er ongeveer zo uitziet:

    Vanaf dit scherm kunt u bewerk de MINDER variabelen gebruikt voor alles, van kleuren tot lettergroottes of lettertypefamilies.

    Dit is waar de MINDER plug-in wordt een noodzaak omdat je CSS aan George moet vertellen welke variabelen moeten worden opgenomen. Zodra ze zijn ingesteld, kunt u gewoon open de CSS George-browsereditor en ga naar de stad.

    Ik hoop dat het duidelijk is dat deze tool zou niet worden opgenomen tijdens runtime. Tenzij je specifiek bezoekers wilt toestaan bewerk de paginakleur en -stijl, wat over het algemeen geen goed idee is. Maar voor lokale testen, CSS George is een zeldzame tool die bruikbaar is voor alle ontwikkelaars van de frontend.

    Jij kan zie het live op de CSS George demopagina, of download een volledige kopie via npm of vanuit de GitHub repo.