I will assume that you already have Sublime Package Control installed, since it is pretty much a given for Sublime Text users.

Step 1: Adding Syntax Highlighting

I can’t imagine why anybody wouldn’t want their LESS files to have the proper syntax highlighting, so you probably want to install the LESS-sublime package, which you can find in Sublime Package Control under “LESS.”

Step 2: Installing LESSC

Now you need to install the LESS compiler, but first you need to grab a couple of dependencies.

First, download and install Node.js. NPM (Node Package Manager) should also be installed automatically, so now you should be ready to install LESSC. Simply run the following command:

npm install -g less

Step 3: Installing a LESS Build System

In order to have your LESS files compiled into CSS, you will want to install the LESS-build package. Once it’s properly set up, it adds a Build System for LESS, enabling you to process the files by pressing Control+B (Command+B for Mac users).

After you have installed the package, you need to do a little configuration.

1. Open the package directory by typing “browse packages” into the command palette and selecting the LESS-build folder.
2. Run changeLESSBuildType.bat (Windows) or changeLESSBuildType.sh (Mac/Linux) to set the build mode. Pick option number two (“directory rewrite”) when prompted.
3. In your project, select “LESS” from the Tools > Build System menu.

Step 4: Using Your New Setup

To demonstrate how the finished setup works, I put together a quick project in Sublime Text. My simple index.html references css/mysite.css as its stylesheet. This is the compiled output of many LESS files, which are found in the less directory.

The less/mysite.less file, which is compiled into css/mysite.css when I switch to it and press Command+B, looks like this:

//Load Twitter Bootstrap

@import "bootstrap/bootstrap.less";

//Additional styles would go here

It loads the LESS files that make up Twitter Bootstrap, which are easily tweak-able, since all of the styles are split into different files by sensible categories. Then any styles placed after the import line would override Bootstrap’s if they conflicted, given CSS’s precedence rules.

So for the tenth anniversary, the Zen Garden is open for business once more. I’ve thrown the codebase on Github, given the dusty copy a refresh, started the conversion of the site to HTML5, and brought all of the existing designs kicking and screaming into the modern age. The work isn’t done yet, but it’s a darn sight closer to how we would build it these days. If you see an area that needs help, consider sending a patch. (Here’s the current list of issues to resolve, for example.)

10 Years [Mezzoblue]

It features a chapter on logically marking up page structure with the new semantic tags (header, nav, section, article, etc.), which explains the contexts they should be used in with a hands-on example of restructuring a blog without excessive divs. A lot of online tutorials make the error of suggesting the aside element for a blog sidebar, which the book helpfully points out as wrong. The section element is the proper tag for the job, as it denotes an arbitrary section of the page, whereas aside is for broken-out sections of your article content, such as pullquotes or diagrams.

From there the author moves on to some CSS3 tricks using newly-added selectors. He shows some simple methods to add zebra-striping to tables with pseudo-classes and add visible URLs to links via a print stylesheet with :after. There’s a brief section demonstrating media queries, as well some on the new JavaScript APIs—localStorage and history pushState, for example. There’s even a bit on using cache manifests to set up offline access.

Oh, and the deprecations. HTML5 deprecates a good many tags and attributes. There is a section listing those, as well as some modern alternatives, such as opening links in new windows without the deprecated target attribute. It can be done cleanly and semantically by using JavaScript, without impacting the user’s ability to middle-click a link and open a new tab…which far too many sites still do today. If you do that, you need to read this book just for that reason.

The sprite image is a long strip containing each frame of the animation. The stylesheet sets it as the background of a DIV, and the dimensions are set so you can only see one frame at a time. Then a script uses a timer loop to continuously shift down the line, resetting once it reaches the end. (A more complex version of this effect can be seen in this Google Doodle.)

It works just like the sprites traditionally used in video games. It’s more efficient to load one image from a slow data source, whether it’s a hard disk or an internet connection, and only show a piece of it at a time, than to load dozens of images and alternate between them. (It saves some overhead in other ways in a performance-minded environment like a game, as well.)

Why not just use an animated GIF?

Aside from the simple fact that it’s more fun, the Graphics Interchange Format has some limitations that make it unsuitable for certain applications. It doesn’t work very well at all for photographic images, and it only has very basic transparency support. JPEG is far better for photographs, and PNG for images with flatter colors.

There is another image format that supports animation, the animated PNG format (APNG), but support for it is sorely lacking. Most popular image editors don’t support it natively, and only a couple of browsers can display them without third-party extensions. Firefox/Gecko and Opera are about the extent of browser support for APNG. Internet Explorer can’t display them at all, and Chrome requires a third-party extension.

By using a sprite, you have an image format that fits your needs, and still have animation. Oh, and you can start and stop the animation at will, through JavaScript.

Implementation

For starters, you need an element to hold the sprite. I ended up using a DIV with an ID of “sprite.”

<div id="sprite"></div>

Then you need to style the element. (If it’s not already a block-level element like a DIV, you may need to add display:block.) It’s height should be the height of your sprite image, and the width should be the width of a single frame. My image is 200 pixels high, and a frame is 300 pixels wide.

#sprite {
width: 300px;
height: 200px;
margin: 30px auto;
background-image: url(sprite.png);
}

The most important part, of course, is the script. I’m using some jQuery, simply because it’s a convenient way to handle my button events. You could easily adapt it to work without, though.

$(document).ready(function(){

var frameWidth = 300;
var frameHeight = 200;
var spriteWidth = 5400;
var spriteHeight = 200;
var spriteElement = document.getElementById("sprite");

var curPx = 0;
var ti;

function animateSprite() {

spriteElement.style.backgroundPosition = curPx + 'px 0px';
curPx = curPx + frameWidth;

if (curPx >= spriteWidth) {
curPx = 0;
}

ti = setTimeout(animateSprite, 80);

}

animateSprite();

});

The block of variables at the top set the frame dimensions, the dimensions of the sprite image, and the element containing the sprite. Then a timer is set, firing once per 80 milliseconds, which runs the animateSprite() function. Every time the function runs, it sets the background offset to curPx, and adds the frame width to curPx, so the next frame will be displayed in the following iteration. If curPx reaches the last frame, it’s reset to zero, so the animation will wrap around.

As an added bonus, you can start and stop the animation at will through the script. I just added some click events to a couple of links for illustrative purposes.

$("#stop").click(function() {
clearTimeout(ti);
});

$("#start").click(function() {
ti = setTimeout(animateSprite, 80);
});

You can see the finished example in action here.

It’s 2012, already! Why are we still relying on pictures of typographical symbols? Let’s do it with the power of CSS!

Let’s start with some simple HTML. Before we can style anything, we need to create our blockquote. While we’re at it, a cite element is a nice, semantic way to attribute the quote to its originator.

<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae!
<cite>Somebody famous</cite>
</blockquote>

Now some CSS to provide some basic styling for the blockquote. Leaving the default browser style isn’t going to look great, so we’ll use a largish serif font with a little extra line spacing. And a slightly lighter color. Extra-dark grey adds a subtle variation from your main body text.

blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
width: 500px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}

Now for the fun part: the giant quotation mark. The :before pseudo-element can be used to dynamically insert content before the text of the element, and style the content you insert. This is great for decorative text, like stylistic curly-quotes. The trick is to use an escaped hexadecimal representation of the desired character, and a little bit of fiddly positioning stuff to make it sit in the right position.

blockquote:before {
display: block;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}

That’s the most difficult part. You may have to experiment with the size and positioning until it looks right, though. Once everything looks nice, you can apply the same technique to style the citation. Using the :before pseudo-element, you can insert an em dash and a space before the text.

blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}

blockquote cite:before {
content: "\2014 \2009";
}

Easy, isn’t it? The effect should work in all modern browsers, and IE8. (IE8 will only process the pseudo-element if your document has a doctype declared, but you should have one of those already…) In browsers that don’t support it, the added content simply won’t appear, leaving the main text of the blockquote (and the citation) intact. The other styling will remain, of course, so it should still look good enough.

You can see a live demo here.

I was recently looking at the new design of A Small Orange, a hosting company. Would you guess, just looking at it, that it uses Bootstrap?

I didn’t realize at first, until I moused over an image and noticed the popover that appeared. I recognized it as a re-colored Bootstrap feature, and checked the page source to confirm it. Handy, easy to implement, and yet you could even restyle it beyond recognition if you wanted to.

There are already plenty of sites using Bootstrap to create unique designs, rather just as a no-design solution to throw together a quick page. The trick is finding them, since by definition they wouldn’t look like Bootstrap sites…

The CSS is simple, though of course it won’t work for Internet Explorer, except for the very latest version.

#flipdiv {
    width: 100%;
    height: 100%;
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

Now you want to wrap everything inside your <body> element with a new <div>. (You have to style the div instead of the body itself, as you get some weird box model issues otherwise.) It would look something like this:

<body>
<div id="flipdiv">
...everything else...
</div>
</body>

If you want to automatically scroll down to the new top of the page, a.k.a. the bottom, you can use a little JavaScript snippet to bump it down.

<script type="text/javascript">
window.onload = scrollDownToTheTop;
function scrollDownToTheTop() {
window.scrollTo(0, document.body.scrollHeight);
}
</script>

Silly, but not bad for an April Fool’s joke.

In a similar vein, a new challenge has arrived in the form of CSS1K.

You have to style the same HTML as everyone else using no images or embedded fonts, while keeping your stylesheet under 1 kibibyte minified. To participate, you just fork the site on GitHub and submit a pull request when you’re done. Accepted styles are added to the gallery.

It’s a neat idea, now that we have so many fancy new CSS3 properties and selectors available, and it’s especially relevant as today’s page sizes are on the rise.

This is great for two scenarios. You can use it to experiment with a bit of CSS or JavaScript for brainstorming purposes, or you can use it if you need to ask someone for help. (It’s a lot easier to figure out what’s going wrong with someone’s code or markup if you can jump right in and start messing with the code.) Chris Coyier (of CSS-Tricks) uses it all the time to show off CSS experiments that will likely be used in future posts of his.

Everyone who uses Firebug regularly knows the basics. They know how to inspect and edit HTML and CSS, analyze page loading times and the like. There are a few neat tricks, though, that aren’t quite immediately apparent, but are very handy.

Quickly Copy a Background URL

I like to play around with background images when I’m experimenting with a design or learning from someone else’s. This often involves copying the URL of a background image from one element and pasting it to another. It’s a pain to carefully select the URL portion of a shorthand background attribute, which is what I did until recently. As it turns out, you can just right-click the attribute and choose “Copy Image Location” or “Open Image in New Tab.” Palm, meet forehead.

Specify a Pseudo-element

If you hover over a link (or any element with a :hover pseudo-element) while Firebug is open, the right-hand pane updates to show the relevant CSS. Wouldn’t it be useful if it didn’t disappear as soon as you moved the mouse? Fortunately, you can lock the hover state with the little dropdown arrow on the Style tab. Just put a check mark next to the “:hover” option.

See the Exact Style Applied to an Element

Next to the Style tab in the right-hand pane is one labeled Computed. This is useful for working out cascading issues, or checking the exact dimensions of an element.

Console Logging

Instead of spamming alert() dialogs across your screen when you’re debugging JavaScript, you can use Firebug’s Console tab instead. Calling the console.log() function will output whatever you pass to it in the Console tab. e.g. console.log(‘hi’). There’s a page about it on the Firebug website.