Azzcat Blast

Design stories & tips, peppered with life's little tidbits

Crazy Good Web Tools, Part II

December 20th, 2010

screen capture from development site

A few months ago, I wrote a post covering some wonderful new web tools that I had begun to use with this project, now live and it’s time for an update.

HTML5 Boilerplate

HTML5 Boilerplate has gathered a strong following in the web dev community. And for good reason—it is awesome! The authors also released an update in October and Boilerplate is being improved by the web community and is now available in several languages. There’s even a few new slick WordPressified versions of Boilerplate (or Boilerplated WordPress Themes!):

Less.app

This little darling is my fav for when I’m coding a brand new site. Bottom line, it makes all those vendor prefixes for CSS3 rules fast and easy to add. Just remember—always use the non-prefixed rule last to be future browser-proofed and Hardboiled!

CSS3 PIE

Another up-and-coming piece of Javascript. Now endorsed by the HTML5 Boilerplate team, too! Yummm, PIE!

Google Maps Slider

Sadly, this part of the project was cut by client. But it’s still nifty and sure to be viable in another project, particularly for a business with multiple locations. Visit the maps slider demo.

960 Gridder

Most of us are familiar with the 960 Grid System for layout and design. This little gem makes designing in the browser a whole lot faster by customizing the grid and line-height settings for the bookmarklet. Learn about setting up the script for 960 Gridder and grab the bookmarklet. Below is the code I worked with for the Hearthstone Communities site. Setting the line-height to 24px (‘pHeight: 24,’) and turning on the grid allowed me to fine-tune the layout.

<script>
var gOverride = {
urlBase: 'http://gridder.andreehansson.se/releases/latest/',
gColor: '#EEEEEE',
gColumns: 12,
gOpacity: 0.55,
gWidth: 10,
pColor: '#C0C0C0',
pHeight: 24,
pOffset: 0,
pOpacity: 0.55,
center: true,
gEnabled: true,
pEnabled: true,
setupEnabled: true,
fixFlash: true,
size: 960
};
</script>

Web (Typekit) Fonts

This was another part of the prototype ixnayed by the client. :( Unfortunately, in one browser the FOUC/FOUT was unacceptable to the client. And…believe it or not…that browser was not IE! No siree…it was Firefox. Go figure. Anyway, sooner or later Firefox will get updated and this won’t be a problem, or I’ll manage to properly use the .wf-inactive class and the WebFont Loader.

Summary

All of the tools above have become standards in my design/development process—in a very short time. I’m constantly impressed by Open Source applications, etc. and its collaborative environment.

Visit the live site.
Visit the prototype.

One Response to “Crazy Good Web Tools, Part II”