Porting Monokai colour scheme to WeBuilder 2014

WeBuilder 2014 beta 7 with the new Monokai theme
WeBuilder 2014 beta 7 with the new Monokai theme

I have been using Blumentals WeBuilder now since March 2006—nearly seven years. It’s a solid web code editor and IDE (integrated development environment) but over the last couple of years it has been creaking at the seams a little. Some features were quite slow, others weren’t keeping up with the astonishing rate of change that the web standards have been going through of late.

So, over the last year or so the Blumentals team have been rebuilding the application from scratch, moving to a more up-to-date code base (they code it in Delphi, I believe) making it much faster and preparing the way for future enhancements and improvements. And boy! does it show. The new version is looking great. But I’ll get to that in a minute.

While they were working on what will soon be released as WeBuilder 2014 I found myself—as I do every six months or so—looking around at competing web IDEs to see what they were up to. I tried the usual candidates: Aptana, CodeLobster, Notepad++, NetBeans, Komodo Edit, etc. but nothing grabbed me until I stumbled on Sublime Text 2.

Wow! Sublime Text 2 is fast. Lightning fast. And it’s packed with features, and what it does’t have there is usually an add-on for it — which is most easily installed via the Sublime Package Control. But I digress.

I found myself using Sublime Text 2 more and more, and one of the things that I loved most about it was one of the in-built colour schemes: Monokai (based on a TextMate theme by Wimer Hazenberg). I had never used a dark theme before on an editor, but this one I really liked, and it was much easier on my eyes than the glaring white themes I’ve been using in the past.

Porting Monokai to WeBuilder

When WeBuilder 2014 was released in beta, owner and developer Karlis Blumentals invited users to create and submit colour schemes for WeBuilder (a new feature in 2014). So I set about porting the Monokai theme to WeBuilder.

Every code editor highlights its code syntax slightly differently. The code highlighting in Sublime Text is pretty simple, defining the same colours for a number of elements regardless of the language. So, for example, all strings are #e6db74 (yellow), all keywords are #f92672 (dark pink), etc.

WeBuilder’s colour schemes are more granular: if you want HTML elements within a PHP document to look different to HTML elements within an HTML or ASP document then you can in WeBuilder.

Also, the way that code elements are broken up into different syntax colours is slightly different between editors. It’s more-or-less impossible to port one theme to another editor exactly colour-for-colour, element-for-element. I decided, then, to try to keep within the spirit of the theme.

I relalised fairly quickly, therefore, that I needed to keep things as consistent as I could across all languages. So all strings would be yellow (#e6db74), all numbers (integer or floating) purple (#ae81ff), all HTML tags or language reserved words would be dark pink (#f92672), etc.

I created a spreadsheet to plan things out and document what I was doing.

Spreadsheet of many colours
Spreadsheet of many colours

That really helped. Especially when I did something wrong and reset my entire colour scheme to system defaults. Having documented it as I went along it only took me about 45 minutes to retype it. (A back-up would have been useful, huh!)

I’m really pleased with how they turned out, to be honest. And it would appear that Blumentals Software are too.

Available now

I passed the file to Blumentals last week and it’s already been incorporated into beta 7, which is currently available for download. (The beta versions are free while errors are being addressed, the final version will be available to purchase.)

To say thank you for what I did I received this kind email from @blumentals the other day:

@garethjms - you have earned a free upgrade to v2014 by porting Monokai scheme for our editor
@garethjms – you have earned a free upgrade to v2014 by porting Monokai scheme for our editor

How wonderfully generous of them. I was so delighted by their generosity. I simply did it because I really like the colour scheme, and I wanted in a small way to say thank you to Blumentals for all that they’ve given to the web building community over the last 6+ years.

More themes…

I’m starting work on porting another couple of themes now: Twilight (also used in Sublime Text 2) and Tomorrow, which is a lovely collection of dark and light themes.

Extending colborder in Blueprint CSS

Blueprint

For the last few months, when time has allowed, I’ve been working on a new CSS framework combining my favourite elements from Blueprint CSS framework and 960 Grid System but this week I ran into a problem.

I’m developing the adapted framework to use when I redesign my website later this year. When it’s completed I will also make it publicly available on my website to whoever wants to use it and adapt it.

This is what I want

On Friday night, while testing it, I spotted something about the original Blueprint framework that I hadn’t noticed before.

It was to do with the colborder rule. What if I want to do this:

12 columns of text

That is create two blocks of text, the first spanning six columns with two blank columns appended on the end, then a colborder (which as the name suggests is a border that span an entire column) and finally the second block of text which spans three columns.

Just to be clear, in this example I’m using an adapted Blueprint grid. The default grid uses 24 columns, but in this example I’m using 12 columns as fewer and wider columns make it easier to demonstrate what I’m talking about.

The code, I initially thought, would look like this:

span-6 append-2 colborder

Lorem ipsum dolor sit amet, …

span-3 last

Lorem ipsum dolor sit amet, …

My blank columns have disappeared

But testing this out, what this code actually gives you is this:

Six columns, a line, three columns

Hang on! Where are my two appended columns in the first block, the ones that should appear after the span-6 and before the colborder?

append-x and colborder don’t mix

To answer that I had to take a look at the Blueprint source code. As these three classes are to do with the layout grid these CSS rules span-6, append-2 and colborder are all defined in (my adapted) blueprint\src\grid.css:

.span-6 {
  width: 460px;
}
.append-2 {
  padding-right: 160px;
}
.colborder {
  padding-right: 49px;
  margin-right: 50px;
  border-right: 1px solid #eee;
}

So, in order:

  1. span-6 class is setting the width of the content to 460px.
  2. append-2 class is setting a padding-right of 160px.
  3. colborder is then overwriting padding-right with a width of 49px thereby making our appended two columns effectively disappear.

A new rule is required

I really wanted a solution that didn’t require any extra mark-up. Because I realised that this could be achieved with this code:

span-6 append-2

Lorem ipsum dolor sit amet, …

span-3 last

Lorem ipsum dolor sit amet, …

but that has an extra level of div tags.

After a little pondering, and a little scribbling on a scrap of paper, I realised that the solution lay in writing a new CSS rule that would prepend a colborder before the second block rather than append one after the first block.

In keeping with the append/prepend terminology of Blueprint I decided to call the new rule precolborder. The 12-columns version looks like this:

.precolborder {
  padding-left: 49px;
  margin-left: 29px;
  border-left: 1px solid #eee;
}

The 24-columns version (compatible with the default Blueprint CSS framework) looks like this:

/* Border with more whitespace on left hand side
    of a column, spans one column. */
.precolborder {
  padding-left: 24px;
  margin-left: 15px;
  border-left: 1px solid #eee;
}

and so our HTML now looks like this:

span-6 colborder

Lorem ipsum dolor sit amet, …

precolborder span-3 last

Lorem ipsum dolor sit amet, …

which looks like this on the rendered page:

Text spanning six columns, two blank columns, a border and then text spanning three columns

Which, if I’m not mistaken, is just what I wanted.

Feel free to use it if you like.

That’ll learn me!

Today I thought I’d be useful and comment my CSS code, before I forgot what it all did. I have 16 files.

Well, clearly I’d already forgotten what some of the code did, and why it was written in that particular order, because when I went to commit the code this evening … it was broken.

Hoorah for (in no particular order):

  • Remembering to take a local backup of a working copy on my USB flash drive
  • ExamDiff Pro to compare the two
  • Firebug add-on for Firefox
  • Two monitors
  • Multiple browsers installed
  • Working into the evening at home
  • Listening to Queen on MP3
  • And not to forget a healthy dollop of patience …

I really should comment my code more thoroughly as I write and test it.

As my dad used to say: “That’ll learn me!”