Author: Jason Alvis
Author Email: [email protected]
Version: 0.0.1
License: Free General Public License (GPL)
Note: This boilerplate is **NOT** complete, it is an ongoing project and it will take time to finish. The CSS has been written from scratch and I am slowly styling section by section as I go along, sit tight. If your expecting a fully fledged finished framework this is not for you.
A demo site will be added in due course. The CSS has been written completely from scratch and is component based meaning each area is isolated making it highly re-useable. It is based of the HTML5 boilerplate and also includes the latest version of Normalize. Magento by default bundles a handful of xml blocks that are rarely used and only causes bloat, so I removed them from within local.xml.
Note: They can be added back in if you need them by simply removing the line of code from local.xml. Magento by default bundles a handful of JS files that are rarely used and only causes bloat/performance issues, so I removed them from within local.xml.
Note: They can be added back in if you need them by simply removing the line of code from local.xml. jQuery v1.10.2 minified in no conflict mode is included as default, you can change this to include a more up to date version if you wish. It gets included at the very bottom of the dom just like it should be.
This improves performance issues particularly on mobile devices as when a browser hits a script tag it actually waits for that entire asset to download before it proceeds, if it's in the head your going to block everything that renders visually on your page from starting. Grunt is all setup and ready to go. It comes with the following tasks:
Sprite Generation
LibSass
JSHint
Concat
Uglify
Watch
magento > public_html > app
magento > public_html > skin
Then you will need to change the package name in the admin panel to render the new package you have just installed (system > configuration > design > package). First off I'm going to assume you have successfully installed Node.js and Grunt, if you haven't you need to do this first. First install Node.js then install Grunt. Once you've done that proceed below.
cd into the skin theme directory like so
cd {site_path}/skin/frontend/magentoboilerplate/default
Install the project dependencies
npm install
Make changes to your files (sass and js) then you'll want to run grunt to initiate the tasks
grunt
Take it a step further and install the browser add-on LiveReload. With LiveReload you won’t have to go back to your browser and refresh the page. Page refreshes happen automatically and in the case of CSS, new styles are injected without a page refresh.