Edit Your CSS Designs In-Browser with CSS George
Have you ever wanted to make direct edits in your browser without switching back to your CSS files? One solution is Chrome Developer Tools but some developers prefer a simpler workflow.
That’s where CSS George comes in. This free in-browser editing tool works on top of LESS and it’s initiated by a simple JavaScript file.
Most developers prefer a browser-based editor since not everyone uses the LESS precompiler. But CSS George does run on a LESS environment which can be installed quickly via npm.
Read Also: Web Design: Getting Started With Chrome Developer Tools
If you have npm installed then you can run this simple code to add the source files to your current project:
npm install --save-dev css-george
Or you can pull the George.js file from GitHub where it’s hosted alongside all the other source files. The entire project is free and open source so you can download a full copy from GitHub if you don’t want to use npm.
With the .js file added to your site header, you can start executing George functions right from the browser. To open the editor window, click the tilde key which is accessible from Shift + ` located in the top-left corner of most keyboards. A new window should appear that looks something like this:
From this screen, you can edit the LESS variables used for everything from colors to font sizes or font families.
This is where the LESS plugin becomes a necessity because you have to tell CSS George which variables to include. Once they’re set up, you can just open the CSS George browser editor and go to town.
I hope it’s obvious that this tool should not be included at runtime. Unless you specifically want to let visitors edit the page color and style, which generally is not a good idea. But for local testing, CSS George is a rare tool that offers utility for all frontend developers.
You can see it live on the CSS George demo page, or download a full copy via npm or from the GitHub repo.