Modifica i tuoi disegni CSS nel browser con CSS George
Hai mai desiderato apportare modifiche dirette nel tuo browser senza tornare ai tuoi file CSS? Una soluzione è Chrome Developer Tools ma alcuni sviluppatori preferire un flusso di lavoro più semplice.
Ecco dove CSS George entra. Questo è gratuito strumento di modifica nel browser lavori in cima a MENO ed è iniziato da a semplice file JavaScript.
La maggior parte degli sviluppatori preferisce a editor basato su browser poiché non tutti usano il precompilatore LESS. Ma CSS George funziona su un ambiente MENO che può essere installato rapidamente via npm.
Se hai installato npm, puoi eseguire questo semplice codice su aggiungi i file sorgente al tuo progetto attuale:
Installa npm --save-dev css-george
O puoi tira il George.js file da GitHub dove è ospitato insieme a tutti gli altri file sorgente. L'intero progetto è gratuito e open source, quindi puoi scarica una copia completa da GitHub se non si desidera utilizzare npm.
Con il .js file aggiunto all'intestazione del tuo sito, puoi iniziare eseguendo le funzioni di George direttamente dal browser. A apri la finestra dell'editor, fai clic sul tasto tilde accessibile da Shift + 'situato nell'angolo in alto a sinistra della maggior parte delle tastiere. UN nuova finestra dovrebbe apparire che assomiglia a questo:
Da questa schermata, puoi modifica le variabili LESS utilizzato per tutto, dai colori alle dimensioni dei caratteri o alle famiglie di font.
Questo è dove il plugin LESS diventa una necessità perché devi dire a CSS George quali variabili includere. Una volta impostati, puoi solo apri l'editor del browser CSS George e vai in città.
Spero sia ovvio che questo strumento non dovrebbe essere incluso in fase di esecuzione. A meno che tu non voglia specificamente permettere ai visitatori modifica il colore e lo stile della pagina, che generalmente non è una buona idea. Ma per test locali, CSS George è uno strumento raro che offre utilità per tutti gli sviluppatori di frontend.
Puoi vederlo dal vivo nella pagina demo di CSS George, o scarica una copia completa via npm o dal repository GitHub.
