Giter VIP home page Giter VIP logo

waterlee-boilerplate's Introduction

#Magento HTML5 responsive boilerplate endorse

  • Built on Foundation 5.5.2 by ZURB & Magento 1.9.1.
  • Works with Magento 1.9.1 & 1.9.2.

Update #WATERLEE on Foundation 5.5.2 for sites is here.

Create responsive Magento themes.

Built on ZURB Foundation framework, waterlee has everything you need from the start.

If you're only starting with Waterlee check out the "Getting started" article here: http://jakesharp.uservoice.com/knowledgebase/articles/245052-intro-to-waterlee

Here’s the things you’ll love.

Besides being built on HTML5, CSS3 and jQuery here's the gist of it:

Remember this is a boilerplate not a production ready theme ;)

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.

##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. http://foundation.zurb.com/docs/

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

##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 ugly but you know better than to expect a boilerplate to be good looking, right? http://waterlee.jakesharp.co

##Things you'll need to have:

##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 boilerplate, 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 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 (Foundations 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. For detailed instructions check knowledge base @ http://jakesharp.uservoice.com/

Despite our waterlee-boilerplate updates, you want to have latest foundation version, right? Do it yourself! 'foundation update' should do the trick if you install bower & foundation client. Follow these simple instructions on ZURB's website: http://foundation.zurb.com/docs/sass.html

##Usage: Run this in shell (Inside waterlee-boilerplate/skin/frontend/waterlee-boilerplate/default) and you'll get CSS injection into your browser, file watching, browser synchronisation, concatenation, minification, sourcemaps ...

$ gulp
  • In gulpfile.js you can easily switch between development and production environment.

##SCSS Organization For starters, Waterlee is based on ZURB Foundation framework 5 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/src/scss/".

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.

What's inside:

  • NEW Waterlee is rewritten in order to use existing Magento classes as much as it can so we can have less phtml files in boilerplate for easier updates to next Magento releases.
  • NEW Foundation grid is made on sass from now.
  • NEW Responsive tables. From now on, all Magento tables are responsive.
  • NEW Theme top menu extension. Find it under "JAKE SHARP WATERLEE" system settings after installation (Remember, you'll need to install the extension separately.)
  • NEW: Off Canvas menu for top-cart, 2col-left, 2col-right & 3column layouts (http://www.zurb.com/playground/off-canvas-layouts)
  • NEW: Current SubCategory menu for mobile view
  • Foundation 5 by ZURB built in (http://foundation.zurb.com/)
  • OOCSS SASS implemented (http://compass-style.org/)
  • Local XML for layout overrides
  • Implemented classes that adhere to foundation docs
  • NEW: Foundation now uses bower for easy updating from the command line
  • NEW: From now on by default, JS is loaded separately in gulpfile. Use only what you need! The same applies for importing scss files in styles.scss & _foundation.scss.
  • NEW: Implemented elevatezoom for product page images [http://www.elevateweb.co.uk/image-zoom]
  • NEW: Implemented scroll to top
  • NEW: Gulp support with gulpfile.js (Check http://gulpjs.com/ on how to use it)
  • NEW: Implemented HTML5 WYSIWYG Editor for Magento [https://www.meanbee.com/magento-extensions/meanbee-tinymce.html]
  • NEW: Implemented bxSlider for product page thumb slides [http://bxslider.com/]

##What's next:

##Licence GPLv2 (or later) - http://www.gnu.org/licenses/gpl-2.0.html Foundation by ZURB is MIT - http://opensource.org/licenses/MIT

Means Waterlee is free to use and a link back is always welcome. https://www.codeship.io/projects/09e00190-a6a7-0131-bfdd-324d295efe74/status

waterlee-boilerplate's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

waterlee-boilerplate's Issues

remove all instances of "0rem"

https://github.com/zeljkoprsa/waterlee-boilerplate/search?utf8=%E2%9C%93&q=+0rem%3B&type=Code

Why would you use such a brittle way to say "zero"?

All of these statements using 0rem units will not work on IE8.

Take a look at this fiddle for an example:
http://jsfiddle.net/austinpray/nn4c88or/

chrome
screenshot 2014-10-25 13 53 14

IE8
screenshot 2014-10-25 13 53 05

padding-left: 0rem;

and

padding-left: 0;

are exactly the same but the latter works on every browser ever. You have just caused a nightmare for anyone who needs to provide support for IE8.

If my browser support argument doesn't faze you, consider that removing these 64 instances of rem will save almost a whole ~200bytes in stylesheet filesize :)

Custom waterlee theme recommendations

I'm afraid it is not the good place for such question but i don't know where to ask ...
I want to create waterlee-boilerplate/custom theme. I'm a bit lost when it come to configure skin/frontend/waterlee-boilerplate/custom folder.

What are your recommendations in case of skin/frontend/waterlee-boilerplate/default update please ?

One solution is to copy all folders from waterlee-boilerplate/default and past them in waterlee-boilerplate/custom so we keep the same structure and this way we overwrite styles.css

Hardcoded label in header

There is hardcoded label "My account" (without translation) in app/design/frontend/waterlee-boilerplate/default/template/page/html/header.phtml on line 30.

Has anyone found a good mega menu

I'm thinking of launching this on a few sites i work on but the menu is not really the norm so looking for alternatives. I found a few responses on the foundation forums but neither one are ideal so i was just wondering if you had come across anything?

Category Thumbs

Just a question- i noticed on the demo parent categories you have thumbnails. Are those category thumbnails coded into the theme or have you added them with cms static blocks?

Invalid method Mage_Catalog_Block_Product_View_Type_Simple::displayProductStockStatus(Array (

Hello,

I have these error on my product page. I usw 1.7.0.2

Trace:
#0 app/design/frontend/waterlee-boilerplate/default/template/catalog/product/view/type/default.phtml(30): Varien_Object->__call('displayProductS...', Array)
#1 app/design/frontend/waterlee-boilerplate/default/template/catalog/product/view/type/default.phtml(30): Mage_Catalog_Block_Product_View_Type_Simple->displayProductStockStatus()
#2 app/code/core/Mage/Core/Block/Template.php(241): include('/Users/Phillip/...')
#3 app/code/core/Mage/Core/Block/Template.php(272): Mage_Core_Block_Template->fetchView('frontend/waterl...')
#4 app/code/core/Mage/Core/Block/Template.php(286): Mage_Core_Block_Template->renderView()
#5 app/code/core/Mage/Core/Block/Abstract.php(863): Mage_Core_Block_Template->_toHtml()
#6 app/code/core/Mage/Core/Block/Abstract.php(582): Mage_Core_Block_Abstract->toHtml()
#7 app/code/core/Mage/Core/Block/Abstract.php(526): Mage_Core_Block_Abstract->_getChildHtml('product_type_da...', true)
#8 app/design/frontend/waterlee-boilerplate/default/template/catalog/product/view.phtml(72): Mage_Core_Block_Abstract->getChildHtml('product_type_da...')
#9 app/code/core/Mage/Core/Block/Template.php(241): include('/Users/Phillip/...')
#10 app/code/core/Mage/Core/Block/Template.php(272): Mage_Core_Block_Template->fetchView('frontend/waterl...')
#11 app/code/core/Mage/Core/Block/Template.php(286): Mage_Core_Block_Template->renderView()
#12 app/code/core/Mage/Core/Block/Abstract.php(863): Mage_Core_Block_Template->_toHtml()
#13 app/code/core/Mage/Core/Block/Text/List.php(43): Mage_Core_Block_Abstract->toHtml()
#14 app/code/core/Mage/Core/Block/Abstract.php(863): Mage_Core_Block_Text_List->_toHtml()
#15 app/code/core/Mage/Core/Block/Abstract.php(582): Mage_Core_Block_Abstract->toHtml()
#16 app/code/core/Mage/Core/Block/Abstract.php(526): Mage_Core_Block_Abstract->_getChildHtml('content', true)
#17 app/design/frontend/waterlee-boilerplate/default/template/page/2columns-right.phtml(53): Mage_Core_Block_Abstract->getChildHtml('content')
#18 app/code/core/Mage/Core/Block/Template.php(241): include('/Users/Phillip/...')
#19 app/code/core/Mage/Core/Block/Template.php(272): Mage_Core_Block_Template->fetchView('frontend/waterl...')
#20 app/code/core/Mage/Core/Block/Template.php(286): Mage_Core_Block_Template->renderView()
#21 app/code/core/Mage/Core/Block/Abstract.php(863): Mage_Core_Block_Template->_toHtml()
#22 app/code/core/Mage/Core/Model/Layout.php(555): Mage_Core_Block_Abstract->toHtml()
#23 app/code/core/Mage/Core/Controller/Varien/Action.php(390): Mage_Core_Model_Layout->getOutput()
#24 app/code/core/Mage/Cms/Helper/Page.php(137): Mage_Core_Controller_Varien_Action->renderLayout()
#25 app/code/core/Mage/Cms/Helper/Page.php(52): Mage_Cms_Helper_Page->_renderPage(Object(Mage_Cms_IndexController), 'no-route')
#26 app/code/core/Mage/Cms/controllers/IndexController.php(75): Mage_Cms_Helper_Page->renderPage(Object(Mage_Cms_IndexController), 'no-route')
#27 app/code/core/Mage/Core/Controller/Varien/Action.php(419): Mage_Cms_IndexController->noRouteAction()
#28 app/code/core/Mage/Core/Controller/Varien/Router/Standard.php(250): Mage_Core_Controller_Varien_Action->dispatch('noRoute')
#29 app/code/core/Mage/Core/Controller/Varien/Front.php(176): Mage_Core_Controller_Varien_Router_Standard->match(Object(Mage_Core_Controller_Request_Http))
#30 app/code/core/Mage/Core/Model/App.php(354): Mage_Core_Controller_Varien_Front->dispatch()
#31 app/Mage.php(683): Mage_Core_Model_App->run(Array)
#32 index.php(87): Mage::run('', 'store')
#33 {main}

SCSS only partially combining

Hi,
I really think this is a fantastic boilerplate which is why i would like to use it with my latest project but i seem to be having problems. I'm familiar with bower and gulp so i do have some experience with these things but compass is all new to me. I'm running ruby 2.1.2 with all default required gems and receiving no errors. Installing the theme as standard (without running composer) the theme looks okay with just a broken menu but when i run "#compass watch" from "/skin/frontend/waterlee-boilerplate/default" (i presume this is the correct place to run it?) after compiling the css style is completely broken. Please see link for broken state - http://goo.gl/651hwD I cant figure out if this is my particular setup or something else? Where would you start with debugging this- sorry i'm not very experienced with compass but would really appreciate some help.

wip-2.0 - Inuit grid

This is probably somewhere in the inuit documentation but i couldn't find it..
What would would be the correct way to align the "Røyk" heading with the 6 item(s) text?

Using negative margins on .toolbar?
screen shot 2015-02-12 at 13 29 13

Do any of you guys use irc? where do you hang out? :)

Missing Gemfile?

Looks like there is a Gemfile.lock but no Gemfile. Any reason for this?

Foundation: Is foundation dying out in waterlee?

Hey,

I wonder if the foundation version of waterlee will be discontinued due to inuit implementation?
If so I'd like to ask the users if there is sound demand for future foundation support.

I'm currently working on a foundation based magento site and could imagine to contribute an updated and improved version of waterlee foundation. We may split things up to maintain the choice which version to use without relying on old code.
[edit:] also concerning a foundation 6 version in the future

2.0 without foundation suggests that foundation is no longer wished on waterlee.

Thanks for the awesome work so far! 👍 This project really opened my eyes in several ways.

Cheers

Bug top cart hover on desktop view

Thanks for the boilerplate !
Maybe this ticket is related to #40. Sorry if it's the case.
The problem is about top cart hover on desktop view.
The solution seems to be to edit data-dropdown and id as it is shown on the picture.

desktop_mini_cart_hover

error in modman file

Hi!

Your modman is not correct.
It creates the following folder structure after install:

/app/design/frontend/waterlee-boilerplate/waterlee-boilerplate/default/....

app/design/frontend/* app/design/frontend/waterlee-boilerplate

should be

app/design/frontend/waterlee-boilerplate app/design/frontend/waterlee-boilerplate

Thanks.

wip-2.0 - remove easytab

I think EasyTabs should be removed, e.g. now the latest version is 2.3.0 and waterlee's version is 1.2.2

But, we could provide the sass file in a /thirdparty folder?

I hope i can start making some PR's next week.

default magento Zoom-In-Out functionality doesn't working

It is nice image handling in waterlee-boilerplate. But I want default magento zoom-in-out functionality and I don't know if I am right but image resizing script which work while we resize screen would retire it by resizing image...can we make it possible to work with as normal and as image resizing be still there ??

Edit SCSS or Css

Congratulations, great job in this boilerplate.
I work with magento for some years, but im a beginner with Sass/Compass. To style this template, I need to edit the SCSS file, compile and upload to /css or edit directly the .CSS?

Top bar medium styles possible misconfigured?

Hey guys,

What is the story with the medium sizes for the top bar? By default they look like this:
(added black background for emphasis)
screenshot 2014-10-20 22 23 50

Why is this? Shouldn't it look like this?
screenshot 2014-10-20 22 24 27

Great work

Hi, great work. Looks good.

When are you planning to go beta?

And some questions.

  • Would this work with an ajax addto cart extension?
  • And we would also like to show all our products on the front page in a grid fashion, how can this be done?

thanks, Sean

URGENT help needed

Hello Guys,

Thanks for coming here and helping me out on this issue, which may others might also be facing.

I have developed my website on old version of Waterlee Boiler plate of Aug 13 2014
I just noticed that offcanvas for cart is not working in ipad, even in default theme on Aug13
I do not have an option to upgrade, please suggest some solution to me.

Thanks,
Mrugesh

catalog-page.scss errors upon compile

When compiling the sass files using compass.app I receive the following error:

/*
Syntax error: Undefined variable: "$h5-font-size".
on line 2 of /Volumes/_//**/**_/skin/frontend/waterlee-boilerplate/default/scss/custom/catalog-page.scss

1: /Volumes/_//**/**_/skin/frontend/waterlee-boilerplate/default/scss/custom/catalog-page.scss

Even on the repo the error is present. Not a clue why because the variables used in all other sass files work fine, just not in this one.

Error can be viewed here:
https://github.com/zeljkoprsa/waterlee-boilerplate/blob/master/skin/frontend/waterlee-boilerplate/default/css/custom/catalog-page.css

Any ideas?

Interchange prototype conflict

Hello!

First of all, I am sorry for opening this issue cause it is not since interchange has not been implemented yet. So this is really a question - have you been successful with interchange, cause in my store it does not work with prototype and for some reason just removes the img tag altogether.

I would appreciate any help on this topic!

Thank you!

data-topbar missing in header.phtml

data-topbar needs to be added to line 52 of header.phtml. Without it, the navigation menu (dropdown and mobile toggle) was not working.

<nav class="top-bar" data-topbar>

styles.css distort native magento calendar styles

Hi,

Great work on waterlee, thanks @zeljkoprsa, and all contributers to this repository.

I found style issues on frontend when I use magento native "calendar.js" with "calendar-win2k-1.css" on product page.

Calendar styles conflict with styles.css please see attachments. First screenshot is without styles.css and second screenshot is with styles.css which shows conflicts. I was unable to select date and styles are also messed up.

without-styles
with-styles

I have tried to place calendar styles after styles.css but it doesn't work as well. It works when I remove styles.css which shows in screenshot.

Please help on this issue. what should be quick fix for this ??

Thanks

Top Bar Menu Improvement

I received a few complaints after launching my new theme that the menu was too hard to use. So I modified it a bit to use accordions for subcategories and links to the category on top level categories.

You can check out the modified files here:
https://github.com/dmto/waterlee-boilerplate/blob/master/app/code/community/JakeSharp/Waterlee/Block/Topmenu.php

https://github.com/dmto/waterlee-boilerplate/blob/master/skin/frontend/waterlee-boilerplate/default/bower_components/foundation/scss/custom/_header.scss

Pic

I think this would be a great addition to the boilerplate if someone could improve upon it.

jquery path needs to be changed in local.xml

the path to jquery in the local.xml needs to be changed from:

bower_components/jquery/jquery.min.js

to:

bower_components/jquery/dist/jquery.min.js

if you are going to update foundation

composer install not working

Hi

I was trying to install waterlee using "composer" I have faced this error.

Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - The requested package magento-hackathon/magento-composer-installer could not be found in any version, there may be a typo in the package name.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.