Gordon Brander's Blog » Gordon Brander

Gordon Brander — Fri, 03 Sep 2010 15:19:50 +0000

365psd posts a free .psd file every day. Most of them are gorgeous casualties of the design process, given a new home. Digging through someone else’s .psd file is a great way to learn technique.

Gordon Brander — Thu, 02 Sep 2010 15:41:27 +0000

So it happens: you want to incorporate a texture into a site design: wood grain, or perhaps the patina of a fine leather-bound book. No problem, you say, I’ll just find a stock photo of some leather, repeat-x, repeat-y, and… uh-oh. Look at those ugly seams! If only someone would create free, tillable patterns, providing both the .psd and .pat files!

If only.

Gordon Brander — Wed, 25 Aug 2010 15:40:33 +0000

SENTINELLA by Bertelli Bicycles

The Bike Stylist is a fine blog about building bicycles (complete with lovely diagrams), by the guy who builds these.

Delicious CSS with PIE, Pt 1

Gordon Brander — Tue, 03 Aug 2010 23:10:08 +0000

Us Crowd Favorite folks have just released a premium WordPress theme called Carrington Business. It’s quite probably the most advanced WordPress theme available today. All told, it has been more than a year in the making, so there’s quite a bit packed into it I won’t mention here.

Let’s just talk about the CSS3 we use in the theme.

“Wait, CSS3?”, you say, “I thought I couldn’t use that for like another ten years? What about IE?!

Whoops, I got ahead of myself there. What I meant was, let’s talk about the cross-browser CSS3 we use. It turns out solid cross-browser CSS3 is no longer a thing of the future. Here’s how we used the Internet Explorer library CSS3 PIE to deliver Carrington Business’ fancy CSS to all modern browsers.

PIE is an IE behavior that enables lots of CSS3 goodies for Internet Explorer 6-8. It’s easy to use (just one line of CSS), smoking fast and works beautifully.

Integrating PIE with WordPress Themes

First things first. All WordPress themes should be self-contained so you can move them from place to place. So, we’ll want to add the latest PIE release to the theme folder. I like to keep it in a js/ directory, with all my other Javascripts, but you can put it anywhere in the theme.

Here comes the trick: PIE is attached via a proprietary IE behavior, and the IE team, as usual, got a bit “creative” with the feature. Here’s how you might think you would attach PIE:

.cherry-pie {
    /* Attach PIE behavior. Wooo! */
    behavior: url(../js/PIE/PIE.htc);
}

It turns out the code above will not work. That’s because behaviors calculate relative URLs based on the HTML document the CSS file is applied to. This as opposed to the scheme of calculating based off of the location of the CSS file. You tell me which makes more sense. Anyway, this leaves us with two options

Link PIE with a hard-coded relative URL, maybe something like this: behavior: url(/js/PIE/PIE.htc);
Have WordPress and PHP insert the absolute URL to PIE.htc

But! Remember that bit about WordPress themes being self-contained? That means we can’t use the hard-coded URL, since the PIE files would be separate from the main theme files. We really only have one option: PHP, baby.

Enter functions.php

Using WordPress functions we can dynamically insert the absolute path to the PIE file. Adding something like this to functions.php should do the trick:

/**
 * Attach CSS3PIE behavior to elements
 * Add elements here that need PIE applied
 */
function my_render_css3_pie() {
   echo '

';
}
add_action('wp_head', 'my_render_css3_pie', 8);

The snippet above will add the chunk of code to your theme’s tag using the plugin Action API. get_bloginfo('template_url') is replaced with the full URL to your theme. The “8″ I’ve used for the priority argument means the snippet will be placed below CSS, but above Javascript added through the plugin API. The zoom: 1 is a neat little trick to prevent jumps in the layout while PIE executes. Since PIE always triggers hasLayout on elements, you might as well do it up front. It will save you a little pain.

In my CSS, I add little notes to myself wherever I’ve enabled PIE for a selector:

/**
 * Uses CSS3 PIE
 * See my_render_css3_pie in functions.php
 */
#cherry-pie { ... }

And that’s the gist of it. More practical PIE tips to come.

Gordon Brander — Fri, 30 Jul 2010 22:09:50 +0000

In front-end development, the question
“what is the fewest possible number of

s I need for this?”
is not always equivalent to
“what is the most intuitive and maintainable approach here?”.
It’s also not always the same as
“what is the most meaningful and semantic approach?”.

PIE in the Sky

Gordon Brander — Wed, 14 Jul 2010 01:41:31 +0000

If you’re a front-end developer, you’ve probably been waiting with misty eyes for that far-off day when CSS3 is roundly supported. I’ll bet you didn’t expect it to be today.

CSS3 PIE (Progressive Internet Explorer) is an open source script that gives IE6-IE8 the ability to render the best parts of CSS3. Drop behavior: url(PIE.htc) into a group of styles and a metric ton of CSS3 properties suddenly work:

border-radius
box-shadow
multiple backgrounds
rgba
yeah, there’s more…

Jason was kind enough to let me beta-test PIE. I’ve used it in several projects now, and my first-blush reaction is this is way too good to be true. It’s light, fast, easier to implement than a PNGfix, and it just works with standard CSS properties. It’s now a standard part of my development toolkit.

Designed Behavior

Gordon Brander — Thu, 08 Jul 2010 18:15:32 +0000

Volkswagen has some cleverly designed interactions for their Fun Theory ad campaign.

It’s a bit like the broken windows theory in reverse.

BDW Intro to Semantics

Gordon Brander — Thu, 17 Jun 2010 15:08:39 +0000

I’ll be giving an intro to semantics in HTML at Boulder Digital Works tonight. Slides for the class are available for download on SlideShare.

If you’re particular about these things, the focus will be on “semantics” with a lower-case “s”. In other words, the quick, dirty and practical approach of HTML5 tags, well-named classes and Microformats.

View more presentations from gordonbrander.

Gordon Brander — Fri, 11 Jun 2010 23:22:56 +0000

CSS3 Text Lens-blur. Lovely.

Gordon Brander — Fri, 28 May 2010 15:20:33 +0000

8th Continent Soymilk has done a delightful rebranding of their line. Reminds me of one of my favorites, Alexander Girard.