Least, a CSS to LESS tool

A few months back I dis­cov­ered the con­cept of CSS pre-processors. At that time I knew about LESS and Sass and had to decide which one was the best option for me. I thought the con­cept was really cool but lacked a real project to start get­ting my hands dirty with it.

Then I started work­ing on a free­lance project and Crunch came out; I was sold. This app made me choose LESS over Sass, which may not be the best of rea­sons, but it seems like I’m not the only one to pick this lan­guage. As you may know the sec­ond iter­a­tion of Twit­ter Boot­strap also relies on LESS, even encour­ag­ing you to use Crunch.

Sat­ur­day @ilovetypography tweeted this:

Dream­ing of some­thing that takes my CSS & LESSi­fies it — automagically.

To which I replied that:

This seems pos­si­ble! Will try and see if I can write such a tool, inter­est­ing idea…

Sun­day morn­ing I started writ­ing JavaScript, and a few hours later I had a good-looking script. Took some time to cre­ate a sim­ple yet effi­cient UI, and that was it. Least.

The tool takes basic CSS as an input and tries its best to out­put the LESS or Sass source it would cor­re­spond to (includ­ing nest­ing, classes and pseudo-classes). I also added an option to out­put some­thing for the not-so-popular-but-interesting Sty­lus language.

As you’ll notice in the footer of the tool’s page it’s a “five-hour project”. In order to have a decent UI as fast as pos­si­ble I used Twit­ter Boot­strap, which has its down­sides but fits per­fectly this kind of projects. A “five-hour project” also means it may still be a bit buggy. Don’t hes­i­tate to ping me on Twit­ter or to drop com­ments here.

ps: Least both ref­er­ences LESS and “To Say the Very Least”, a track by Buck 65 on Ver­tex. Ah!

Redesign

I’ve had this blog for 2 and a half years now, and it never really evolved visu­ally. So I decided to update it a bit, from scratch.

So that means a new theme?

Yay! Since the blog has been redesigned and you’re prob­a­bly read­ing this from your RSS reader you should defin­i­tively come by and see how it looks. And share some feed­back, if you feel like it.

Can’t remem­ber what it looked like before? I’ve archived screens over at Flickr.

A con­sis­tent look

Updat­ing the blog’s look is good, but a com­plete rewrite is bet­ter; for con­sis­tency, fool! I used to have a dif­fer­ent look for every sin­gle page: home, projects, blog and so on. No more.

Long story short:

Before: all dif­fer­ent. Now: all good.”

I’ve been into grids since the day I learned about Blue­pint CSS and Josef Müller-Brockmann, this is why I wrote Boks. And this is why this site now heav­ily relies on a grid struc­ture. For grid freaks out there, click here to tog­gle the columns and see what I mean. Of course if you’re on a small device (such as a phone) the UI is a bit dif­fer­ent, but we’ll get into that later.

Got a key­board? Like short­cuts? Press that key!

I imple­mented a few key­board short­cuts, from use­ful to use­less. For exam­ple, if you liked the grid tog­gle, just press G (for grid) or W (for InDe­sign users) and you’ll get the same effect. OK, that one is pretty useless.

But what about scrolling to the next arti­cle by press­ing N (or the Down key)? And you guessed it already, P (or Up) will jump to the pre­vi­ous (inspired by AisleOne). You can also time-travel by press­ing Shift+P (for Past) or Shift+F (Future). Handy? Yep.

Feel like you’re stuck in the blog? Just press 1 to go to the Home page, or 2 for Projects. 3 is for the Blog and 4 is the About page.

My screen is smaller than yours

I dis­cov­ered that tech­nique on Hicks­de­sign and imme­di­ately thought I had to imple­ment that: CSS Media Queries! The thing is pretty easy, you define your base CSS styles and then over­write some dec­la­ra­tions if the screen size matches some rules… I imple­mented 3 dif­fer­ent lay­outs so the site should look good on about any device. Just resize your browser win­dow and see things move. How cool is that?

My brother (and his iPhone 4) helped me test the retina-display-ready logo, too. Optional but cool.

More awe­some

  • I’ve always wanted to use Web­fonts but never really knew where. Here it is, you’ll find a nice OFL Sorts Mill Goudy TT on the home page. Thanks Google.
  • Another tiny thing is the “Sub­tle Prompt”. It hap­pens when you use a key­board short­cut or when you click the Con­tact link…
  • If you’re on a WebKit browser (Safari or Chrome) you should see cus­tom scroll­bars, styled with CSS. Yeah.
  • I kind of don’t sup­port Inter­net Explorer. Yes, this IS an awe­some feature!
  • Track­backs are now sep­a­rated from reg­u­lar comments.
  • A blog post’s author (my) com­ments appear dif­fer­ently, so you know who’s the boss out there.

Open­Source

I always try my best to share the use­ful and reusable bits. Here are some JavaScript (MooTools required) goodies:

  • LazyScroller: turns your key­board keys into a nav­i­ga­tion dashboard.
  • Sub­tlePrompt: nice and gen­tle prompt for your sen­si­tive users.
  • Lblr: form input in-context labeler.
  • ta-bg: allows a textarea’s back­ground image to scroll with its content.

I’ll try to post docs/demos soon, I know this is prob­a­bly a lit­tle bit rough right now…

What now?

Well, you tell me! I’m pretty happy with it, but things can evolve—just share feedback!