Introduction
 CSS frameworks: some people
love 'em, some people ... well, let's just say they have very
strong opinions. Way
back in my very first Tech Times, I discussed whether using a
framework necessarily means that you have to use all the strange, crufty
class names they appear to impose.
The answer to that is still a resounding no: it's absolutely
possible to use a CSS framework in a sensible semantic way. In this week's
Tech Times, Kevin Yank shows us some neat tools you can use to
tame those pesky presentational classes. We'll go to that in a moment.
First of all, though, it's Australian Web Week, and the big ticket
item on SitePoint's calendar is Web Directions South. It's
packed with interesting workshops and talks by industry leaders from all
over the world, including Sexy Web Design
author Elliot Jay Stocks, The Art and Science
of JavaScript co-author Cameron Adams, and of course Kevin!
If you'll be there, we'd be keen to meet you! Be sure to stop by our
book stall on Friday and say g'day.
Secondly: Who wants to win an unlocked iPhone? How
about a Wacom Intuos4 tablet? Or a Wii, plus stacks of games and
accessories? Or, how about a $1,000 donation to the charity of your
choice? With the SitePoint
Reader Survey, we want your input on how we can make the site
even better -- and we're prepared to offer you a bunch of great prizes
(each to the value of approximately US$1,000) to gain it!
You have to be in it to win it, as they say, and it takes just a few
minutes to complete the survey. Take
the survey here -- and be sure to check
out the fine print, too.
Good luck!
Developers build out the templates, put a
wireframe in place and build the functionality (in the form of
Widgets). Web designers can then drag and drop these Widgets into
the "dropzones" of a page, building user experiences and campaign pages as
necessary. Content authors can focus on writing SEO-friendly copy in
the WYSIWYG editor or the new in-context editor. Watch an INSTANT
DEMO
or download a FREE
TRIAL now.
Summary
CSS Frameworks and Semantic Class Names
by Kevin Yank
One of the most common complaints about CSS frameworks like Blueprint, YUI Grids, and 960.gs is that they require designers to dirty
their fingers by adding presentational class names to their HTML
documents, like so:
<div class="span-9
last">
<div class="grid_6
alpha">
<div class="yui-t6">
Class names like "span-9" really bother designers
who care about the quality of their HTML code, because they describe the
appearance of an element; this should really be left to
the CSS properties defined in your site's style sheets. The problem with
presentational class names is explained especially well by the W3C QA tip,
Use
class with semantics in mind:
Good names don't change. Think about why you
want something to look a certain way, and not really about how it
should look. Looks can always change, but the reasons for giving something
a look stay the same.
Maybe you're the pragmatic type who takes no issue with this sort of
thing, or decides that it's a necessary evil given the limitations of the
CSS language. Nevertheless, there are plenty of front-end ninjas out there
who refuse to use CSS frameworks for this very reason.
It turns out, however, that the latest crop of CSS frameworks provide
clever solutions to the problem of presentational class names. How? Find
out after the jump.
Until
the 8th of October you can pick any 5 SitePoint PDFs and pay for only
1. That's about $150 worth of books for just
$29.95! Grab your 5 books
today Strictly ends on the 8th of October -- don't miss
out!
Blueprint CSS, the granddaddy of
CSS layout frameworks, now includes a clever Ruby script called
compress.rb in its download package. In Blueprint's
compress.rb: A Walkthrough, Blueprint author Joshua Clayton
explains how to use the script to generate a custom version of the
Blueprint style sheets using your own semantic class names.
The process boils down to writing a simple configuration file that tells
the script how to map Blueprint's presentational class names to your own
semantically meaningful class names. The file will look like this:
demo:
path: /Users/kyank/Documents/myproject
semantic_classes:
".header, .footer": ".span-24, div.span-24"
".content": ".span-18, div.span-18"
".sidebar": ".span-6, div.span-6,
.last, div.last"
The semantic_classes section provides the mapping. In this
example, the header and footer classes will be
24 grid units wide and the content class will be 18 grid
units wide. The sidebar class will be 6 grid units wide and
the last block in its row.
With this configuration file written, you simply run the compress.rb
script, and the customized version of the Blueprint style sheet files
(screen.css, print.css, and ie.css) will be generated in the specified
path. The style sheet will contain rules like this one, that apply the
grid dimensions to your custom class names:
/* semantic class names */
.content {float:left;margin-right:10px;
width:710px;}
... and just like that, you gain all the layout facilities of Blueprint
CSS with none of the HTML cruft!
If manually compiling your style sheets with a Ruby script sounds like a
bit of a pain (which it can be -- especially if you develop on a Windows
computer without Ruby installed), a server-side CSS framework might be a
better option for you.
CSS frameworks are popping up for all the major server-side programming
languages. Two prominent examples include Compass (for Ruby), and Scaffold (for
PHP). These frameworks let you write your style sheets with extra language
features, and automatically compile them to standard CSS code when sending
them to the browser.
Using Scaffold, for example, you could write your style sheet like
this:
@grid {
column-width:30;
column-count:24;
right-gutter-width:20;
baseline:20;
unit:px;
}
.header, .footer {
+columns(24);
}
.content {
+columns(18);
}
.sidebar {
+columns(6);
+last;
}
The @grid at-rule sets up the options for Scaffold's layout
plugin, and then lines like +columns(24); (called
mixins) are compiled into standard CSS properties when
the browser requests the style sheet.
These are just a couple of the ways that the latest CSS frameworks
respond to those critics who complain about having to sacrifice HTML code
quality to use them. Now you can have all the benefits of a well-tested
layout framework, and apply them to your HTML code on your terms.
Read the blog entry:
Building rich, expressive internet applications just
got easier with the latest release of ColdFusion from Adobe. Adobe
ColdFusion 9 enables developers to rapidly build powerful internet
applications by condensing complex business logic into fewer lines of
code. In addition, the seamless integration between ColdFusion 9 and
the Adobe Flash® Platform gives you the easiest solution yet for
building rich internet applications (RIAs) from client to server. So now
it's simple to add robust, interactive decision-support capabilities to
ColdFusion applications DEVELOP. DEPLOY. FASTER. Try Adobe ColdFusion 9 now -- free for 30 days
>
See you next week for another issue of the Tech Times -- and if
you'll be at Web Directions South, see you there!
Raena Jackson Armitage
techtimes@sitepoint.com
SitePoint Community Manager
|
Browser
support for CSS3 is continually improving. In this article, Alex walks us
through a few of the coolest CSS3 properties supported in the latest
development release of Firefox (3.6 alpha).
In
parts I and II, Andrew showed us how to build a slick-looking Flash
frontend for Twitter and Flickr using the beta versions of Flash Catalyst
and Flash Builder 4. In this final installment in the series he takes our
application a step further by adding video functionality: allowing users
to upload videos, and to take screenshots of their videos to post as
images.
As a
follow-up to his recent ebook, Build Your Own Firefox Extension, James has
assembled this selection of useful tips, tricks, and hacks that he's
collected from his experience with building extensions for Firefox. 
