The new inputs are actually attached to the label tag, rather than to the input itself, using the :before pseudo-class. The :hover, :focus, :active, and the :disabled classes are all used, in order to achieve full control over all possible states. So far, it looks like it degrades nicely in older browsers, falling back to the default inputs. It doesn’t require any additional markup, and it even lets you navigate the forms with the keyboard.

The only thing I noticed is that it seems like the bottom third or so of the checkbox doesn’t actually respond to a click, and the click zone stretches above the input correspondingly.

Have a look at the demo.

Well done!

Javascript has restored its name the last few years, after having lost all credibility as a serious tool due to browser wars, the DHTML disaster, pop-up dialogues and open-CD-tray scripts. Jeremy Keith sees javascript as a necessary scripting language that completes the front-end development toolkit, together with CSS and (X)HTML. Unobtrusive javascripting, unobtrusive being the keyword, offers an equal level of power to what CSS once did, when used correctly.

As for the target audience, this book was exactly what I was after:

The book is aimed at designers rather than programmers. If you’ve learned the benefits of Web Standards through CSS and you’re now ready to move on to the next level, this is the book for you.

DOM Scripting clearly introduces all the concepts that would be unfamiliar to a a non-programmer, and provides a solid history of the developments the last 10-or-so years, before diving into any scripting. Chapter two is a thorough explanation of the javascript syntax, with some half-practical examples. Next is the Document Object Model, and that’s where I’m at.

View the LESS (could be tidier..)

Defining values for your grid

@grid-margin: 20px;
@grid-size: 60px + @grid-margin;
@grid-stops: 12;

Depending on the kind of layout you are producing, and the size of it, these values will vary a lot. This is for a 12 column grid, at a total of 940 pixels.

A 12 column grid, as you’d know, is desirable because it can be divided into two, three, four and six columns.

Defining the width of your #page using the values

#page { width: @grid-size * @grid-stops - @grid-margin; }

…will output a width of 940px, because ((60+20) * 12) – 20 = 940 px

This will multiply your desired grid size (including margins) by the amount of stops, and subtract the last margin (because you don’t want a right margin at the right hand edge of your page.) Starting to see where this is going?

Defining columns

Using the same constants, you can easily define different column sizes.

.column-half {
width: @grid-size * @grid-stops / 2 - @grid-margin;
margin-right: @grid-margin;
}

.column-thirds {
width: @grid-size * @grid-stops / 3 - @grid-margin;
margin-right: @grid-margin;
}

.column-fourths {
width: @grid-size * @grid-stops / 4 - @grid-margin;
margin-right: @grid-margin;
}

.last {
margin-right: 0;
}

The .last class is necessary to remove the right margin from the last column, like you would do with any column based layout.

Again, have a look at this quick demo, where the @grid-size is 60px, and this one, where I changed the @grid-size is 50px.

Push/pull

You might be familiar with the push/pull classes from Blueprint, which use fixed pixel width values. You can easily do the same thing with LESS, using your variables.

.pull-1 { margin-left: - @grid-size; }
.pull-2 { margin-left: - (@grid-size * 2); }
.pull-3 { margin-left: - (@grid-size * 3); }
..etc

You could even use the CSS3 attribute selectors to select all the pull classes and add floats, instead of the endless string of classes that we’ve been doing so far.

div[class^="pull"] { float: left; position:relative; }

Working with LESS.app

I’m working with LESS in Espresso, running the LESS app on auto-compile in the background. Surprisingly, LESS.app is ignored over at LESScss.org (is it mentioned at all?) It is a great little tool that will scan any folder for .less files, add them to a graphical interface, and auto-compile them whenever you make a change. LESS.app was created by Bryan D K Jones, and even if you prefer using the command line (“Command line junkies never get laid”), do check the website.

It is working perfectly, except for one thing: for some reason, Espresso doesn’t update the CSS when LESS compiles. Opening the file in CSSEdit or TextWrangler confirms that it is compiled, so it’s not an issue with LESS.app, but Espresso doesn’t seem to pick up on it. This isn’t really huge problem, but it does break the built-in preview in Espresso, and it makes it tedious to check what the CSS output looks like.

Either way, working LESS is a treat, the CSS output looks good, it is all valid, and the learning curve is slim to none if you’re already familiar with CSS.

Related posts:

1. Nettpilotene gets a makeover
2. LESS is more – CSS meta frameworks
3. THEME Wordpress Portfolio Project

Now, don’t confuse this, like I did, with CSS frameworks like Blueprint or 960gs. LESS focuses on the way you structure your CSS and offers additional functionality, whereas the traditional (uh..?) frameworks rely on standard CSS, and deal with form more than function. For the non-programmers, again, like me–LESS needs to be compiled into CSS. If you’re a front-end developer, you might never have compiled anything at all. I hadn’t. Consider it a framework in which you write some CSS looking code, with some neat features and additional possibilities, that you then use to generate the CSS in the end. I’ll get to the compilation part soon.

Features

In a nutshell, LESS gives you

• variables
• mixins
• nested rules
• simple math operations

This means that you can define, say, @color1 @color2 and @color3 as variables (though wouldn’t constants make more sense?), and refer to them throughout your stylesheet. Changing the variables will change all the instances of them. Mixins are similar, but can include whole classes.

Nested classes might make the biggest difference to the way your stylesheets look. It is the kind of feature that makes you go, WHY doesn’t CSS do this already? It saves you the brain-numbing process of repeating a parent element for every child style that you want to define, like so:

#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
  }
}

And, the operators include basic addition, subtraction, multiplication and division, as well as the opportunity to combine operators with the variables mentioned.

border: @standard-border * 2

Read more about the features at LessCss.org.

Installing LESS

So installing LESS on Mac OSX was slightly less straightforward than I had expected. It requires the LESS Ruby gem, whatever that means (hi, fellow front-end designer), and some simple Terminal action. The website says run $ sudo gem install less in Terminal, and you’re set. That returned this error:

Updating metadata for 1 gems from http://gems.rubyforge.org
ERROR:  could not find less locally or in a repository

A quick search sent me to Jonathan Hollin, who had experienced a similar problem, and discovered this solution, which worked like a breeze:

wget http://rubyforge.org/frs/download.php/45905/rubygems-1.3.1.tgz
tar xzf rubygems-1.3.1.tgz
cd rubygems-1.3.1
sudo ruby setup.rb
sudo gem update --system
sudo gem install less

Using LESS

After confirming that Less was installed, I grabbed a quick example from the website,

@brand_color: #4D926F;
#header {
  color: @brand_color;
}
h2 {
  color: @brand_color;
}

…and saved it as style.less, and ran the following in Terminal:

$lessc style.less style.css

..which, sure enough, output this in the destination file:

#header, h2 { color: #4d926f; }

So yeah, it’s all working, and I’m going to try it out in the next few days. You can tell LESS to watch your file and auto-compile whenever it sees any changes to it, by the way, so you won’t have to keep recompiling all the time. Read the documentation over at LessCss.org.

Thoughts so far

Now, this is about as far as I’ve come, and I still don’t know if LESS is going to have any impact on the way I write CSS. I definitively see the possibilities, but what I’m more interested in, is whether or not the guys working on CSS3 will pick up any of this for the final CSS3 specification. If all we get is rounded corners, drop shadows and @font-face, they’re ignoring some of the more important features that CSS is lacking, hence the birth of these meta frameworks.

In other words, I don’t think a CSS meta framework like this should be necessary, and I hope it won’t be, as soon as CSS3 comes around. Until then, though, this looks promising.

Other frameworks worth looking into, include SASS by Hampton Catlin and Nathan Weizenbaum, xCSS by Anton Pawlik and CSSscaffold by Anthony Short.

Related posts:

1. LESS: Generating grids and columns + LESS.app

Soooooomebody had a light bulb moment. Clever idea! Watch the video, it’s only 20-ish seconds.

Related posts:

1. Paper prototyping

This is the first of two interactive floor plans that I’m developing for a local building project. I’ll be using an image map and coordinates to define the clickable areas, and the Maphilight javascript by David Lynch to get some neat mouseover indicators. The light blue area around half of the building is meant to represent a glass façade, seen from above but on a slight angle. This is a vector file exported as a PNG with transparency, so it has a slightly different effect on a darker/textured background.

The website is still in the early stages of development, but we’re getting there.

Make sure you pay Lars a visit at www.minusminus.no

You are looking at the world’s biggest self portrait hoax! It was drawn with a GPS device (!) all faked, by college student Erik Nordenanker.

Well, at least it was a decent drawing.

See the video below:

Anyway, this is what has been keeping me busy:

Fugl Føniks

I recently finished developing this website for a local coffee shop—the local coffee shop. It is the very first website I’ve built with HTML5 (and it validates.) It is based on Wordpress, with Blueprint, and the nifty rolling archives feature from K2. The photo gallery is powered by Flickr, with some interesting CSS3 features to create random blanks in the gallery display:


#photos a[id$="3"] { /* uses the random numerical IDs from flickr */
display: block;
margin-left: 122px;
float: left;
}

Also, for anyone developing HTML5 sites, IE8 and below needs all HTML5 elements to be defined in order to display them correctly. This short Javascript is handy.

Visit Fugl Føniks

Multilingual sites in Wordpress

I’ve been working on a Wordpress install in three languages. There are a fair few plugins, including ZdMultiLang, WPML, qTranslate, xLanguage and others, but WPML looks like the most promising one.

Most of them don’t touch the database at all, which creates a bit of a mess: three languages in each database entry. WPML creates a separate page/post for each language, and lists them tidily in the Wordpress backend. So far, it has been the easiest to work with. On the other hand, I don’t know how it will manage when Wordpress needs to update the database..

Translating Wordpress

I’ve been working on translating Wordpress to Norwegian (nynorsk.) I still have several thousand lines to go, but I’m getting there.

Norwegian Wordpress project page

Obviously, in Norwegian.

Other than that…

I received a couple of copies of Shinya’s zine, Knife Wives, in the mail the other day. As expected, it looks sweet! Since I am broke and have no camera at the moment, I’ll have to resort to stealing his own photos. You should keep an eye on his blog with the same name, too!

And: Lars and I have been working on a short book, that will be finished one of these days. More updates when it arrives!

We have also been playing with the yahoo diablos that Courtney and Emma sent:

I caught that!

Related posts:

1. More EightySixKillers, More DESIGN AND DESIGN
2. Nettpilotene gets a makeover
3. Paper prototyping

Ok, so it wasn’t a table, it was the iPad, some kind of mutant iPhone with a built in iTunes store. By the looks of it, it is running the iPhone OS, or at least some kind of version of it. Interesting!

• 1.5 pounds/0.7 kg
• .5″ thin
• 9.7″  IPS display
• full multitouch
• 1GHz Apple A4 chip
• 16-64 GB Flash storage
• Accelerometer
• 10 hrs battery time (Apple hours?)
• One month standby
• iBooks
• Can run almost any iPhone app, either pixel by pixel in the middle of the screen, or pixel doubled in full screen
• Arsenic-free, BFR-free, Mercury-free, PVC-free
• The iWork suite, at $9.99 per app
• Connects to projectors
• Wifi, plus a separate 3G model, unlocked
• Syncs over USB, like the iPhone and iPods
• $29.99 for unlimited data for US users (AT&T)
• Worldwide in 60 days
• International 3G deal by June
• New GSM micro SIM
• Starting at $499
• Keyboard dock (w/ charger)

That’s it.

See the presentation in pictures and notes over at Engadget

Videos will probably be up later tonight or tomorrow.

(Again, photo courtesy of Engadget)

Related posts:

1. Spanking new Apple Table released today!
2. Large Havoc Creator