Magento boilerplate

Featured Image

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:

  1. HTML 5 boilerplate
  2. CSS3PIE
  3. Selectivizr.js
  4. Formalize.js
  5. Scripts reisde in the skin/js folder
  6. HTML5 ready page templates
  7. 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.

33
Top

Care to rate this post?

Author

Zeljko Prsa

Ex. Inchooer

Zeljko worked at Inchoo from 2008. to 2012. as a frontend developer.

Other posts from this author

Discussion 33 Comments

Add Comment
  1. Neil Bradley

    Hey Zeljko,
    I made a Magento/HTML5 .htaccess file, hosted on Github https://github.com/neilbradley/Magento-htaccess-Boilerplate.

    Let me know if you get chance to try it. :)

  2. This is great, I’ll be checking that out soon and get back to you. Thanks for taking time to do this :)

  3. Thanks man. It will be good to get another pair of eyes on it. :)

  4. Hey pals,

    You should take a look at :

    http://www.modernizr.com/

    Maybe you could include it in your next kick ass template release !

    Thanks for all the great job you do at inchoo !

  5. OK , i just checked your last release seems like you dont wait my comment …
    As i could expect from Inchoo =)

    Keep up the good work

  6. Man, this is awesome! You’re great! Thanks and keep up with the good work!

  7. William

    Great work guys – looking forward to some great HTML5 themes from the community!

  8. siju

    In my magento site, CSS3 PIE works in the header only. Whatever elements in the Header such as search box, quick links, works perfectly with CSS3 PIE (like border radius and so on) But in the rest of the pages, it doesnt work. What is wrong ?

  9. @siju

    I had similar problem, because I missed to reference correctly PIE.htc. Do you reference it by “behavior: url(../PIE/PIE.htc);” ?

    Check this example:

    .page    {
    	-webkit-box-shadow:#999 0px 0px 28px;
    	-moz-box-shadow:#999 0px 0px 28px;
    	box-shadow:#999 0px 0px 28px;
    	behavior: url(../PIE/PIE.htc);
    }
    
  10. Blaine Rubin

    I am having an issue getting jQuery running when un-commenting from local.xml, it seems to break prototype and renders many of the site features non-functional. I assume noConlfict is already included in the build, any ideas?

  11. @Blaine jQuery is included but if you want to use it you’ll need to put it into the “no conflict” mode yourself just like it says in the comments.

    In my next update, next week I’ll publish “Magento Boilerplate” with a version of jQuery in “no conflict” mode. Hope that will help you.

    In the mean time you could just add “

    jQuery.noConflict();

    ” to the end of last line in your jQuery file and override the $-FUNCTION with “jQuery” function.

    Reference: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

  12. Blaine Rubin

    Thanks for your response, I had thought no-conflict was already included, after posting I noticed it was not and had added it to enjoy jQuery goodness in my theme.

    Thanks for your work, its a perfect framework for rapid development in Magento.

  13. Very interesting Zeljko,

    I am now digging into boilerplate myself, combining it with ruby compass/sass. You would be surprised of how easy it makes to write cross-browser css/css3.
    Some stuff I have been looking at:
    http://codekickoff.com/
    http://compass-style.org/
    :)
    Cheers!

  14. Just getting started with out first Magento project, this has been an excellent starting point (as have you blog posts).

    Thanks!

  15. rami

    The local.xml include paths for formalize are set as follows:

    formalize/javascripts
    formalize/stylesheets

    but the actual skin directories are:

    formalize/css/
    formalize/js/

  16. Thanks Rami. I’ll update that ASAP. Strange no one else noticed it before or they just corrected it :)

  17. rami

    Is it possible to add blueprint or compass to this project? do you have any tips for this? should it require overriding much of the base theme css rules to be able to work with blueprint grids?

  18. Hi, Zeljko

    What a job my friend this is the way forward i think i have it going ok its all working with the 960 grid system great, i have been doing my new site up i hope its ok to use your magento boilerplate.

    When you going to let us know what magento thinks??
    Are you putting it as a full magento extention or under licence.. ??

    What can we do with it??

  19. Hello I think that I found some issues. I decided to do routine validation check for my current project. I got some errors and one of them is related with Magento boilerplate.

    I just the “direct input” option and paste there some markup from my local copy based on last release of Magento boilerplate.

    This is from validator.w3.org :

    Attribute 9 is not serializable as XML 1.0.
    /skin/frontend/mytheme/default/formalize/css/formalize.css" lt IE 9 />
    

    This part is suspicious “lt IE 9″ :P

    I checked the layout file and seems that method=”addCss” doesn’t work with IE conditional comments. I tried with method=”addCssIe” and it worked.

    But actually should we use Formalise only for browsers “lt IE 9″?

    Seems, that this is just copy / paste effect issue.

    Cheers.

  20. @Justicedesigns Magento Boilerplate is a collection of open source code. I use Magento in the name since it is specifically “packed” and organized for Magento and yes you can use it for your project. Magento agrees :)

    @Tsvetan Point well taken for Formalize.css and I’m already updating it on github.

  21. constanze

    Hello, thx for that. I just wasn’t able to execute the build script. It says “error in line 128″ and /js would be missing.
    Im not really a coder but from what I see it looks the paths are still setup in the same way as boilerplate is used stand alone and not from within a subdir.
    Does someone have a hint how to get this build.xml runing with phing?

  22. Oli

    Hi Zeljko, Thanks again for your work. I realized today that the X-UA-Compatible (IE Browsermode) in the .htaccess must be placed at the end. Otherwise it doesne’t work.

  23. z2x2

    @constanze – My guess is that Zeljko didn’t modify the build script for his Magento BP release. You can still optimize your website by using similar tools found all over the web. Read the link below for more details on what the build script does and just do it all yourself.

    http://html5boilerplate.com/docs/Build-script/

  24. kjbill

    How is the latest “Magento Boilerplate” working for everyone? Any concerns? What is the latest with this?

    Cheers!

  25. I’m struggling to see what it is that makes this a html5 template. I would have expected wide usage of the new semantic tags like etc.

    To create a true html5 starter template would take a lot of work via changing the markup that the template files output. I would be willing to do some legwork on a community project like this.

    I would also love to see a template that dumps prototype for jquery(most of us include jQuery as well as prototype) but seeing that all of the Javascript is inline that would be a mammoth task

  26. bummer, my tags got stripped out, I meant section, nav, search etc

  27. You can see the boilerplate working with magento here http://justicedesigns.co.uk started with this html5 set up by inchoo and it is a great starter for your themes.

  28. @justicedesigns

    I can see it in action, but it is missing a lot of the html5 goodness that is to be had. One of the great things about html5 is that it does a much better job of telling the browser more clearly what an element is for.

    A simple example is if you change your search box to type=”search” your browser should treat it in a different way, as it knows that it is not a normal text box. In Chrome it adds a little cross for clearing out the content of the box.

    In this boilerplate I see use of the header and footer tags and the doctype is setup correctly but not much else on the html5 front.

  29. Hello Matthew,

    Yes your right about the html5 side of things i have got my site ready and have many multi mage stores set up using html5 elements in wamp but i was waiting untill end of 2012 and really only because w3c valid reasons and seo to many errors using html5 for now it gets better every day but it makes my site look wrong to the customer and also too many errors is bad seo. so just waiting and learning really i plan on selling themes so cant have mine full of silly rel and data-text errors. So its ready and waiting.

    And i quess that was zeljko plan to have a theme ready for us to play with thanks matthew hoped you liked the site…

  30. Preston

    I find it odd that IE9 now renders in IE8 mode when using this. Why the regression?

  31. @Preston I believe, that it’s because CSS 3 PIE is included in the package …

    Take a look at: http://css3pie.com/about/

  32. Preston

    I was thinking the same thing, but there is this at the bottom of the .htaccess file:

    BrowserMatch MSIE best-standards-support
    Header set X-UA-Compatible IE=8 env=best-standards-support

    Commenting that out reverts back to IE9 mode. Is this component necessary?

  33. This looks great, we’ve begun playing around and working with this now.

Add Your Comment

Please wrap all source codes with [code][/code] tags.
Top