Compiling Twitter Bootstrap 2.0 with SimpLESS on Windows 7

Using LESS with Bootstrap

This afternoon, after a couple of hours of poking and prodding various pieces of software, I worked out how to compile Twitter Bootstrap 2.0 using SimpLESS. This is what I’ve discovered so far…

CSS frameworks

Having been an avid user of the Blueprint CSS framework for a number of years now (I created what has become quite a popular cheatsheet for the framework, which even got released with the Joomla! CMS a few versions back) I am aware of its limitations, particularly in the area of responsive web design.

So I’ve been keeping an eye on how various CSS frameworks have been developing, such as 320 and up, Less Framework 4 and Twitter Bootstrap.

Twitter Bootstrap reached version 2.0.0 in late January of this year; the current version is 2.0.3 (released 24 April 2012). I downloaded it last week and have spent a couple of days idly playing around with it. with a view to using it on a future web project.

One thing that I was uncertain about, however, was how to use the LESS files.

LESS

When it comes to CSS pre-processors, such as LESS and Sass, I’m a bit late to the party. What can I say, I’ve got twins and a 16 month old and I still don’t get enough sleep.

Sass claims that it “makes CSS fun again”; LESS that it “extends CSS with dynamic behavior such as variables, mixins, operations and functions.” Chris Coyier prefers SASS. Bootstrap from Twitter uses LESS so I guess, for now, I’m going with LESS.

I’ve dabbled with both LESS and Sass over the last year but not enough to get proficient in either, and certainly not enough to use either in a production environment. One put-off for me, certainly in the early days, was the lack of GUI to compile the files. Sass uses Ruby; LESS uses JavaScript (either client- or server-side).

These days, however, there are a number of standalone desktop applications that allow you to compile LESS code without needing to poke around with command-line commands. One of my favourites is SimpLESS from We Are Kiss.

SimpLESS

SimpLESS is available for Windows, Linux and Mac. It installs as a very simple application onto which you drag-and-drop your directory/folder containing the .less files, click a button and it convert your LESS files to CSS. It’s just a shame that you can’t batch process all the files, a feature that WinLess offers.

By default, if your directory structure includes a \less directory and a \css directory then SimpLESS will compile all your .less files into .css files within the \css directory. Sounds simple enough. No faffing, and you get a very usable CSS file at the end of it all.

Also by default SimpLESS will compress/minify your CSS files unless you include //simpless:!minify in the .less file. I include it at the top of the file.

Bootstrap from Twitter

Twitter Bootstrap 2.0 uses LESS. It has a directory full of LESS files that control every aspect of the framework: accordion, alerts, breadcrumbs, button-groups, buttons, carousel, forms, layouts, etc.

So, if you want 16 columns instead of 12 edit the @gridColumns, @gridColumnWidth and @gridGutterWidth variables within variables.less and recompile. That’s how customisable the framework is.

Except… when I did that I and I used SimpLESS to compile the LESS file I got an error:

Syntax error in progress-bars.less on line 33

Syntax error in progress-bars.less on line 33

Syntax error in progress-bars.less on line 33.

After a little digging around on the internet and I discovered a very helpful post on GitHub. This is what I did…

How to fix SimpLESS to compile Twitter BOOTSTRAP 2.0 on Windows 7

  1. Download and unzip Twitter Bootstrap v.2.0;
  2. Copy the \less directory to a new test directory and create a new \css directory as its sibling, so you will have:
    \test
    \test\less
    \test\css
  3. Download and install SimpLESS;
  4. Download the fixed version of less.js from We Are Kiss;
  5. Replace the existing less.js located at
    C:\Program Files\SimpLESS\Resources\js (32-bit Windows)
    C:\Program Files (x86)\SimpLESS\Resources\js. (64-bit Windows);
  6. Run SimpLESS;
  7. Drag your \test directory onto SimpLESS;
  8. Click the ‘reload’ icon against bootstrap.less to compile it;
  9. Success! You will now have compiled .css files in \test\css
Successfully compiled LESS file

Successfully compiled LESS file

A few things I noted:

  • If you run SimpLESS without the fixed less.js file then you will need to restart the application after you copy over the fixed less.js file in order for it to start using the new version.
  • less.js v.1.3.0 from the official LESS website does not work; only this fixed version from We Are Kiss works as expected.
  • The two main files to compile are bootstrap.less and responsive.less.

Time to get creating…

I got a mention in .net magazine (issue 228)

Tweet feed from dot net magazine

Tweet feed from .net magazine (issue 228 June 2012)

Shortly after last month’s issue of .net magazine dropped through the door—I’ve been subscribing to it for the last few years—I tweeted about a keyboard that I spotted in their regular “latest gear this month” feature:

It’s not often I see something in @netmag‘s gear reviews that makes me think “I really want that”. But today: @LogitechUK K750 solar kbd :) — Source

What a very pleasant surprise this morning to discover that I’d been quoted in .net magazine’s Tweet feed round-up on page 12 of the latest edition (issue 228, June 2012) which dropped through my letterbox this morning.

And it’s true. I’d just bought a new keyboard (the Logitech K360) and then I spotted the larger K750 solar keyboard and I have to confess that I coveted it. During Lent.

“It will be mine,” I thought. “Oh yes, it will be mine.”

And a month later it is, and I have a keyboard up for sale on eBay. But that, I suspect, will be the subject of another post, another evening.

What do you think of the new @TweetDeck? My initial impressions…

tweetdeck-new

A couple of days I excitedly downloaded and installed the latest version of TweetDeck, the social networking application that is now being developed by Twitter themselves.

What a disappointment! What have they done to it?!

Can’t distinguish columns

Now, don’t get me wrong. I’ve always had some fairly major niggles with TweetDeck’s usability, particularly if you’re using it to manage multiple accounts. There is no easy, quick, don’t-make-me-think way to distinguish which column is associated with which account.

The addition of a tabs option, or colour-coding columns would go a long way to making the system easier to use. In my humble opinion.

Customisable notifications

But what TweetDeck did excel at, that the likes of Sobees and MetroTwit didn’t was its handling of multiple accounts, and the flexibility in terms of column placement, notifications customisation (what shows, when and where).

That flexibility, particularly in the area of notifications, has now gone in the new instance of TweetDeck. I’m sorry to see it go—it was very useful.

Posting an update

The new TweetDeck also seems to assume that you’ll always be using it in a full-screen (maximized) view. Old TweetDeck worked well in maximized view too, but at least you could still post an update when viewing only one column.

In the old TweetDeck the post-an-update window sits at the top of the column. In the new TweetDeck, however, the post an update window disappears off the edge of the viewport:

tweetdeck-old-postupdatetweetdeck-new-postupdate

The send update keyboard shortcut has also changed, from Enter to Ctrl+Enter (on Windows), which takes a bit getting used to.

Social network(s)

When it launched TweetDeck supported only Twitter, but it soon added Facebook, MySpace, LinkedIn, Google Buzz and Foursquare. I used to use just Twitter, Facebook and LinkedIn within TweetDeck.

When I logged into the new TweetDeck I saw only Twitter and Facebook. That said, within the options I can’t actually see how you would add a Facebook account—but maybe it only allows one, which kind of makes sense, and so these settings have been hidden.

I can understand why Twitter might want to limit the number of rival networks it allows you to access using their application. But similarly, I do wonder if this will drive users away to find other clients that do support the wider range of services that they use.

Private messages

One really neat feature that I loved, and didn’t really think about until it was taken away, about the direct (private) messages (DM) column in old TweetDeck was that you could also see the DMs that you sent other people.

Conclusion

In conclusion I have to say that I’m really disappointed with the new TweetDeck. In many ways it has become less useable and less useful. I suspect that over the next few weeks I’ll evaluate the other social media clients and move to one of those.

In the meantime I still have TweetDeck 0.38.2 installed, so I’ll continue to use it.

  • Old TweetDeck — 7/10
  • New TweetDeck — 3/10

Update

There’s an interesting review by David Bayon on the PC Pro blogs entitled New TweetDeck: more mainstream, less flexible which has one paragraph of the positives of the new version and nine paragraphs of the negatives.

His conclusion:

…for me the new client takes away much of what made TweetDeck so useful – namely the flexibility and control – and replaces it with much of what makes the Twitter web client so annoying. I don’t like the Twitter web interface, that’s why I use TweetDeck. Or at least it was until now. The former buying the latter means that distinction is only going to get narrower from here on in.

Giving up Twitter and Facebook for Lent

20110308-beginningoflent

For the last few weeks as we have been approaching Lent (which begins tomorrow, Ash Wednesday) I’ve been considering what to take up this year as my Lenten discipline.

Those forty days before Easter are traditionally a time of preparation for Christians to observe and celebrate the death and resurrection of the crucified Christ, Jesus of Nazareth. It is a time for prayer, penitence, almsgiving and self-denial.

Most years I give up chocolate; I want to do that again this year. Some years I choose to take up something rather than give something up, such as more reading or exercise.

Giving up social media

These last few weeks I’ve been considering giving up social media for Lent: namely Twitter and Facebook, and instead blogging more and getting in touch in person with friends more. (I mentioned this at the other place last week.)

I’m still in two minds about it, the evening before Ash Wednesday, but I have already uninstalled the Facebook and moTweets apps from my phone and started to remove Twitter clients from my PC.

I’ve decided that whatever I decide I will continue to send tweets from my work account during office hours, where appropriate, because that is a part of my job but I won’t keep my Twitter client open unless I’m making and update or checking for @mentions.

The reasons against giving it up

I guess the most compelling reason for me not to give up social media during Lent is to share with the world what I am doing: how my Lenten disciplines are affecting me, something about Christian witness.

…but then again, that’s all about me and not entirely in the spirit of self-denial.

The reasons for giving it up

When I first joined Facebook a few people greeted me with something along the lines of “welcome to the greatest time-waster in the world!” How many hours have I wasted browsing through page upon page of status updates and notifications that Bob has been gifted a new sheep from Colin?

These last few months I’ve found myself struggling with Twitter and Facebook for all sorts of reasons.

Twitter

With Twitter the main problem is that the message stream updates so quickly, especially when using a client such as TweetDeck that updates in real time. There is then a certain anxiety about missing ‘something important’: that life-changing URL announcing an exciting new Web service, that critical status update from a friend (or ‘friend’), the latest news headline from the BBC. Which is, of course, nonsense!

The other thing is that 140 characters really isn’t long enough to express yourself adequately. Twitter is often referred to as a ‘micro-blogging’ service, but it has made me lazy. It’s the fast-food of blogging: quick and instantly gratifying. But it doesn’t last: have you tried searching for posts you made 4 months ago?

Facebook

With Facebook the problem is voyeurism: it’s easy to watch people, their status updates and photo uploads and think that you are somehow involved in their lives. I’ve felt frustrated these last few months that I’ve not been able to interact with friends more in real life and I suppose I’ve used Facebook, and to a lesser extent Twitter, as a substitute.

Which is not to say that either Twitter or Facebook are bad in themselves, I guess they have simply helped foster the laziness that is already in me to withdraw into myself and not engage with others more.

I heard someone joking recently that Facebook is for connecting with people you have met in real life but to whom you don’t speak now, while Twitter is for connecting with people you’ve never met but to whom you chat all the time.

What others are saying

There’s an interesting article on Silicon Republic today about giving up Facebook for Lent:

Dan Hues, associate pastor at Redeemer Lutheran Church in Fresno, California, told The Fresno Bee that the point of Lent is a time in which to grow closer to God.

“The point is to leave selfish behaviour behind you, to put off the ‘self.’ Facebook is almost a shrine to yourself, with pictures, status updates, seeing if people ‘like’ you. It’s all about you,” Hues said.

I have to admit that I don’t see my Facebook account like that at all. I see it more as offering to other people, whether it’s sharing photos of my family with friends, or silly comments in the hope that it may make them smile.

JD Walt on his blog wrote an article last Thursday entitled “Why giving up social media for Lent misses the point…part 2” in which he argues:

“After fasting forty days and forty nights, [Jesus] was hungry.” Matthew 4:2

“He was hungry.” Something about giving up Facebook for Lent doesn’t exactly make me hungry. In my understanding, fasting in the biblical tradition involves two seemingly polarized realities: fasting and feasting. At the heart of both is food, not Facebook.

[…] With respect to social media, (which admittedly can create a lot of distraction) I think the better approach is to ask how social media can cultivate attentiveness to God and others.

But surely Lent is about more than fasting, it’s also about self-denial and discipline. It’s about consciously making more space for your relationship with God and if something is acting as a distraction, as I have certainly allowed Twitter and Facebook to become at times, then surely the most responsible action is to step away from it for a while.

See you after the resurrection

Now this could all go fabulously well and on Sunday 24 April I’ll be in some kind of cleansed, Zen-like state of tranquility. Or I’ll be addicted to Bebo, LinkedIn and My Space!

I’ll see you at @gareth after the resurrection.

Considering giving up social media for Lent

A friend of mine—who on Twitter goes by the name of @gedrobinson and in real life goes by the name of Ged Robinson— tweeted this earlier today:

One week left on Twitter, deciding giving Twitter, Facebook and alcohol up for Lent. (St Pats excepted of course)

One week left on Twitter, deciding giving Twitter, Facebook and alcohol up for Lent. (St Pats excepted of course)

and he got me thinking: what a great idea!

I’m going to give it some thought over the next few days and try to write more about it at the other place.

I certainly would like to spend more time blogging: writing longer, more considered posts rather than the fast-food, 140 character offerings that I spit out daily on Twitter and occasionally Facebook. (Hence the three posts in rapid succession this evening.)

Lots of good stuff to consider.