Build your responsive Magento store faster.

Built on ZURB Foundation framework v(5.3).
Checkout the DEMO.

Download

Here’s the things you’ll love.

Built on HTML5, CSS3 and jQuery here's the gist of it:  

60e99974-e829-4dc1-accd-daf1e7fdf1c1_9-icon2-brush.png

Create Rapidly

Whether you have the design ready or design directly in the browser, best if combined, you're saving time and effort using style patterns for layout and components already built in.

3ac4f3ae-7b57-4c26-930b-fbaed24601b3_9-icon2-chat.png

Get everyone on board

When we all speak the same lingo it's easier to communicate inside the design/development process to achieve the best result, hence the ZURB Foundation 5 Documentation.

5b9ab216-8502-4c2a-9d0d-13f712a8d7c9_9-icon2-drops.png

Benefit from OOCSS

CSS is notorious for being easily turned into pile of unreadable code. Cut that at the roots with organizing your SCSS files separately related to the component, template or page view. 

a42359b6-c5c1-4aab-914c-968266ab740e_9-icon2-eye.png

Extensive Documentation

Get everyone on board with the Front-end implementation using the universal CSS classes, design patterns and workflow.  

da9ffb16-4e62-4c4e-aa8e-33932f9ccf71_9-icon2-phone.png

Responsive from the start

Adapting the site to the plethora of devices is a battle inside itself. Win it constantly by using built-in classes and media queries and build upon that with your own customized code.

Checkout the demo

It's pretty plain looking but you know better than to expect a boilerplate to be good looking, right?

http://waterlee.jakesharp.co/demo

Installation & Use

Installation

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. 

520904d8501977a06a0006dc_Screen%20Shot%202013-08-12%20at%205.51.57%20PM.png

SCSS Organization

For starters, Waterlee is based on ZURB Foundation framework 5.0 which relies on mobile first approach. This means that all of the HTML classes for layout at your disposal are mobile-first so keep that in mind while developing. There is a folder named "custom" under the "/skin/frontend/waterlee-boilerplate/default/SCSS/".

520906c51e39ef1f4600060b_Screen%20Shot%202013-08-12%20at%205.59.39%20PM.png


The "custom" folder is already configured following the OOCSS principles of separating as many styling areas such as: page views, global components etc. All of the files are then imported into one main style.scss. Feel free to adapt it to your needs or not use it at all. Our recommendation is that you build upon it, suggest improvements for organization or just first take it for a spin to see the benefits.

It's refreshing to have the that final SCSS organized by maintaining focus using separate .scss files where you can easily find redundant code. If you get lost you can always find that HTML class using the find function in your IDE.

Here' how the main "style.scss" looks like:

52090817501977a06a000714_Screen%20Shot%202013-08-12%20at%206.06.01%20PM.png