Labs

Current & Past Experiements

The labs section is home to current and past experiements mostly involving CSS3 and JavaScript.

JavaScript


cls JS

JS helpers including simplified object methods to allow for simple DOM class manipulation.

Check out clsJS on Github.

ivaBaseJS

Mini JavaScript framework for fast prototyping on modern browsers, specifically targeting mobile devices. The library consists of commonly used JavaScript functions for working with CSS classes to aid in the development of animations. It also instantiates global variables that assist in cross platform development.

Check out the ivaBaseJS API for more information or get the source on ivaBaseJS on Github.

aniPNG

aniPNG is an update to the great PNG animation script developed by Steve Jones – AnimatedPNG.js.

Some of the features that have been added are:

  • Directionality – when instantiating the object, the developer can choose to animate forwards or backwards.
  • Callback Functions – callbacks can be added in order to carry out specific tasks when the animation is complete, such as changing a class or firing another animation.

Check out the aniPNG API for more information or get the source on Github

Process


Web Development Best Practices

Outline process doc that speaks to the best practices of creating and working with HTML, CSS and JavaScript files as they combine to create the larger product. My thoughts on file organization, semantic code and optimizations in one repository.

Correcting some documentation layout and posting soon!

Creative/Dev Hand-off

This document serves as a guide for proper Photoshop file architecture in order to hand-off to a development team. It is a quick reference that assists both Creative and Development teams when it comes to file preparation and delivery.

The Creative/Dev Hand-off document is available as an online “article” at this time.


Style Guides

The best weapon any developer has in their arsenal beyond their personal skillset is project knowledge and insight. Before development begins, the Creative team should compile a “Style Guide”. A style guide consists of such things as:

  • A list of the colors to be used in the project.
    This includes a color swatch along with the hex value.
  • A list of the font family, weight, size and color for all sections of the project, such as headlines (h1 – h6), paragraphs, footnotes, links (standard, hover and visited states), codelines, etc.
  • In addition to the above – it is helpful to include text-shadow and gradient information as well.
  • Location and proper treatment of logos or other branding specific content.
  • Navigation elements including: drop-shadow, gradient, hover, active and standard state information.
  • Spacial information so that a consistent value is met for padding and margin in case the Photoshop files vary.

Coming soon:

An online style guide generator!