Learning by Hacking

<blockquote class='posterous_long_quote'><p>These are supporting examples for the blog entry, The Paragraph in Web Typography & Design.</p> <p>Only standard <code>&lt;p&gt;</code> tags have been used. Some of these styles are experiments using pseudo elements and adjacent sibling selectors; browser support is not consistent. Paragraph font size is set at 1em (equivalent to 16px if browser font size is unchanged) and line height set at 1.25em. Georgia was used exclusively. No browser specific CSS has been used—any inconsistency in the rendering of line-height, baseline and element positioning has been left for cross browser comparison before implementing.</p> <ol> <li>Browser default style</li> <li>Block flush left, ragged right</li> <li>Block justified</li> <li>One em indent with boundary, flush left, ragged right</li> <li>Two lead indent without boundary, flush left, ragged right</li> <li>Indent without boundary, justified</li> <li>Outdent flush left, ragged right</li> <li>Continuous text, CSS generated pilcrow divided</li> <li>Elevated cap (versal) with bold opening</li> <li>Drop cap (versal) with bold opening</li> <li>Outdent cap (versal) with bold small caps opening</li> <li>Initial outdented block with CSS generated section and mid point dividers</li></ol></blockquote>

If you’re reading this, the chances are you’ve seen some of the amazing things that have been done in CSS3. Unfortunately, most of them aren’t practical for you, or your clients.

No longer, I say!

Below is a carefully-curated list of real-world examples and snippets of CSS3 that can be safely used to enhance any piece of work you create.

Usage

• Export Responsive Prototype allows you to simulate responsive design when you put designs for each media query breakpoint on separate pages.
• To indicate which sections of the design "respond" you simply slice the document, making sure that clear rows are defined.
• For areas that don't have slices, or just plain slices, their widths will be converted to percentages.
• By adding either 'fixed', 'left, 'center' or 'right' in the slice's target field, you can force slices to be to not scale. 'left, 'center' and 'right' will absolutely position the slices to the respective anchor point of the row.
• There is no need to name your slices as this extension is for rapid prototyping.
• It doesn't support "live" text (it just flattens everything) and you can't specify any backgrounds either.

CS3 and CS4 users please ensure you uncheck 'Current page only' in the Export dialog.

Mac users please ensure you save all important open documents before exporting as it can crash Fireworks. A bug has been logged with the Fireworks team regarding this.

<blockquote class='posterous_long_quote'><h1 style="text-shadow: 1px 1px 2px darkGreen;">Kickstrap</h1> <p>A full version of Twitter's Bootstrap with themes, enhancements, and other goodies.</p></blockquote>