Just recently I attended a Ruby User Group meeting where John Hwong of Mutually Human gave an excellent overview of “Unobtrusive CSS”. He made the case for using tools like Compass and Sass to build CSS stylesheets cleaner, quicker, and with less fuss. Compass is a framework built on Sass that allows for quick CSS authoring using sass-ified CSS Frameworks available through the use of mixins. This in itself is slick. But, you soon realize this is only the start.

I’ve always been a stickler for detail and concision—in my code and in my design work. CSS presents a problem for me because of necessary IE hacks, cross-browser workarounds, and the general massiveness of a typical CSS document. With Compass/Sass I can eliminate all of these problems by tucking complexity into a mixin and invoking it from my primary Sass document.

The first problem I wanted to solve was creating beautiful cross-browser CSS buttons with size flexibility and a seamless workflow. This is what I want (ignore the crazy colors):

I had the code from an earlier project (the original CSS was borrowed mostly from work done by the Filament Group as shown here), which looked something like this:

.sign-up form button.medium { padding: 0 12px 0 0; font-size: 1.2em; text-align: center; background: transparent url(‘../images/grey_36_button.png?1270778569’) no-repeat right -140px; }

.sign-up form button.medium span { padding: 9px 0 0 12px; height: 27px; background: transparent url(‘../images/grey_36_button.png?1270778569’) no-repeat left top; color: #444444; text-shadow: #dddddd 0px 1px 0px; font-weight: bold; }

.sign-up form button.medium:hover { background-position: right -210px; }

.sign-up form button.medium:hover span, .sign-up form button.medium.hover span { background-position: 0 -70px;}

In terms of CSS, these few lines aren’t too bad. However, I like to layout my sites to a grid, and I have standard font size that I’d like to use. So, for every different button size and style I’d have to figure out the proper padding, margin, and font size using a rubric in my head.

With Sass I used a little math to do all of this for me. I feed the mixin call the vertical height (in pixels) of my button and Sass spits out the CSS for the perfectly proportioned button. This is all well and good. However, I like to keep my font size definitions in em units (for these reasons among others). Since I’ve made my em unit equal to 12 pixels, I know what I’m working with. This presents a problem because we need to take the button height, which is in pixel units, and determine some appropriate font size, which is in em units. It obviously doesn’t work to do something like:

!font_size = (!pixel_height / 45px - .4px) * 1em + .8em

This is because it doesn’t make sense to multiply a physical unit by a relative one. But, we can make one of the terms of this equation unit agnostic using this little trick:

!font_size = ((!pixel_height / 45px - .4px) / 1px) * 1em + .8em

I assume this works because the quotient of the interior term is no longer in any unit. Consider for example, that 10 dogs divided by 2 dogs is 5, not 5 dogs. Basically, the trick is to divide by a value in units that you are converting from. 

Here is the full listing for my fancy buttons:

Now, with this set up, I can make a button sprite that looks something like this:

And invoke my beautiful button mixin with a single line like so:

+fancy-button-base
button.large
  +fancy-button-scaled(“grey_45_button.png”, 45px)

Feel free to use this code in part or in whole. Be sure to let me know if you make something neat. Enjoy!

To commemorate the first version of my Python Gowalla API Client, I’ve created a mock item for it. I plan to make a small intro/how-to page for it, but now I’ll just tease it with this banner.

If you haven’t already, check out the client here:

http://github.com/sentineldesign/python-gowalla

After looking at a the instruction manual for a Lego set, I got an idea for representing the peculiarities of the standard and Internet Explorer 6 box models. These will be used in a  CSS “anti-framework” I’m developing. More on that soon, but for now, here are my box model diagrams.

The layers represent the stacking order of each element (something other diagrams come close at representing, but aren’t nearly as detailed at portraying).

Standard box model:

Internet Explorer 6 box model:

If you would like to use these, be sure to attribute Drew Yeaton (drewyeaton.com) wherever they appear.

Last week I noticed that the Gowalla site expose some API GET calls that were yet to be announced. So, on the weekend I made a wrapper for these calls in Python and packaged the code up in order to release it on Github.

So, now that the Gowalla API is officially out, I believe I have the first public Python client. :) Check it out here:

http://github.com/sentineldesign/python-gowalla

If you fall into the extremely unlikely event where you both need to access DB2 with CodeIgniter and have run into a situation where the latest database driver doesn’t work, I’ve got the fix for you. This may be because you are setting the charset or you require a different port than 664 (50000 being the port used by many for DB2).

Hence, I have updated the driver to heal all that ails.

http://codeigniter.com/wiki/DB2_Database_Driver/

Let me start by saying I really love the idea of saving time when I design and develop a site—I use all kinds of time savers. Any well thought out system that results in cleaner, more maintainable, simpler code is definitely a good thing. Thusly, I’ve used CSS frameworks in the past to save time building layouts and creating grid-based, standards-compliant websites. So, why isn’t Blueprint (or any other CSS framework) a good idea?

To answer this question, you must acknowledge that CSS is not a language that can be properly generalized with a conceptual structure. This is the reason why Jeffrey Zeldman writes the words CSS framework as CSS “framework”—that is, these things are not really frameworks in any sense of the word. They are (or attemtp to be) a one-size-fits-all stylesheet. Given this, the reason why these “frameworks” are bad is not about the frameworks themselves, it’s about the pattern they force you into.

What do I mean—ok, take for example a site I launched for Flipswap a few month back. The total time for designing, developing, copywriting, and launching the site was a little over two weeks. We cut out some best practices like IA and an exhaustive comping stage, but also took liberties with the development of the site. To quickly set type and control measure on a wide page, you normally split large chunks of copy into columns, add a sidebar for meta data, and all the usual stuff that makes a page with a lot of copy easy to digest. However, given our short timeline, I setup Blueprint and did my layout with div’s and classes while marking up the copy. This was a very simple and quick process and we got out some reasonably attractive pages on time. The key here was that I was saving time by doing design/layout while I was writing the markup. I was mixing my content layer (HTML markup) and presentation layer (CSS).

What I had done was paint myself into a veritable corner. That is, I had ignored the good natured sensible me that would markup the copy with semantically sounding classes and ids in favor of a me that was essentially creating a table layout. This is the pattern that Blueprint and other CSS frameworks force you into. When it comes time to redesign or reuse pages for a future site, I will have to redo everything over again. That’s not so much a timesaver as it is a pain in the ass. For the sake of clarity, here’s some example HTML to illustrate my point:

Valid, standards-compliant Blueprint framework-based layout

<div class=”span-20”> <div class=”column span-10”> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class=”column span-10 last”> <p>Iqui officia deserunt mollit anim id est laborum.</p> </div> </div>

Valid, standards-compliant table-based layout

<table width=”200”> <tr> <td width=”100”> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </td> <td width=”100”> <p>Iqui officia deserunt mollit anim id est laborum.</p> </td> </tr> </table>

Honestly, what’s the difference between these two things? Both have no content/presentation separation and no semantic markup. When you design with a CSS “framework” you may as well design with tables. Welcome to 1997, how does it feel?

So, what could a CSS framework be good for? It’s good for the one scenario where you are using a CMS and you have no control over your CSS, you can handcraft your non-semantic HTML by hand, and you never-ever plan to redesign or repurpose your content in an altered form. And that’s it.

Last night I did some regiggering to the Sentinel Design Group site in order to do a bigger redesign quicker and easier in the next few days. Part of that process was upgrading to Nanoc 3, a Ruby-based CMS that generates flat HTML. It’s a pretty simple concept—one that you wouldn’t think is all that helpful—but it really speeds up development.

The interesting part, though, is that I finally added some Typekit flavor to my copy. I’m a sucker for well-designed, subdued style type, and Typekit finally added a bunch of this from the FontFont type foundry.

For the headings I’m using FF Meta Small Caps Web Pro and for the body copy I chose FF Meta Serif Web Pro.

Before:

After:

While I was checking out this slick email marketing site Mail Chimp, I noticed something rather peculiar—the crowd behind the chimp looked uncannily similar to something I’d produced a few years back. I thought for sure they had somehow dug into my discarded pile of Flipswap comps and gleaned a piece of my work. But, alas, it turns out even though there is a likeness, no wrongs have been committed.

I’m kidding of course. But, check it out for yourself. Here’s an unused development comp from April 7, 2007. (Avert your eyes from the hideous Arial Rounded MT Bold, it was the company’s standard type at the time.)

Now, here’s a very similar angry crowd almost two years later:

And the crowd sans-chimp:

By the way Mail Chimp, if you want to pay me back for the artwork that you didn’t steal, I’d totally love to get my hands on that $240 plan for the sweet price of free. Wha’dya say?

Whenever I recognize a font that I’ve used before, I immediately develop an irrevocable hatred for it. The latest recipient of this maddening dislike is exljbris Font Foundry’s Museo, an organically-seriffed typeface that I used in the last revision of the Flipswap site. A specimen:

See, here’s how I used it:

The problem came when I saw these two sites last week. These two services look very interesting, but why must they ruin this font for me. I mean, for the love of god, it was free and good. Exhibits A & B here:

By the way, if one of you guys from SimpleGeo could pass me some love in the form of a Beta account, I’ll consider it payment for the beta apps I helped test for CrashCorp. He he he.