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. For more options, see the plugin documentation.
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:
<script src="george.js"></script>
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 recently supported in many current browsers.
It is important to note that George is primarily intended as a development-time design tool, and is not intended for production use. By default there is no fallback behaviour for older browsers without support for CSS variables, which will result in missing and broken styles.
| Firefox | Chrome | Safari | Edge | |
|---|---|---|---|---|
| CSS Variables | 31+ | 49+ | 9.1+ | 15+ |
| Opening Blob URLs | 4+ | 23+ | 6.1+ | None |
| Color Inputs | 29+ | 20+ | 11+ | 14+ |
As such, George works best in the latest versions of Chrome, Firefox, or Safari. It does not work in MS Edge due to a restriction on opening blob URLs in a popup window. Internet Explorer is not supported.