It’s a pretty nifty system, and definitely worth a look if you’re looking at working with WordPress. 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. 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.
Developed by Mark Otto and Jacob from Twitter, Bootstrap is a set of HTML, CSS and JavaScript components for baseline user interface components and interactions, including a responsive design, UX items such as buttons, forms, and more.īootstrap 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. Bootstrap, from Twitterīootstrap, from Twitter is one of the most popular open source projects on the web right now.
I’ll run through a series of projects that I utilize on a daily basis that uses LESS. It’s the best way to dig into the techniques and tricks that experienced and expert web developers use on their projects. 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. Granted, I don’t know much about those other file types (other than JavaScript), but … CodeKit can compile them! Additionally, CodeKit has a pretty awesome feature where when you save your code, your browser will automatically refresh to reflect the changes, and it does it with some cool CSS3 animations. It also compiles Sass, Stylus, Haml, Coffeescript, JavaScript and Compass files. CodeKit compiles LESS perfectly, but does a lot more. CodeKitĬodeKit is the next generation of the LESS.app and has a $20 price tag attached to it (to help the creator pay off his student loans, so in reality, it aint that bad). Additionally, you can minify your CSS from this application, saving your precious file size (but don’t even think about editing your CSS file). 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). LESS.app is a free application that will detect all of the LESS files in your web folder, and compile them to CSS. Two of the top programs to do this is LESS.app and CodeKit, both from Incident57. 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.
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. We’ll finish our Learning LESS series today as we talk about putting your LESS into action on your web projects.