Live LESS Theme Customizer

Features

  • Live edit the visuals of a web page in a browser with the help of Less.js (colors, padding and any other CSS properties)
  • New: Very easy setup with CSS fallback - Less is in use only when needed (it is automatically loaded into the preview document and will overwrite the CSS rules when the customizer is in use and is supported by the browser)
  • Edit the Less variables and see the results immediately on the preview page.
  • Generates the customized CSS file (and the minified version).
  • Provides a way to the user to freely overwrite any style by hand.
  • Can use any web fonts (by adding the @import's into the custom Less code).
  • Related variables - filter the variables that affects the appropriate element
  • Can import any customized Less file with comment hinting - it is very easy to set up the customizer.
  • Can save any color in the color picker and reuse them later.
  • The preview is in an iframe so any multi-paged theme can be edited without reloading the editor (the same Less variables can be used on every page, with the actual customizations applied to every page).
  • Javascript interface - load any pre-defined theme programmatically (see the theme selector in the advanced demo).
  • Very easy to set up the customizable variables (they are getting parsed from a Less file)

Target audience

  • For everyone who like to edit their own themes in the browser with instant visual feedback
  • For theme developers who wants to provide a way for their users to customize their purchased theme (they can customize on the demo page and can download the compiled CSS)

Updates

25/6/2014 - The tool now can automatically load Less.js and the less definitions into the preview document(s), no need for extra code in them.