View Issue
Home
» Newsletters
» View Issue
The SitePoint TECH TIMES #260 Copyright (c) 2009
October 6th, 2009 PLEASE FORWARD
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tips, Tricks, News and Reviews for Web Coders
by Kevin Yank (techtimes@sitepoint.com)
Read the HTML version of this newsletter, with graphics, at:
http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=260
Note: This newsletter is supported solely by advertisers like the
one below. We stand 100% behind every ad that we run. If you ever
have a problem with a company that advertises here please contact
us and we will try to get it resolved.
INTRODUCTION - - - - - - - - - - - - - - - - - - - - - - - - - -
by Raena Jackson Armitage
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, [1] 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, [2] and the big
ticket item on SitePoint's calendar is Web Directions South. [3]
It's packed with interesting workshops and talks by industry
leaders from all over the world, including Sexy Web Design [4]
author Elliot Jay Stocks, The Art and Science of JavaScript [5]
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 [6], 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 [7] --
and be sure to check out the fine print, too. [8]
Good luck!
[1] <http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=228&format=html>
[2] <http://webweek.com.au/>
[3] <http://south09.webdirections.org/>
[4] <http://www.sitepoint.com/books/sexy1/>
[5] <http://www.sitepoint.com/books/jsdesign1/>
[6] <http://www.surveymonkey.com/s.aspx?sm=sAdg5SDLgShCmkF8a4IgJw_3d_3d>
[7] <http://www.surveymonkey.com/s.aspx?sm=sAdg5SDLgShCmkF8a4IgJw_3d_3d>
[8] <http://www.sitepoint.com/blogs/2009/10/05/reader-survey-2009/>
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
Easily Build & Deploy Web Sites - Introducing PageBuilder
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.
http://www.sitepoint.com/launch/4bf69a
IN THIS ISSUE - - - - - - - - - - - - - - - - - - - - - - - - - -
- Introduction
- CSS Frameworks and Semantic Class Names
- New Technical Articles
- Techy Forum Threads
- More Techy Blog Entries
CSS FRAMEWORKS AND SEMANTIC CLASS NAMES - - - - - - - - - - - - -
by Kevin Yank
One of the most common complaints about CSS frameworks like
Blueprint [1], YUI Grids [2], and 960.gs [3] 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 [4]:
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.
[1] <http://blueprintcss.org>
[2] <http://developer.yahoo.com/yui/grids/>
[3] <http://960.gs>
[4] <http://www.w3.org/QA/Tips/goodclassnames>
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
5 Books for the Price of 1
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!
http://sale.sitepoint.com/
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Blueprint CSS [1], 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 [2], 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
[3] (for Ruby), and Scaffold [4] (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 [5], 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:
Web Tech Blog: Technically Speaking
by Kevin Yank
CSS Frameworks and Semantic Class Names [6]
[1] <http://blueprintcss.org>
[2] <http://www.jdclayton.com/blueprints_compress_a_walkthrough.html>
[3] <http://compass-style.org/>
[4] <http://wiki.github.com/anthonyshort/csscaffold>
[5] <http://wiki.github.com/anthonyshort/csscaffold/layout-plugin>
[6] <http://www.sitepoint.com/blogs/?p=14814>
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
Introducing Adobe ColdFusion 9 Software
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 >
http://www.sitepoint.com/launch/456b57
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
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 [1]
SitePoint Community Manager
[1] <mailto:techtimes@sitepoint.com>
NEW TECHNICAL ARTICLES - - - - - - - - - - - - - - - - - - - - -
CSS3: To Infinity And Beyond!
by Alex Walker
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).
http://www.sitepoint.com/article/1758
Share Media on Twitter Using Flex, Part III: Video
by Andrew Muller
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.
http://www.sitepoint.com/article/1757
10 Things They Never Tell You In Firefox Extension School
by James Edwards
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.
http://www.sitepoint.com/article/1756
TECHY FORUM THREADS - - - - - - - - - - - - - - - - - - - - - - -
High scalability
<http://www.sitepoint.com/forums/showthread.php?threadid=640390>
Ruby on Rails--Basic Concepts?
<http://www.sitepoint.com/forums/showthread.php?threadid=640549>
Selecting records based on time, regardless of date
<http://www.sitepoint.com/forums/showthread.php?threadid=640282>
It's Official - Software is SOLD, Not Licensed
<http://www.sitepoint.com/forums/showthread.php?threadid=640018>
MORE TECHY BLOG ENTRIES - - - - - - - - - - - - - - - - - - - - -
Web Tech Blog: TECHNICALLY SPEAKING
12 APIs For Creating The Next Big Mashup (2 comments)
http://www.sitepoint.com/blogs/2009/10/05/apis-for-creating-next-big-mashup/
Why Windows 7 Will Revolutionize Your Browser Testing (24
comments)
http://www.sitepoint.com/blogs/2009/09/29/windows-7-browser-testing/
PHP Blog: DYNAMICALLY TYPED
Build a Lifestream with SimplePie (5 comments)
http://www.sitepoint.com/blogs/2009/09/29/build-a-lifestream-with-simplepie/
Podcast Blog: THE SITEPOINT PODCAST
SitePoint Podcast #30: Google Infects IE (3 comments)
http://www.sitepoint.com/blogs/2009/10/05/podcast-30-google-infects-ie/
News & Trends Blog: INDUSTRY NEWS FOR WEB PROFESSIONALS
Microsoft Security Essentials: a Review (15 comments)
http://www.sitepoint.com/blogs/2009/10/04/microsoft-security-essentials-review/
JavaScript & CSS Blog: STYLISH SCRIPTING
Interesting CSS Quirks: Border-spacing (10 comments)
http://www.sitepoint.com/blogs/2009/10/01/interesting-css-quirks-border-spacing/
ADVERTISING INFORMATION - - - - - - - - - - - - - - - - - - - - -
Find out what thousands of savvy Internet marketers already know:
email newsletter advertising works! (You're reading an email ad
now, aren't you?)
Find out how to get YOUR sponsorship ad in this newsletter and
reach 95,000+ opt-in subscribers! Check out
http://www.sitepoint.com/mediakit/ for details, or email us at
mailto:adinfo@sitepoint.com
HELP YOUR FRIENDS OUT - - - - - - - - - - - - - - - - - - - - - -
People you care about can take charge of their Website by
effectively using the information and resources available on the
Internet. Help them learn how - forward them a copy
of this week's SitePoint Tech Times.
ADDRESSES - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Send suggestions and comments to:
techtimes@sitepoint.com
To subscribe, send a blank email to:
subscribe@sitepoint.com
The Archives are located at:
http://www.sitepoint.com/newsletter/archives.php
The SitePoint Tech Times is (c) 1998-2009 SitePoint Pty. Ltd. All
Rights Reserved. No part of this Newsletter may be reproduced in
whole or in part without written permission. All guest articles
are copyright their respective owners and are reproduced with
permission.
SitePoint Pty. Ltd.
48 Cambridge Street
Collingwood, VIC 3066
AUSTRALIA
You are currently subscribed to The SitePoint Tech Times as:
[email]
To change the email address that you currently subscribe with:
http://sitepoint.com/newsletter/manage.php
To switch to the HTML version of this newsletter:
<http://sitepoint.com/newsletter/htmlplease.php?email=[email]>
To leave this list, please visit:
[unsubscribe]
Do Not Reply to this email to unsubscribe.
We send this newsletter using Campaign Monitor.
http://www.campaignmonitor.com/
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Topics
Download sample chapters of any of our popular books.
Learn more with SitePoint books