Learning LESS: Put It Into Action
We’ll finish our Learning LESS series today as we talk about putting your LESS into action on your web projects. Today’s post will be slightly different than previous posts, as we won’t really showcase new techniques and code examples as much as we’ll talk about how to use LESS, projects you can work on to jump start your LESS development and more.
Blog Series Roadmap
- An Introduction
- Using Variables
- Using Mixins
- Using Nested Rules
- Using Functions
- Divide and Conquer
- Put It Into Action
Coding With LESS
If you read our introduction to the Learning LESS series, you saw that I recommend compiling all of your LESS locally, and simply linking to one CSS stylesheet. Two of the top programs to do this is LESS.app and CodeKit, both from Incident57.
LESS.app is a free application that will detect all of the LESS files in your web folder, and compile them to CSS. You can set specific output folders and select which LESS files you actually want to compile (this comes in handy if you’ve divided up your LESS into smaller modular files and import them all into one stylesheet). Additionally, you can minify your CSS from this application, saving your precious file size (but don’t even think about editing your CSS file).
If you want to get a jump start on using LESS in your projects, I’d recommend grabbing an open source project that already utilizes LESS. It’s the best way to dig into the techniques and tricks that experienced and expert web developers use on their projects. I’ll run through a series of projects that I utilize on a daily basis that uses LESS.
Bootstrap, from Twitter
Bootstrap uses LESS as the basis for all of their styles, and really divides up their code into small, modular files, which becomes extremely maintainable and easy to understand.
Responsive Bones Theme for WordPress
If you’re into designing and developing for WordPress, might I suggest starting with Bones? There are a lot of WordPress starter themes out there, but in my opinion, not much do it better than Eddie Machado’s Bones.
The responsive version of Bones uses LESS to structure a responsively designed WordPress site, using CSS3 media queries to determine which LESS file is loaded into the compiler. It’s a pretty nifty system, and definitely worth a look if you’re looking at working with WordPress.
320 and Up Project
320 and Up is the ‘tiny screen first’ responsive boilerplate. This project is a perfect starting point for those looking to create a responsive website, but not building it straight into a CMS. If you’re just looking for a website, or will be looking to import it into another CMS like ExpressionEngine, 320 and Up is the place to be.
The project uses LESS to create a responsive framework for you to style up, starting with the smaller screens and working up, as opposed to designing for a desktop and scaling down. It’s an interesting concept, and definitely one to check out!
That wraps up our Learning LESS series here on DeveloperDrive. Thanks so much for reading, commenting and discussing. Do you have any other projects you know that use LESS that you use? Leave them in the comments below.