Our Magento Responsive Theme gets an update!

Waterlee theme is updated with last version of Foundation by ZURB (v5.5.2) and built on Magento 1.9 (works with 1.9.0.0. – 1.9.2.1).

One thing to have in mind, this is not production ready theme. This is a starter theme and it’s rough. It shoud be looked as a tool for rapid Magento responsive theme development and project starting point. So to sum things up, you will get tools and functionalities which will help you while you develop, but project dependent things such as design, ux and the rest are waiting for you!

Here is the list of updates and what you will actually get with this theme

• Theme is rewritten in order to use existing Magento classes as much as possible, which means more fallbacks to base phtml files for easier updates to next Magento releases.
• Foundation grid is made on Sass from now.
• Better usage of Foundation settings variables.
• Implemented responsive tables.
• Updated offcanvas for top-cart, 2col-left, 2col-right & 3column layouts.
• Source js and scss folders are moved to src folder.
• Flexslider is replaced with Bxslider.
• Support for targeting specific browser if you need to (_browser.scss).
• Some product image zoom fixes.
• easyResponsiveTabs are removed because of TM easyTabs extension.
• Updated gulpfile.js, package.json & bower.json. A new version of BrowserSync has weinre support!!! More details on Gulp with BrowserSync and how to use them with Magento can be found here.
• Some frontend fixes for related, upsell & crosssell products.

Check out Waterlee demo.

How to install Waterlee theme

Things you’ll need to have

• Modman
• NodeJS – download & install
• Gulp $ npm install -g gulp
• Bower $ npm install -g bower

Installation

• Run $ modman init in magento root dir. Modman creates this way .modman folder in which you will have your modules installed.
• Install modules with modman that you want.
• We guess there is possibility that you want to install our new theme, so you’ll need to type something like this: $ modman clone waterlee-boilerplate https://github.com/zeljkoprsa/waterlee-boilerplate.git
• You’ll also want TMeasytabs installed because you’ll probably want to use it on Magento product page: $ modman clone easytabs https://github.com/tmhub/easytabs.git
• To make things work with modman, you need to have symlinks turned on. This option is located in Magento admin > sys > config > advanced > developer > Template Settings.
• Inside the waterlee-boilerplate/skin/frontend/waterlee-boilerplate/default run $ npm install to install node_modules locally.
• Run $ bower install to install bower_components (Foundation with it’s dependencies and the rest…)

Once you install the Waterlee package and assuming you already installed the “Jake Sharp” extension used for the main category menu which is packed within the theme package, go to your Magento administration backend and look for “Jake Sharp” theme settings under “System -> Configuration | Configuration -> JAKESHARP WATERLEE -> Theme Settings -> Enable” to enable the theme’s menu.

If you are starting a project with older Magento versions ( < 1.9 ), here is our previous version of Waterlee on a wb-1.8 branch.