George is an in-browser design tool for previewing and customizing web styles at runtime.
George is built on top of Less and turns its compile-time variables into native CSS variables that can be changed at runtime in the browser. For editing, it provides an interface showing a list of the variables that includes textboxes and color pickers to customize their values. The editor data is based on information about the variables that is encoded in the CSS file by the Less plugin, via inline comments similar to sourcemaps.
George is available as a plugin for the Less stylesheet precompiler, to expose Less variables as runtime-editable CSS variables. It's easy to get set up and running!
The first step is installing the plugin from npm:
npm install --save-dev less-plugin-css-george
Now you can annotate your variable declarations in your Less source files to expose them for runtime manipulation:
/* @export */ @header-bkg: #ffffff;
To generate a CSS file with George support, just run the less compiler with the --css-george flag.
Installing the runtime editor is as easy as including a script tag in your HTML page! It will automatically set up the editor from annotated CSS files referenced on the page.
If you're using npm, you can install the css-george package:
npm install --save-dev css-george
To download the latest version of the script file directly, you can go to the dist folder
on GitHub and add it to your page:
After adding the script to your page, the keyboard shortcut shown above should open the editor in a popup window.
George makes use of several recent additions to the browser API landscape, including CSS variables, Blob URLs, and Color Inputs. These are not supported in many older browsers, and only partially supported in many current browsers.
It is important to note that George is intended as a development-time design tool, and should not be enabled in production. In particular, browsers that don't support CSS variables will render with missing and broken styles, and there is no fallback behaviour.
|Opening Blob URLs||4+||23+||6.1+||None|
|Color Inputs||29+||20+||None (TP)||14+|
As such, George works best in the latest versions of Chrome, Firefox, or the Safari Tech Preview. It works (without color pickers) in Safari 10, but does not work in MS Edge due to a restriction on opening blob URLs in a popup window. Internet Explorer is not supported.