Starting a Magento project the right way is a win for the developer, win for the client and if it’s past/present/future compatible then it’s a win for the whole community. Magento Boilerplate is a pet project of mine with HTML5 Boilerplate, CSS3PIE and selctivizr.js inside.

HTML 5 Boilerplate

If you’re not yet familiar with the HTML5 Boilerplate here’s a brief statement below quoted from their site.

HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site. After more than three years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain Ajax and Flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on. Boilerplate is not a framework, nor does it prescribe any philosophy of development, it’s just got some tricks to get your project off the ground quickly and right-footed.

When Paul Irish and the team released the HTML5 Boilerplate it was a milestone for all of the community as recently mentioned on Smashing Magazine in the “Dear Web Design Community, Where Have You Gone?” by Vitaly Friedman.

It’s a milestone in many aspects since for starters it’s not yet another framework but rather a well documented and community curated collection of best practices collected for over three years and growing rapidly.



Please visit their site to gain a better understanding of the this collection.



Magento Boilerplate with CSS3PIE

At the same I found HTML5 Boilerplate CSS3PIE came a long so I decided to make a package containing a “starter theme” for future Magento projects.

The goal was to have this “ported” to Magento and add a flavor of progressive CSS3 for Internet Explorer to gain some of the CSS3 goodness and speed up development.

Selectivizr.js

In the mean time I added the “selectivizr.js” script which is a “CSS3 pseudo-class and attribute selectors for IE 6-8” to make that wonderful IE browser family behave like the rest of the “in the now” browsers.

Formalize.me



One more thing I’ve added is the formalize.js, which as Chris Coyier said it is:

Framework by Nathan Smith for nice looking, HTML5 ready, progressively enhanced, cross-browser forms.

We all know what pain it is to make the form elements behave consistently through all of browsers so this is a way to “Break the cycle of inconsistent formdefaults, style forms with impunity!“

So, what’s inside again?

Let me briefly summarize you to what’s inside and how it’s applied:

HTML 5 boilerplate CSS3PIE Selectivizr.js Formalize.js Scripts reisde in the skin/js folder HTML5 ready page templates local.xml is used for removing and adding assets

All of the scripts I added to complement HTML5 boilerplate rely on major JavaScript frameworks like prototype so it’s very easy to implement them.

I’ve tried to keep things short here since most of the stuff here is explained for each of the asset used. You’re more than welcome to join the project and contribute to it.

Project home is over at GitHub. Give it a try.