Less CSS Preprocessor Toolbox

It is common knowledge that CSS has a very powerful syntax. However, if you are working on a smaller project or something that does not utilize every other feature of CSS, this very powerful syntax can become an extra baggage to deal with. To cope with such scenarios, we can make use of CSS preprocessors such as Less.

Built by Alexis Sellier, Less is a CSS preprocessor, which means it includes functionality that extends the functionality of CSS. Thus, if you need a preprocessor that makes CSS more extendable and customizable, and at the same time retains its light-weight fabric, Less is the way to go!

Advantages of Less

This is what Less brings to the table:

  • Nested syntax
  • Ability to define variables
  • Ability to define mixins
  • File joining
  • Mathematical functions
  • Operational functions

So, now that we have discussed the benefits of using Less, how do we get started with it? This post talks about everything you will need to get started with Less within minutes. Without wasting anymore time, let us check out the resources!

less.js CSS preprocessor logo hero

Getting Started with Less

First up, tools and resources to help us get started with Less.

Less Editors

Eager to start coding in Less but unsure which editor to use? Check these out!

WinLess for Windows →

If you are an MS Windows user, WinLess is your best bet when it comes to Windows GUI for Less.js.

WinLess is your best bet when it comes to Windows GUI for CSS preprocessor Less.js

LESS.app for Mac →

Less.app is a Less editor meant for Mac users.

Less.app is a CSS preprocessor Less editor meant for Mac users

SimpLESS Adobe Air App →

SimpLESS is a Less compiler with a minimal and no-nonsense approach. It is available for multiple platforms, including Windows and Mac.

SimpLESS is a Less compiler with a minimal and no-nonsense approach

Crunch! Adobe Air App →

Crunch! lets you write your Less markup and crunch it into a CSS file, and thereafter link the crunched CSS file in your HTML. It requires Adobe AIR to work.

Crunch! lets you write your Less markup and crunch it into a CSS file

Koala for Windows →

Koala is a GUI application that lets you compile markup in SASS, Compass, CoffeeScript and of course, Less. It is cross-platform and supports Linux, Windows and Mac.

Koala is a GUI application that lets you compile markup in SASS, Compass, CoffeeScript and of course, Less

Less Tools & Apps

Now that you have understood the basics of Less and already grabbed your favorite editor/compiler, it’s time to check out some additional tools and apps to help you do more with Less.js

Fishsticss →

Fishsticss lets you easily convert your existing markup to Less. You can choose whether or not to preserve comments in the markup.

Css2Less →

CSS2Less is yet another online tool that lets you convert your existing CSS markup to Less within minutes.

LESS CSS is More (LESS Playground) →

LESS CSS is More (LESS Playground) does the opposite of Css2Less — it converts existing Less markup to usual CSS.

WP-LESS WordPress Plugin →

WP-LESS is a plugin that lets you implement Less in your WordPress themes. You can simply focus on the code, and the plugin will handle mundane tasks such as cache management and user delivery all by itself. You can also bundle the plugin with your theme without worrying about conflicts.

Essential Less Mixins

Here are some of the most popular and essential Less Mixins that you should take a look at!

LESS Hat Mixin Library →

LESS Hat is a Less mixin library that offers a wide range of features, such as SVG gradients for IE9, keyframes and unlimited gradients and transitions.

LESS Hat is a Less mixin library that offers a wide range of features

Preboot →

Preboot is a collection of Less utilities, including mixins such as transitions and gradients.

LESS Elements →

LESS Elements is a collection of basic Less mixins that focus on cross-browser compatibility.

Less CSS Toolkit →

Less CSS Toolkit is a collection of reusable Less mixins for animations, transitions, gradients and other effects.

Clearless →

Clearless is a simple library of reusable and flexible Less mixins.

LESS DSS →

LESS DSS offers a collection of mixins such as backgrounds, borders, 2D/3D transforms, transitions, etc.

LESS DSS offers a collection of mixins such as backgrounds

CSS3 Mixins →

CSS3 Mixins is a collection of mixins for STYL, SASS and Less.

Shape.LESS →

Shape.LESS offers Less mixins for various geometric shapes.

Sublime Text Less Extensions

Following are some of the most popular Sublime Text Extensions for Less users.

  • LESS Syntax Highlighting →
    LESS Syntax Highlighting provides syntax highlighting (well, doh!) for Less files, alongside snippets and completions.
  • CSS Less(ish) →
    CSS Less(ish) lets you use variables and nesting in your CSS files.
  • LESS-Build →
    LESS-Build provides two build systems for Less files — minified and non-minified.
  • Less2Css →
    Less2Css is a Sublime Text 2 plugin that automatically compiles Less files to CSS, as soon as you hit save.

Less-Powered Web Frameworks

This section enlists some of the popular web frameworks powered by Less.

Emerald →

Emerald is a responsive grid system that is built with Less and features a fixed width grid.

Emerald is a responsive grid system that is built with Less

Frameless →

Frameless allows you to build column-adoptable fixed width grids and is especially useful for those who prefer responsive design but do not wish to work with fluid width layouts.

Satus Framework →

Satus Framework is a minimal and mobile-first responsive framework based on HTML5 Boilerplate and Less. It includes Less mixins for semantic grid support.

Grdlss →

Grdlss is a Less framework that lets you build your own grids within minutes.

Responsable →

Responsable is a clean, minimal and responsive framework with nested columns, baseline grid support and in-built typographic styles.

Schema →

Schema is a light and responsive UI framework meant for frontend developers.

Fraction.less →

Fraction.less is a web development boilerplate with custom workflows. It is well integrated with Less.js but you can also choose to use plain CSS if you so desire.Fraction.less is a web development boilerplate with custom workflows

The Semantic Grid System →

The Semantic Grid System lets you work with page layouts. You can specify column and gutter widths and several other relevant details. It runs on Less, SASS and Stylus.

typebase.css →

typebase.css is a minimal and customizable typography stylesheet. It supports both Less and SASS.typebase.css is a minimal and customizable typography stylesheet

Less+ Framework →

Less+ Framework lets you build websites that adapt their content depending on the screen resolution.

Bootstrap →

Bootstrap is an extremely popular Less-powered front-end framework meant for developing responsive and mobile-first projects.Bootstrap is an extremely popular front-end framework

FoundationLess →

FoundationLess extends the ZURB Foundation framework using Less, to include additional features such as a global color palette, etc.FoundationLess extends the ZURB Foundation framework using Less

960-LESS →

960-Less combines the 960 Grid System with Less.js in order to make use of Less features such as mixins and variables.

FatUI →

FatUI is a UI framework based in Less that provides pretty forms, buttons and other input fields.

Less Grid →

Less Grid is a light-weight framework that offers a cross-browser platform for building responsive websites.

Less-Powered WordPress Frameworks

Lastly, we have some of the most popular Less.js powered WordPress frameworks for you.

Bones →

Bones is an HTML5, Less.js (or Sass) powered mobile-first starter theme for rapid WP development.Bones is an HTML5, Less.js or Sass powered mobile-first starter theme

JBST →

JBST is a theme framework for creating child themes for WordPress. It is built on the top of Bootstrap 3 and is full customizable with LESS.

Less WordPress →

Not a framework as such, the Less is a super minimal Less.js powered WordPress theme (both frontend and backend). It only uses the minimum requirements that WordPress needs, a stylesheet, screenshot and the index page. A great starting point for development.

That brings us to the end of this collection of helpful Less resources. Share your views in the comments below!

Author: (500 Posts)

This post has been written by the team here at Speckyboy Design Magazine.

Comments