UI/Theme Frameworks and Components
|Ant Design||An enterprise-class UI design language and React-based implementation.|
|Balloon.css||Simple tooltips made of pure CSS|
|Bootflat||Open source Flat UI KIT based on Bootstrap|
|BootPress||A PHP Framework with a built in Blog and Flat File CMS|
|Bootstrap||Front-end framework for developing responsive, mobile first projects on the web|
|Bootswatch||Collection of free themes for Bootstrap|
|Cardinal||Small "mobile first" CSS framework for front-end developers who build responsive web applications|
|Flat UI Free||Theme and framework for Bootstrap|
|Ink||set of tools for quick development of web interfaces|
|Metro UI CSS||Set of styles to create a site with an interface similar to Windows 8|
|Petal||A modern, light CSS UI framework developed at Shakr|
|prelude||Lightweight, responsive and extensible front-end framework|
|Schema||Light, responsive, and lean frontend UI framework|
|Semantic UI||UI component framework based around useful principles from natural language|
|Strapless||CSS boilerplate/framework for HTML elements, mixins library for patterns and color|
|UIkit||Lightweight and modular front-end framework for developing web interfaces|
|ngBoilerplate||An opinionated kickstarter for AngularJS projects|
|Wee||Lightweight front-end framework for logically building complex, responsive web projects|
|Flexible Grid System|
|Golden Grid System|
|Less Zen Grid|
|animate||Library of CSS3 keyframe animations|
|Clearless||Collection of mixins|
|Css3LessPlease||Conversion of css3please.com to Less mixins|
|CssEffects||Collection of CSS style effects|
|cube.less||Animated 3D cube using only CSS|
|Hexagon||Generate CSS hexagons with custom size and color|
|LESS Elements||Set of mixins|
|LESS Hat||Mixins library|
|lessley||A jasmine like testing suite written in pure Less|
|Lessmore||Mixins library. Cross-browser support for the CSS3 features and more|
|LESS-bidi||Set of mixins for creating bi-directional styling|
|media-query-to-type||Media Queries to Media Types with Less|
|More-Colors.less||Variables for easier color manipulation while you design in the browser|
|more-less||Mixin lib supporting Less 1.7|
|More.less||Mixins, animations, shapes and more|
|more-or-less||for-loops and other functions + css3 mixins|
|normalize.less||Modularized famous normalize.css using Less|
|Oban||Collection of mixins|
|Preboot||Collection of variables and mixins. The precursor to Bootstrap|
|prelude-mixins||Collection of mixins|
|Shape.LESS||Collection of mixins for various shapes|
|tRRtoolbelt.less||Mixins and functions for common actions|
|Tuesday.less||CSS Animation mixins library|
|Less Style Library||A collection of variables and LESS namespaced mixins|
- Crunch 2! (built-in compiling, debugging, and searching across @imports)
- Mindscape Web Workbench (built-in support)
- NetBeans (built-in syntax highlighting)
- jetBrains WebStorm and PhpStorm (built-in support)
- Brackets (built-in syntax highlighting, several extensions for compilation)
- CodeLobster (built-in syntax highlighting)
- KineticWing IDE (built-in support)
- nodeMirror (built-in support, built-in HTML/CSS/Less preview)
- HTML-Kit Tools (built-in support)
- Dreamweaver CC (built-in support)
- Komodo Less Compiler by Bob de Haas
- CSS Is Less (Visual Studio)
- Web Essentials 2012 (Visual Studio 2012)
- Web Essentials 2013 (Visual Studio 2013)
- Web Tools 2013 (Visual Studio)
- Less.js Syntax Highlighting User Defined Language by Raúl Salitrero
- Less.js Syntax Highlighting User Defined Language by azrafe7
- How to Install
|Autoprefixer||Add vendor prefixes|
|css-flip||Generate left-to-right (LTR) or right-to-left (RTL) CSS|
|functions||Write custom Less functions in Less itself|
|group-css-media-queries||Group CSS media queries|
|lesshint||Lint your Less|
|lists||Lists/arrays manipulation (incl. loops)|
|pleeease||Postprocess using pleeease|
|rtl||Reverse from ltr to rtl|
|variables-output||Export top-level variables to a JSON file|
|sass2less||Import and convert Sass/SCSS files into your Less code (incl. variables, mixins and more)|
|bower-resolve||Import from a Bower package|
|glob||Globbing support in Less imports|
|npm-import||Import from npm packages|
|resolve-blocks||Going up a tree to find specified component|
|advanced-color-functions||Functions to find more contrast colors|
|lists||Lists/arrays manipulation functions|
|urlencode||URL Encode function|
|util||A set of utility functions|
|Flexbox Grid||Flexbox Grid|
|Flexible Grid System||Flexible Grid System|
Edit the markdown source for "guis-for-less" Tip: try out the different Less tools available for your platform to see which one meets your needs.
This page focuses on GUI compilers. For command line usage and tools see Command Line Usage.
The editor and compiler for awesome people.
Crunch 2 is a cross-platform (Windows, Mac, and Linux) editor with integrated compiling. If you work with large Less projects, you should definitely try it out, as you only need the free version for Less files. Available at: https://getcrunch.co/.
SimpLess is a minimalistic Less compiler. Just drag, drop and compile.
Koala is a cross-platform GUI application for compiling less, sass and coffeescript.
Features: cross platform, compile error notification supports and compile options supports.
Get more info: http://koala-app.com/
Prepros is a tool to compile Less, Sass, Compass, Stylus, Jade and much more.
Get more info at https://prepros.io/
WinLess started out as a clone of Less.app, it takes a more feature-complete approach and has several settings. It also supports starting with command line arguments.
Get more info: http://winless.org
CodeKit is the successor to LESS.app, and supports Less among many other preprocessing languages, such as SASS, Jade, Markdown, and many more.
Get more info: http://incident57.com/codekit
CSS edits and image changes apply live. CoffeeScript, SASS, Less and others just work.
Get more info: http://livereload.com
Plessc is a gui fronted made with PyQT.
Auto compile, log viewer, open the less file with the editor chosen, settings for compile the file. Get more info: https://github.com/Mte90/Plessc
|less2css.org||Online Integrated Development Environment (IDE) that is hosted in a browser allowing users to edit and compile Less to CSS in real-time.|
|winless.org/online-less-compiler||This Online Less Compiler can help you to learn Less. You can go through the examples below or try your own Less code.|
|lesstester.com||Online compiler for Less CSS.|
|leafo.net/lessphp/editor||lessphp live demo.|
|estFiddle||Online Less compiler providing live demo for Less and est. Allowing users to switch among all versions of Less after
|BeautifyTools Less Compiler||Online Less compiler with optional formatting and minification at BeautifyTools|
|Less WebCompiler||The most configurable Less web compiler on the internet, it allows to render the CSS output with your own Coding Standards!|
|CSSDeck Labs||CSSDeck Labs is a place where you can quickly create some experiments (or testcases) that involves HTML, CSS, JS code.|
|CodePen||CodePen is a playground for the front end side of the web.|
|Fiddle Salad||An online playground with an instantly ready coding environment.|
|jsFiddle||Online Web Editor|
- assemble-less: Full-featured Grunt.js plugin for compiling Less files to CSS, with additional options for maintaining libraries of Less components and themes. For advanced users, this plugin allows you to define and manage Less "packages" or "bundles" using JSON, Lo-dash(underscore) templates (e.g.
<%= bootstrap.less %>), and node-glob / minimatch (e.g.
'../src/**/*.less"). assemble-less also has a number of options including minifying CSS
- gulp-less: Please note that this plugin discards
source-mapoptions, opting to instead using the gulp-sourcemaps library.
- autoless: A Less files watcher, with dependency tracking (changes to imported files cause other files to be updated too) and growl notifications.
- Connect Middleware for Less: Connect Middleware for Less compiling
Wro4j Runner CLI Download the wro4j-runner.jar file and run the following command:
java -jar wro4j-runner-1.5.0-jar-with-dependencies.jar --preProcessors lessCss
More details can be found here: Wro4j Runner CLI
lessp.pl styles.less > styles.css
Windows Script Host
Note - the official Less node runs on windows, so we are not sure why you would use this.
Less.js for Windows with this usage:
cscript //nologo lessc.wsf input.less [output.css] [-compress]
lessc input.less [output.css] [-compress]
dotless for Windows can be run like this:
dotless.Compiler.exe [-switches] <inputfile> [outputfile]
- Lesscss (Runs less.js using Rhino, Nasshorn or node.js engine; 1.7.0 compliant)
- Lesscss gradle plugin (Gradle plugin based on Lesscss)
- Less4j (Native Java implementation.)
- JLessC (Less compiler written completely in Java)
Know of another port that should be added to this list? Please let us know.