has anyone tried using a CSS framework on a ZC site??

I'm interested in trying Zurb Foundation 3.x on a ZC site and don't think it will work well due to ZC's antiquated codebase...

I hope I'm wrong...has anyone tried this?? or another CSS framework (e.g. Bootstrap, Skeleton, Less Framework, etc.)??

What were your experiences?? I'm specifically talking on 1.5.x ZC.

Thank you, Tom

That looks to be a design foundation and as ZenCart already is designed has little value

sam sena and zen4me templates are basically the same, based on twitter bootstrap

i bought the zen4me one on faith/trust etc. and it's not well done:

1. very old bootstrap version
2. javascript is loaded at top of page, had to move it all into tpl_footer.php
3. still requires a ton of work to configure, customize, etc.
4. has all the weaknesses of bootstrap
5. not well documented, tons of work to figure out what's changed etc.

if I had more time I would take the zen4me template I have and migrate it all to Zurb Foundation, which is far better and easier to work with than bootstrap...bootstrap is very VERY hard to customize or override, zurb foundation is the complete opposite, very EASY to override it, much of it you don't have to override...

another limitation/problem is ZC's excessively over-complicated design of frequently having to work with 3-4 different files to modify one page (template, module, page, function, language, etc.)

OH!! and bootstrap totally lacks responsive tables that look good on phones, zurb foundation has this covered...

HTH Tom

kobra:

That looks to be a design foundation and as ZenCart already is designed has little value

I would not call ZC "designed" even though I know you are correct -- it has HUGE legacy code problems standing in its way, it should be RE-designed from scratch IMNSHO!! :) :)

Thank you, Tom

V2.0 IS being redesigned/recoded to OOP standards. Meanwhile, the current codebase has had to be maintained and upgraded for security while moving in the direction of modern code as much as possible. V1.6.0 is planned to be released as soon as possible, featuring a redesigned responsive template, which may improve some of the issues you have. It is not likely to fundamentally change the file structure, though.

gjh42:

V2.0 IS being redesigned/recoded to OOP standards. Meanwhile, the current codebase has had to be maintained and upgraded for security while moving in the direction of modern code as much as possible. V1.6.0 is planned to be released as soon as possible, featuring a redesigned responsive template, which may improve some of the issues you have. It is not likely to fundamentally change the file structure, though.

Thank you for the update...my sincere hope is that the ZC team did not try to rebuild the wheel and make a whole new responsive system for 1.6.x and beyond...I heartily recommend Zurb Foundation, 100,000 times better than Bootstrap and much easier for people to work with, the new 4.x version coming out in Q1 2013 is mobile-FIRST, which would GREATLY benefit Zen Cart's uptake and popularity etc.

Thank you, Tom

Looking a bit at Zurb, it seems to fundamentally rely on adding class tags to elements to get styling, which is the opposite of what a mass-user-base platform like Zen Cart should do. It is hard-coding design at the platform level, requiring PHP files to be edited for many styling changes, instead of providing semantic class/id tags that can be applied by every user in their own stylesheet without touching PHP files. Granted, there are plenty of inline styles or style-specific classes coded into the current codebase, largely as legacy elements. Many of those were weeded out in v1.3.x in an attempt to move toward stylesheet control. This was almost a radical move six years ago:)

Thank you for your comments and perspective...
I think no matter what form the new CSS takes, editing PHP files and the like is unavoidable.
However, with any such framework, the base CSS is always over-rideable.
So if something is styled a certain way in Zurb Foundation or Bootstrap, it's overridden by re-declaring it in a second custom CSS file which contains only what one wants to override. This is like template files in Zen Cart, and reduces the issues of 'hard-coding' things, and in ZC zillions of things are STILL hard-coded. :)
The very beginning of ZF or TWB standard CSS always contains something like normalize.css to get everything evened out a-cross browsers, then it contains specific styles for buttons or other items.
Both TW and ZF provide online CSS customizers, they're built on Less and Sass respectively.
So if a table background is coded 'gray' in the standard TW or ZF CSS and you want it blue, you redeclare this in your custom CSS, which is also where all the ZC CSS would be placed, and is placed for the template(s) that I know of that are built from Bootstrap (main weakness: poor responsive tables on phones, very very hard to do, essential for e-commerce like Zen Cart).
As I've said before I wish I had enough time to redo ZC presentation with Zurb Foundation CSS, much of the existing ZC styles would be kept, not removed, just redone with new specs etc. -- but I don't so I'm muddling along with a Bootstrap template that I do know how to appropriately modify etc. Bootstrap is I admit perhaps easier to adapt to Zen Cart, but I still like Zurb Foundation better.
Thank you, Tom

Yes, certain aspects pf layout (principally display order) can only really be changed in a dynamic system by editing PHP files to output one element before or after another, but with semantic class/id tags that are NOT used as inherent clues to the styling, the stock stylesheet can give default styling that is required for basic layout of each element, and this default can be altered for a different template. This should be better than restyling and overriding an already styled element, avoiding a certain amount of CSS processing (how much this matters, I don't know, as I am not privy to the inner workings of browser CSS mechanics).

A whole lot of layout and styling can be done with stock ZC template files, simply changing the stylesheet. I think it is better for the user to only edit one file (stylesheet.css) than make small edits in many dozens of PHP files. Most end users are not going to be comfortable or safe in trying to edit numerous PHP files, when a misplaced character can bring down a whole page.

Some of my mods (involving edited PHP files) principally consist of adding useful class/id "handles" to existing elements so the end user can easily modify the layout in ways that the stock template does not allow.

I think the problem here is defining what a framework is. One could argue that the standard CSS that comes with Zen Cart is a framework, as it defines the base css elements that template authors can work from.

As such, whether you are talking about Twitter Bootstrap or Zurb Foundation, they provide a similar 'stock' of usable css selector defintions, which your project can then build upon.

With both TWB and Foundation, the documentation says nothing about your coding style. The examples they give are not meant to suggest a coding style. What they do is present a way of 'prototyping' a layout quickly using the defaults they provide.

There is nothing to stop you creating semantic id's/classes for your final layout based on the 'primitives' they provide.

wilt:

I think the problem here is defining what a framework is. One could argue that the standard CSS that comes with Zen Cart is a framework, as it defines the base css elements that template authors can work from.

As such, whether you are talking about Twitter Bootstrap or Zurb Foundation, they provide a similar 'stock' of usable css selector defintions, which your project can then build upon.

With both TWB and Foundation, the documentation says nothing about your coding style. The examples they give are not meant to suggest a coding style. What they do is present a way of 'prototyping' a layout quickly using the defaults they provide.

There is nothing to stop you creating semantic id's/classes for your final layout based on the 'primitives' they provide.

Good points. :) Thank you.

One of the big advantages of TWB or ZF is they've done a lot of the hard work of figuring out most if not many cross-browser issues, figuring out how to make things properly responsive, etc. etc. -- which are not easy or trivial problems to solve.

They also ensure a consistent styling which can be over-ridden in a custom stylesheet which would contain all the specific desired Zen Cart styles, most of which many people change anyway.

And the Zen Cart ids/classes can be modified using styles from TWB or ZF or any other similar system.

Thank you, Tom

I have worked at a Zurb template for months (upgraded few weeks ago to last version , 4 ) , not finished but a lot done . hope to find the time to upload it on a test domain and ask you for a review . I'm thinking also to donate it to comunity in order to be maintained (if possible ) .

solo_400:

I have worked at a Zurb template for months (upgraded few weeks ago to last version , 4 ) , not finished but a lot done . hope to find the time to upload it on a test domain and ask you for a review . I'm thinking also to donate it to comunity in order to be maintained (if possible ) .

Zurb 4 is quite excellent, a lot easier to work with IMO than Bootstrap.
Be glad to test etc., PM me and hopefully I'll get the PM etc. though I now have only one ZC site running...
Hopefully they use a real CSS framework with 1.6 and 2.0 if they are released before the heat death of the universe occurs. :) :)

Zurb was love at first sight .
Anyway , making Zencart dependency by a Framework ( not controlled by Zencart team ) is a taft decision .. I would think twice before decide such move .

I hope this weekend will be possible to show my Zurb work ( don't expect to see a masterpiece :-) )

Like I said : http://www.zen-cart.com/showthread.php?208147-My-Zurb-Responsive-Temptation-Template