My Zurb Responsive Temptation Template

Ok friends, I tried to play for a while with Zurb Framework . Here is what I've done till now , maybe not a big deal but I hope is at least interesting :-)

http://bit.ly/10VqN3h

Any comments , criticism , idea , review will be appreciated .

PS: sorry for non english parts .

Well ???

I'm impressed with it, Zurb isn't something I'm familiar with though, is Zurb a template or a commercial mod or something? A little more detail behind your project would certainly help people to understand and show interest.

Considerng how quiet it's been around here , I started to believe that is was so lame that it wasn't worth the effort to say something about it .

solo_400:

Considerng how quiet it's been around here , I started to believe that is was so lame that it wasn't worth the effort to say something about it .

lol, no not at all, maybe it's the weekend lull.
So, details, how, what, when, where, why? What can you tell me about it? Was it simple? Is it a mod or can you share your template files assuming it's not a commercial template?

It uses the Zurb Foundation CSS framework for making responsive templates.

Oops, here is the correct link:
http://www.zen-cart.com/showthread.php?200868-has-anyone-tried-using-a-CSS-framework-on-a-ZC-site&p=1203582#post1203582

solo_400:

Considerng how quiet it's been around here , I started to believe that is was so lame that it wasn't worth the effort to say something about it .

Not true! I looked at it the other day, was impressed, but didn't leave a comment. I am impressed enough to also wonder if it will be available.

I like it! Looks great on my laptop, will check it out on a tablet and smartphone on Monday. I like the template, is that your own design? One suggestion is to install a lightbox for the larger product images. I really like how the product images fade in when loading a category page, pretty cool. Well done! I hope you can share how you have achieved this, I would love to try it out and this is a perfect time since I am about to overhaul our main site.

There are a lot of html errors, you might want to work on that. Your homepage has 88 errors. And 32 css errors.

I'm glad you like it , design is 100% my own .
Let's say I spent 90% of time to integrate the framework with zencart software and less for design . Once integration done design is not complicated if you know what you want . You can easily choose what to see on mobile devices and where to place components .
At the moment is compatible with last version of Zurb Framework ( 4.1.1 ) and Zencart 1.5.1 . I had also to change few core files ( don't know if possible without it ) and adding some new functions in order to convert some UX elements .

Ps: I solved 90% of html errors , and I will install lightbox . How's work on your tablet/smartphone ?

Yes, you have really gotten rid of almost all html errors, great job! I only see three errors left on homepage and 10 on product page, which I think more than acceptable.

When I reduce my screen size to see site in responsive mode I don't see the drop-down menu to go from category to category. Do you?

Otherwise, I think your template is ready (although I have not tried registering and going through checkout.)

Again, great job!

In smaller screens, the categories go into a single button which operates by javascript... so you can only look at the menu if you have js enabled. It would be nice to be able to have an HTML5 menu that can work without js, or an indication that you must click to see the menu (hovering won't do it).

gjh42:

In smaller screens, the categories go into a single button which operates by javascript... so you can only look at the menu if you have js enabled.** It would be nice to be able to have an HTML5 menu that can work without js, or an indication that you must click to see the menu (hovering won't do it)**.I agree:yes:

There is no such thing as "hover" on touchscreen devices. It's "desktop" device mouse behavior that has never been "translated" to touchscreen devices... at least as of today.. but heck it's technology.. who knows.. that certainly could change in the future..

There is no such thing as "hover" on touchscreen devices. That occurred to me just before I refreshed the thread to see your post:) It is a valid point for touchscreens... are most/all devices with screens narrow enough to trigger the change touchscreen? I have my doubts for the larger end of this range. It is triggered just by the menu items not all fitting in one row. I think better would be to make a responsive layout that allows the menu to wrap or shrink until true touchscreen width (whatever that is) is reached. What are the largest (pixel count) touchscreens in common use?

Today I had the chance to see it on ipad .. damn , is really working :shocking:

solo_400:

Today I had the chance to see it on ipad .. damn , is really working :shocking:
Don't forget to test on Android devices too (phones and tablets) as well as the iPhone. Don't assume the iPad experience will be the same..

solo_400:

Today I had the chance to see it on ipad .. damn , is really working :shocking:

Are you planning on sharing please? I'd really love to try your template out.

picandnix:

Are you planning on sharing please? I'd really love to try your template out.

I have worked 4 months at this project , let me think what to do next .

What do you think about responsive live search I've just added ?

picandnix:

are you planning on sharing please? I'd really love to try your template out.
+10000 :smile:

solo_400:

What do you think about responsive live search I've just added ?
I like it although the result window is showing up on the left side of the page on my 17" laptop which could be a little confusing. It might be better placed directly below the search box. I have a similar module that uses ajax, is that what this is using?