Learning by Hacking

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.

'Knipsfolio' is a prototype of a portfolio device . By pushing the trigger, you can either browse the projects analogue or navigate the more detailed website.

<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>