Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/LucasBassetti/awesome-less

:sunglasses: A curated list of awesome {Less}
https://github.com/LucasBassetti/awesome-less

List: awesome-less

awesome awesome-list css less lesscss

Last synced: 2 months ago
JSON representation

:sunglasses: A curated list of awesome {Less}

Awesome Lists containing this project

README 

        
# Awesome Less [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)



[](http://lesscss.org/)



> Curated list of awesome Less frameworks, libraries, style guides, articles, and resources. The main idea is that everyone can contribute here, so we can center all the informations about Less and keep up-to-date.



## Contents

- [About](#about)

- [Getting Started](#getting-started)

- [UI/Theme Frameworks and Components](#uitheme-frameworks-and-components)

- [Libraries and Mixins](#libraries-and-mixins)

  - [Grid](#grid)

  - [Media Queries](#media-queries)

  - [Color](#color)

  - [Animation](#animation)

  - [Miscellaneous](#miscellaneous)

- [Style Guides](#style-guides)

- [Ports of Less](#ports-of-less)

  - [Java](#java)

  - [.Net](#net)

  - [PHP](#php)

  - [Python](#python)

  - [Ruby](#ruby)

  - [Go](#go)

- [GUIs, Editors and Plugins](#guis-editors-and-plugins)

- [Online Less Compilers](#online-less-compilers)

- [Online Web IDEs/Playgrounds with Less support](#online-web-idesplaygrounds-with-less-support)

- [Translations](#translations)

- [Articles](#articles)

- [Books](#books)

- [Videos](#videos)

- [Experiments](#experiments)

- [Community](#community)

- [Contributing](#contributing)

- [License](#license)



## About



Less is a open source dynamic style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side. Designed by Alexis Sellier, Less is influenced by Sass and has influenced the newer "SCSS" syntax of Sass, which adapted its CSS-like block formatting syntax. Less provides the following mechanisms: variables, nesting, mixins, operators and functions; the main difference between Less and other CSS precompilers being that Less allows real-time compilation via Less by the browser. Font: [Wikipedia](https://en.wikipedia.org/wiki/Less_(stylesheet_language))



**[Back to top](#contents)**



## Getting Started



- [Beginner's Guide](http://www.hongkiat.com/blog/less-basic/)

- [Getting Started with Less](https://scotch.io/tutorials/getting-started-with-less)

- [Learn in 10 Minutes](http://tutorialzine.com/2015/07/learn-less-in-10-minutes-or-less/)

- [Official Guide](http://lesscss.org/)

- [Official Repository](https://github.com/less/less.js)



**[Back to top](#contents)**



## UI/Theme Frameworks and Components



- [1pxdeep](http://rriepe.github.io/1pxdeep/) - Brings designing by relative visual weight, or designing with color schemes, to Bootstrap.

- [Ant Design](https://github.com/ant-design/ant-design/) - 	An enterprise-class UI design language and React-based implementation.

- [Bootstrap a11y theme](https://github.com/bassjobsen/bootstrap-a11y-theme) - Makes web accessibility easier for Bootstrap developers.

- [Bootstrap 3](http://getbootstrap.com/) - Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

- [Bootswatch](http://bootswatch.com/) - Collection of free themes for Bootstrap.

- [Cardinal](http://cardinalcss.com/) - Small "mobile first" CSS framework for front-end developers who build responsive web applications.

- [CSSHórus](https://github.com/firminoweb/csshorus) - 	Library for development of responsive and mobile websites.

- [Flat UI Free](http://designmodo.github.io/Flat-UI/) - Theme and framework for Bootstrap.

- [JBST](http://jbst.eu/) - Theme framework that can be used as a standalone website builder or to create WordPress themes.

- [Less Rails](https://github.com/metaskills/less-rails) - Less for Rails.

- [Material Design for Bootstrap](https://github.com/FezVrasta/bootstrap-material-design) - Material Design for Bootstrap is a Bootstrap V3 compatible theme; it is an easy way to use the new Material Design guidelines by Google in your Bootstrap 3 based application.

- [Metro UI CSS](http://metroui.org.ua/) - Set of styles to create a site with an interface similar to Windows 8.

- [Schema](http://danmalarkey.github.io/schema/) - 	Light, responsive, and lean frontend UI framework.

- [Semantic UI](http://semantic-ui.com/) - UI component framework based around useful principles from natural language.

- [UIkit](https://getuikit.com/) - Lightweight and modular front-end framework for developing web interfaces.

- [Wee](https://www.weepower.com/) - Lightweight front-end framework for logically building complex, responsive web projects.



**[Back to top](#contents)**



## Libraries and Mixins



### Grid



- [Bootstrap Grid Only](https://github.com/zirafa/bootstrap-grid-only) - Bootstrap's responsive grid and responsive utility classes only, without any extras. Lightweight yet still powerful. Style to taste.

- [Framework](https://github.com/jonikorpi/Less-Framework) - Less Framework is a CSS grid system for designing adaptive web sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

- [Flexible Grid System](http://flexible.gs/) - This framework will let you create your web applications in a flexible way that you've never experienced before.

- [Fluidable](http://fluidable.com/) - Fluidable is a mobile first, responsive grid system. It is standalone, lightweight & built using Less.

- [Grid System](https://github.com/goodpixels/less-grid-system) - Super-easy to use, markup-independent grid system.

- [Less Zen Grid](https://github.com/bassjobsen/LESS-Zen-Grid) - Implementation of [Zen Grids](https://github.com/JohnAlbin/zen-grids) in Less.

- [Order.Less](https://github.com/chromice/order.less) - Baseline alignment, column grids and modular scales.



**[Back to top](#contents)**



### Media Queries



- [CSS and Media Query Strategies](https://github.com/buymeasoda/less-media-queries) - Using Less CSS to develop a media query driven solution for modern and legacy browsers.

- [Media Queries Library](https://github.com/mrmlnc/less-mq) - Really simple media queries in Less.

- [Media Query to Type](https://github.com/himedlooff/media-query-to-type) - A method for creating an IE specific stylesheet that allows the content of media queries to become accessible to Internet Explorer 8 and below.



**[Back to top](#contents)**



### Color



- [Brand Colors](http://brand-colors.com/) - 1100+ collection of popular brand colors available in Sass, Less, Stylus and CSS.

- [More-Colors](http://jasonrobb.github.io/More-Colors.less/) - Variables for easier color manipulation while you design in the browser.

- [Open Color](https://github.com/yeun/open-color) - Open color is a color scheme for UI design. Available in CSS, SCSS, Less, Stylus, Adobe library, Photoshop/Illustrator swatches and Sketch palette.



**[Back to top](#contents)**



### Animation



- [Animate](https://github.com/joshuapekera/animate) - A library of CSS3 keyframe animations authored using Less.

- [Animate Less](https://github.com/machito/animate.less) - Port of Dan Eden's [Animate.css](https://daneden.github.io/animate.css/) to Less.

- [Cube Less](https://github.com/sparanoid/cube.less) - 3D (animated) cube using only CSS (Less), originally used by LeanCloud (aka. AVOS Cloud).

- [Hover](http://ianlunn.github.io/Hover/) - Collection of CSS3 powered hover animated effects to be applied to links, buttons, logos, SVG, featured images and so on.

- [Less Burguer](https://github.com/MarkRabey/less-burger) - Port of [Sass Burger](http://joren.co/sass-burger/) to Less.



**[Back to top](#contents)**



### Miscellaneous



- [3L](http://mateuszkocz.github.io/3l/) - Mixins library.

- [Bidi](https://github.com/danielkatz/less-bidi) - Set of mixins for creating bi-directional styling.

- [Clearless](http://clearleft.github.io/clearless/) - 	Collection of mixins.

- [Css3LessPlease](http://chrsr.com/css3lessplease/) - Conversion of css3please.com to Less mixins.

- [CssEffects](http://adodson.com/css-effects/) - 	Collection of CSS style effects.

- [Cssowl](http://cssowl.owl-stars.com/) - Mixin library.

- [Dynamic Stylesheet](https://github.com/mrkrupski/LESS-Dynamic-Stylesheet) - Set of useful mixins.

- [Est](https://github.com/ecomfe/est/) - 	Mixin library.

- [Hexagon](http://db0company.github.io/css-hexagon/) - Generate CSS hexagons with custom size and color.

- [Homeless](https://github.com/pixelass/homeless) - Helpful functions.

- [Less Elements](http://lesselements.com/) - Set of basic mixins.

- [Lesshat](https://github.com/madebysource/lesshat) - Smart mixins library.

- [Lessley](https://github.com/pixelass/lessley) - 	A jasmine like testing suite written in pure Less.

- [Lessmore](https://github.com/belyan/lessmore) - 	Mixins library. Cross-browser support for the CSS3 features and more.

- [Normalize](https://github.com/segundofdez/normalize.less) - 	Modularized famous [normalize.css](https://github.com/necolas/normalize.css/) using Less.

- [Oban](http://oban.io/) - 	Collection of mixins.

- [Preboot](https://github.com/mdo/preboot) - Collection of mixins and variables for writing better CSS.

- [Retina.js](https://github.com/imulus/retinajs) - JavaScript, SCSS, Sass, Less, and Stylus helpers for rendering high-resolution image variants.

- [Shape](https://github.com/fahad19/shape.less) - Collection of mixins for various shapes.

- [TRRtoolbelt](https://github.com/therebelrobot/tRRtoolbelt.less) - Mixins and functions for common actions.



**[Back to top](#contents)**



## Style Guides



- [Handshake Style Guide](https://github.com/handshake/less-style-guide) - This guide presents a collection of best-practices and coding conventions.

- [WebMD Health Services Style Guide](https://github.com/bitmap/less-styleguide) - This document outlines CSS/Less best practices at WebMD Health Services.



**[Back to top](#contents)**



## Ports of Less



### Java



- [JLessC](https://github.com/i-net-software/jlessc) - Less compiler written completely in Java.

- [Less Engine](https://github.com/Asual/lesscss-engine) - Runs Less in the Rhino JVM-based JavaScript interpreter.

- [Less CSS Compiler for Java](https://github.com/marceloverdijk/lesscss-java) - Runs Less in the Rhino JVM-based JavaScript interprete.

- [Less4j](https://github.com/SomMeri/less4j) - Native Java implementation.

- [Lesscss](https://github.com/houbie/lesscss) - Runs Less using Rhino, Nasshorn or node.js engine; 1.7.0 compliant.

- [Lesscss Gradle Plugin](https://github.com/houbie/lesscss-gradle-plugin) - Gradle plugin based on Less.



**[Back to top](#contents)**



### .Net



- [BundleTransformer.Less](http://www.nuget.org/packages/BundleTransformer.Less/) - Compiler written in .Net.

- [Less CSS for .Net](http://www.dotlesscss.org/) - Compiler written in .Net.



**[Back to top](#contents)**



### PHP



- [ILess](https://github.com/mishal/iless) - PHP port written in Javascript.

- [Lessphp](http://leafo.net/lessphp/) - Compiler written in PHP.

- [Less.php](http://lessphp.gpeasy.com/) - PHP port.



**[Back to top](#contents)**



### Python



- [Pyhton Compiler](https://github.com/lesscpy/lesscpy) - Compiler written in Python.



**[Back to top](#contents)**



### Ruby



- [Ruby Compiler](https://github.com/cowboyd/less.rb) - Less in Ruby's V8 Engine.



**[Back to top](#contents)**



### Go



- [Go Compiler](https://github.com/kib357/less-go) - Runs Less inside embedded Javascript engine.



**[Back to top](#contents)**



## GUIs, Editors and Plugins



- [Atom Linter](https://github.com/josa42/atom-linter-less) - Linter plugin in the Atom text editor.

- [CSS 2 Convert](http://css2less.co/) - Quick way to automatically convert CSS to Less, easy as copy and paste.

- [CSS Less(ish)](https://github.com/kizza/CSS-Less-ish) - Sublime Text 2 & 3 plugin that implements a stripped down version of the functionality in css preprocessors (such as Less).

- [Crunch 2!](http://getcrunch.co/) - 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.

- [Diamond](https://diamond.js.org) - Dependency management built for Sass, Less, and CSS.

- [Eclipse Less Plugin](http://www.normalesup.org/~simonet/soft/ow/eclipse-less.html) - This plugin extends the Eclipse IDE by providing handy features to edit and compile Less stylesheets.

- [Eclipse Transpiler Plugin](https://github.com/gossi/eclipse-transpiler-plugin) - Eclipse plugin to automatically transpile your files (Less, SASS, CoffeeScript, etc.).

- [Emacs](https://github.com/purcell/less-css-mode) - Emacs mode with support for compile-on-save.

- [Grunt Contrib](https://github.com/gruntjs/grunt-contrib-less) - Compile Less files to CSS using Grunt.

- [Grunt Lint](https://github.com/jgable/grunt-lesslint) - Lint your Less files using CSS Lint from Grunt.

- [Gulp Less](https://github.com/plus3network/gulp-less) - Plugin for Gulp.

- [Hayaky](https://github.com/hayaku/hayaku) - Hayaku is a bundle of useful scripts aiming for rapid front-end web development.

- [Hyra Helper](https://github.com/Hyra/less) - CakePHP plugin that converts your Less files to CSS using only PHP.

- [Koala](http://koala-app.com/) - Koala is a cross-platform GUI application for compiling Less, sass and coffeescript.

- [Less for Notepad++](https://github.com/azrafe7/LESS-for-Notepad-plusplus) - Syntax Highlighting for Notepad++.

- [Less Sublime](https://github.com/danro/Less-sublime) - Syntax highlighting for Sublime Text.

- [Lesshint](https://github.com/lesshint/lesshint) - Tool to aid you in writing clean and consistent Less.

- [LiveReload](http://livereload.com/) - CSS edits and image changes apply live. CoffeeScript, SASS, Less and others just work.

- [SimpleLess](https://wearekiss.com/simpless) - SimpleLess is a minimalistic Less compiler. Just drag, drop and compile.

- [Sublime Less2CSS](https://github.com/timdouglas/sublime-less2css) - Sublime Text 2 Plugin to compile Less files to css on save.

- [SublimeOnSaveBuild](https://github.com/alexnj/SublimeOnSaveBuild) - Trigger a build the moment you save a file in Sublime Text 2. Works best with web projects that make use of Less, Compass and any other pre-processor or a makefile.

- [Vim Less](https://github.com/groenewege/vim-less) - This vim bundle adds syntax highlighting, indenting and autocompletion.

- [Visual Studio Web Essentials](http://vswebessentials.com/) - If you ever write CSS, HTML, JavaScript, TypeScript, CoffeeScript or Less, then you will find many useful features that make your life as a developer easier.

- [Winless](http://lesscss.org/usage/#editors-and-plugins) - 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.



**[Back to top](#contents)**



## Online Less Compilers



- [BeautifyTools Less Compiler](http://beautifytools.com/less-compiler.php) - Online Less compiler with optional formatting and minification at [BeautifyTools](http://beautifytools.com/).

- [EstFiddle](http://ecomfe.github.io/est/fiddle/) - Online Less compiler providing live demo for Less and est. Allowing users to switch among all versions of Less after 1.4.0 with optional est/Autoprefixer functionalities.

- [ILess](http://demo-iless.rhcloud.com/) - Live demo of [ILess](https://github.com/mishal/iless) PHP compiler.

- [Leafo](http://leafo.net/lessphp/editor.html) - [Lessphp](http://leafo.net/lessphp/) live demo.

- [Less2CSS](http://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.

- [LessPHP](http://lessphp.gpeasy.com/demo) - [Less.php](http://lessphp.gpeasy.com/) live demo.

- [Lesstester](http://lesstester.com/) - Online compiler for Less CSS.

- [Precess](http://precess.co/) - A real time preprocesser compiler.

- [Winless](http://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.



**[Back to top](#contents)**



## Online Web IDEs/Playgrounds with Less support



- [CodePen](http://codepen.io/) - CodePen is a playground for the front end side of the web..

- [CSSDeck Labs](http://cssdeck.com/labs) - CSSDeck Labs is a place where you can quickly create some experiments (or testcases) that involves HTML, CSS, JS code.

- [Fiddle Salad](http://fiddlesalad.com/less/) - An online playground with an instantly ready coding environment.

- [JS Bin](http://jsbin.com/) - JS Bin is a webapp specifically designed to help JavaScript and CSS folk test snippets of code.

- [JsFiddle](http://jsfiddle.net/hb2rsm2x/) - Online Web Editor.



**[Back to top](#contents)**



## Translations



- [Chinese (中文)](http://lesscss.cn/)

- [Danish](http://lesscss.dk/)

- [German](http://www.lesscss.de)

- [Indonesian](http://bertzzie.com/post/7/dokumentasi-less-bahasa-indonesia)

- [Iranian](http://less-css.ir)

- [Japanese](http://less-ja.studiomohawk.com/)

- [Polish](http://ciembor.github.com/lesscss.org/)

- [Spanish](http://amatellanes.github.io/lesscss.org/)

- [Vietnamese](http://less.eten.vn/)



**[Back to top](#contents)**



## Articles



- [An Introduction To Less, And Comparison To Sass](https://www.smashingmagazine.com/2011/09/an-introduction-to-less-and-comparison-to-sass/)

- [Best Less Tutorials : A Comprehensive Guide to Less](http://www.cssauthor.com/less-tutorials/)

- [Doing MORE with Less](https://medium.com/social-tables-tech/doing-more-with-less-256054d19f7d#.a41deg3dx)

- [How to Make a Loops in Less CSS](https://medium.com/@omererkan/how-to-make-a-loops-in-less-css-d74062debef1#.snv6jqw5x)

- [Lets use Less to Create Less CSS not just CSS](https://medium.com/@zamamohammed/lets-use-lessjs-to-create-less-css-not-just-css-2d45d92a62e8#.jsocohrne)

- [Revisiting Less](https://medium.com/@ddprrt/revisiting-less-50b741bd884#.oyion811m)



**[Back to top](#contents)**



### Books



- [Instant Less CSS Preprocessor How-to](https://www.packtpub.com/web-development/instant-less-css-preprocessor-how-instant)

- [Less Web Development Essentials](http://pdf.th7.cn/down/files/1508/Less%20Web%20Development%20Essentials,%202nd%20Edition.pdf)

- [Learning Less](https://www.packtpub.com/web-development/learning-lessjs)



**[Back to top](#contents)**



## Videos



- [Learning Less](https://www.packtpub.com/web-development/learning-less-video)

- [Less (CSS pre-processor) Tutorials](https://www.youtube.com/watch?v=oh7_iZWvIyU&list=PLE42615v2IxlxVyGZd0rKnOzbqUtUiekE)

- [Less CSS Tutorials for Beginners](https://www.youtube.com/watch?v=YQYJUeokqOY&list=PL6gx4Cwl9DGCshbAx1JpBtNoKh8iKAAiy)

- [Less CSS - Tutorials for Beginners](https://www.youtube.com/watch?v=-D5mWO9_vLI&list=PLLa1ZAmCB2zjEZ4QNLDi4173_xIGeV6nC)



**[Back to top](#contents)**



## Experiments



- [3D Buttons](https://codepen.io/MamayAlexander/pen/aAsiq)

- [Border Radiuses Mixin](https://codepen.io/eky/pen/dCmnp)

- [CSS3 Color Wheel](https://codepen.io/bitmap/pen/eBbHt)

- [DEMO: Variables](https://codepen.io/ericrasch/pen/uGlvA)

- [Easy Buttons](https://codepen.io/octavioamu/pen/zJexw)

- [Linear Gradient Mixin](https://codepen.io/eky/pen/eAnCI)

- [Navbar](https://codepen.io/lukasdietrich/pen/mkeAJ)

- [Responsive Grid](https://codepen.io/mecarter/pen/idKqg)

- [Sizable CSS-only Icons](https://codepen.io/ericrasch/pen/rndaF)

- [Triangle / Arrow Mixin](https://codepen.io/eky/pen/AaCwF)

- [More...](https://codepen.io/tag/less/)



**[Back to top](#contents)**



## Community



- [Contributing to Less](https://github.com/less/less.js/blob/master/CONTRIBUTING.md)

- [Freenode](http://webchat.freenode.net/?randomnick=1&channels=%23%23lesscss)

- [Medium](https://medium.com/search?q=less%20css)

- [Quora](https://www.quora.com/topic/LESS-stylesheet-language)

- [Stack Overflow](http://stackoverflow.com/questions/tagged/less)

- [Twitter](https://twitter.com/hashtag/lesscss)



**[Back to top](#contents)**



## Contributing



Your contributions are always welcome! [Click Here to read the guidelines](https://github.com/LucasBassetti/awesome-less/blob/master/CONTRIBUTING.md).



**[Back to top](#contents)**



## License



[![CC0](http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)](https://creativecommons.org/publicdomain/zero/1.0/)



To the extent possible under law, [Lucas Bassetti](http://lucasbassetti.com.br) has waived all copyright and related or neighboring rights to this work.



**[Back to top](#contents)**