Magento boilerplate

By: Zeljko Prsa, Last updated: Oct 23, 2019 | Published: Mar 22, 2011
Magento boilerplate

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.

Published in:
Leave a comment

You made it all the way down here so you must have enjoyed this post! You may also like:

How To Connect Google Analytics 4 To Magento 2 Bojan Mareljic
Bojan Mareljic, | 35

How To Connect Google Analytics 4 To Magento 2

3 best open-source eCommerce platforms in 2021 Zrinka Antolovic
Zrinka Antolovic, | 7

3 best open-source eCommerce platforms in 2021

eCommerce Returns Management – a simple solution from the Fashion industry Zrinka Antolovic
Zrinka Antolovic, | 12

eCommerce Returns Management – a simple solution from the Fashion industry

33 comments

  2. 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?

    Reply

  5. 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…

    Reply

  6. @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.

    Reply

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

    Reply

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

    Cheers!

    Reply

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

    Reply

  13. 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?

    Reply

  14. @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.

    Reply

  15. 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″ 😛

    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.

    Reply

  16. 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??

    Reply

  17. 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?

    Reply

  18. 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/

    Reply

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

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

    Reply

  22. @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

    Reply

  23. 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?

    Reply

  24. @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); 
}
    Reply

  25. 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 ?

    Reply

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

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.