The future: Bootstrap or Foundation? And why?

[DrByte]

Should the next version of Zen Cart use a CSS/grid framework?

PLEASE ANSWER THE FOLLOWING QUESTIONS .... and talk about both the storefront template AND the Admin:

a) Bootstrap vs Foundation vs None vs Other (which one?)

b) WHY YOU CHOSE THAT ANSWER

c) Are you answering as a storeowner, or as a programmer?



We're interested in understanding what's best for our community and would like your input on what will help make Zen Cart better for everyone.

[mprough]

a) Bootstrap vs Foundation vs None vs Other (which)
Bootstrap

b) WHY YOU CHOSE THAT ANSWER

1. I don't want huge monitors, netbooks and hundreds of other devices for which foundation cannot match a media query to getting my straight mobile version as a fail safe... That's not safe at all, just fail.
2. Bootstrap has better community support
3. Bootstrap is more consistent, fundamentally sound and well supported across the boards
4. Bootstrap is easily to manipulate and isn't at all the cookie cutter approach that it used to be
5. Bootstrap has SASS
6. Bootstrap has on the fly sizing without artifacts and funkiness
7. Version support is better and faster historically with Bootstrap

Foundation
Last Two Versions of:
Chrome
Firefox
Safari
Opera
Mobile Safari
IE Mobile
IE 9+
Android Browser 2.3+

Bootstrap
Mobile

Chrome - Android and iOS
Firefox - Android
Safari - iOS
Android Browser & WebView - Android

Desktop

Chrome - Mac/Win
Firefox - Mac/Win
IE9+ - Win (IE9 limitations)
Opera - Mac/Win
Safari - Mac

“Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 8 and below, though they are not officially supported.” -Bootstrap 4 Docs

8. Foundation is behind the curve in JS updating and development
9. People understand pixels, rems are new and difficult for newer users
10. Since Zen Cart is open source and Bootstrap is substantially more popular talent for designing templates and styling elements will be easier and cheaper to find
11. The text to code ratio is off the hook high on Foundation sites
12. 100k in a minified css file for Bootstrap and 135k for Foundation (plus their respective js files if necessary). Bootstrap is faster
13. MaxCDN vs Yahoo a crap Microsoft offering by Foundation
14. Foundations grid system, while more robust takes a great deal of customization to achieve the look desired


c) Are you answering as a storeowner, or as a programmer?
Both

~Melanie

[rbarbour]

IMO,

Q. Should the next version of Zen Cart use a CSS/grid framework?
A. Absolutely, but the core framework should be separate from the "enabled by default" template.

Q. Bootstrap vs Foundation vs None vs Other (which)?
A. The core should be Zen Cart Specific (Other) and the "enabled by default" template should be based on a framework (really doesn't matter) but should NOT extend to the core.

Q. WHY YOU CHOSE THAT ANSWER?
A. The core needs to be global and consistent so any framework or custom built template can be added without framework dependency. The "enabled by default" template needs to be a simple and attractive out-of-box open shop make money solution for the novice.

Q. Are you answering as a storeowner, or as a programmer?
A. Both

[mesnitu]

a) Bootstrap vs Foundation vs None vs Other (which)
Other. which ? whatever I want.

b) WHY YOU CHOSE THAT ANSWER
I dont' like to be trap to anything, and web development is changing with a lot of speed. Today it's good, tomorrow who know's.
But it should be prepare for sass and proper html5 and separate the code from styling. A lot of stuff is still inside classes, things that I should not mess for future updates.

c) Are you answering as a storeowner, or as a programmer?
Actually none.

[explorer1979]

a) Bootstrap vs Foundation vs None vs Other (which one?)
Bootstrap

b) WHY YOU CHOSE THAT ANSWER
1. I bought some modern template for my shop, they using Bootstrap 3
http://themeforest.net/category/ecommerce/zen-cart

2. For a beginner skill programmer like me, I can google and see example from W3School, so I think it is easier for general non-IT Programmer family user for changing as need.

3. On using framework, better small size and quick, also not need too much depend from other etc.

c) Are you answering as a storeowner, or as a programmer?
Mmmmmmmm, Both, but I am a beginner skill programmer (Still hard work learning, and Zen Cart give me many, Thank you all who make this :-) )


P.S.
About mprough's talking CDN, hope ZC's development can consider CHINA, this is a bit special place on Earth, CHINA blcoked many web site, such as Google, so I can't using Goolge reCAPTHCHA this great module (VPN CHINA IP tested), so I think if some framework using CDN, and CHINA can't access is a bad idea. Just my thinking.
And I had tested using jQuery CDN that by Google from CHINA also blocked :-(

[Dayo]

Sorry not replying exactly as per the requested format. Just laying down some thoughts.

Responsive Grids are the way to go. For mass market appeal, it has to be Bootstrap over Foundation. In terms of what each does, I don't believe there is any real difference.

If it was a personal decision however, I would would choose yahoo's pure.css myself (http://purecss.io/).
It is light, very non opinionated and will easily fit into a project without trying to take it over as the 800 ton Bootstrap Gorilla will do. It also doesn't depend on JQuery or try to do everything. It just gives you what you need for a responsive page. You can then load JQuery, either v1.x for legacy browser support or v2.x to ride the new wave, and any of the gazillion plugins to do whatever else you want to do.

With specific regard to Bootstrap and Foundation, beyond the selection of which of the two to go with, there is one of which version to go for.

Bootstrap is currently at v3 but are working on v4 which is currently at Alpha 2 stage.
Go for the established v3 or develop Alphaware (ZC 1.6.0) with Alphaware? There are obvious risks but also obvious benefits, not least since this will mean, depending on release timeframes, v1.6.0 would be current when released. I would be tempted to plumb for BS4 given that it is running very well but then, I am not the one people will be running to for support lol.
BS3 uses JQuery 1.x while BS4 requires v2.x.

Foundation is currently at v6.2.
Go for the battle tested but now discarded F5.x or the new, and in reality, general equivalent of BS4 in terms of its real development stage, F6.x? F6.0 and F6.1 were Alphaware, or Betaware at best and F6.2 is Betaware as well or should have maybe been labelled a Release Candidate. They are moving forward and may be okay to ride with ZURB on this.
F5.x uses JQuery 1.x while F6.x requires v2.x.

After all that, I would still go for purecss myself. Nothing much has happened with it for a while but then it isn't trying to throw the kitchen sink. Practically however, and since pure may well be dead and since it is never a good idea to tie a project such as this to a dead dependency, (different issue from a person like me doing one off websites) it has to be considered that Bootstrap is very prevalent and as someone already pointed out, many of the premium stuff around already use this. I am not sure how much hacking they are having to do and it might be better to just go with the flow and facilitate these.

If going for Bootstrap, I would pick BS4 as the I would guess we would be looking at a release for v1.6.0 in 2016 Q4 or 2017 perhaps. If running a store on v1.5.4 for instance, I would be reluctant to upgrade to v1.5.5 if v1.6.0 is just round the corner.
Given that v1.5.5 seems to be a fairly major update despite the minor dot point change, then perhaps v1.6.0 could be even more in depth with suitable time taken and in reality, I would think you must already be considering branding it as v2.0. The change to using a grid framework alone is big enough to warrant this I would have thought. Whatever other stuff had been pencilled in for a v2.0 would probably fit into a v2.1.

Anyway, interesting times for the project and best of luck!

[RodG]

a) Bootstrap vs Foundation vs None vs Other (which one?)

Hard to say. I've only really had experience with Bootstrap and 'none'.

I have mixed feelings about bootstrap - on the one hand it does a lot of things that would normally need to be 'hand crafted' (and then some), bit on the other hand, it still needs just as many 'tweaks' to customise for any given store as any other method.

b) WHY YOU CHOSE THAT ANSWER

'cos I don't have a better answer :-)

c) Are you answering as a storeowner, or as a programmer?

Programmer.

IMO, With only the odd exception, very few store owners would know or care whats going on 'under the hood', so on that basis I see this as a bit of a pointless question.

My question to you is why is this even being considered/discussed (in relation to the ZenCart core code). Surely this is more the realm of those that develop ZenCart templates/themes, so shouldn't/wouldn't this then become a personal choice for the individual developers?

I can understand/appreciate that ZenCart needs a default template (that will be based on one or none of the suggestions), but surely it doesn't go any 'deeper' than that. Or am I missing/overlooking something here?

Cheers
RodG

[DivaVocals]

IMO,

Q. Should the next version of Zen Cart use a CSS/grid framework?
A. Absolutely, but the core framework should be separate from the "enabled by default" template.

Q. Bootstrap vs Foundation vs None vs Other (which)?
A. The core should be Zen Cart Specific (Other) and the "enabled by default" template should be based on a framework (really doesn't matter) but should NOT extend to the core.

Q. WHY YOU CHOSE THAT ANSWER?
A. The core needs to be global and consistent so any framework or custom built template can be added without framework dependency. The "enabled by default" template needs to be a simple and attractive out-of-box open shop make money solution for the novice.

Q. Are you answering as a storeowner, or as a programmer?
A. Both

I have nothing NEW to offer this discussion because my thoughts mirror this entire statement. I will add this though, I think that Bootstrap or Foundation frameworks should be a CHOICE and perhaps Zen Cart could consider following the path of some other CMS's codebases whereas there are Bootstrap or Foundation plugins which add this functionality versus bundling these frameworks into the codebase.. Now if these "official" plugins were even maintained by Zen Cart this would prevent the clusterf**k of issues that came with plugin and template authors all bundling in conflicting versions of jQuery with their contributions. If the Foundation or Bootstrap plugins were official plugins, then template or plugin authors could then write their Foundation or Bootstrap dependent code based on the official supported modules to ensure they maintain compatibility.

Finally there's this article https://www.gavick.com/blog/mixing-j...isnt-good-idea. While this article is from 2014 and is specific to Bootstrap and Joomla, the reasoning in this article to not bundle in Bootstrap could apply just as easily to any CMS including Zen Cart, or WordPress, or Drupal, or Presta Cart, or (shudder) OsCommerce..

Here's the highlights:

At first glance, it seems like there aren’t any negatives; Bootstrap looks great, it’s easy to use, supports CSS preprocessors like SASS and LESS, provides cross-browser solutions and it’s free; released under the MIT license. But if you take a moment to look closer, you might notice something interesting; no popular CMS uses this kind of frontend development framework in their core, because ultimately it seems that it causes more problems that it fixes.

Bootstrap’s weight

Bootstrap’s minified CSS weighs around 130 KB, which is quite a lot for what is essentially just base elements and grid structure. If you’re actually going to start using Bootstrap in a template, then you’ll need to customize it. By customize, we mean that you’ll need to override styles since it is not possible to modify everything using on LESS variables, which justs adds even more lines to the final CSS code. Then, if you want to be fully compatible with Joomla! you should load the Bootstrap library from the media/jui directory, which means that you will use the full-fat Bootstrap styles even when you don’t need most of them. To add insult to injury, they are loaded on every single page reload, and you’re not even using them!
Bootstrap isn’t just CSS, it’s JavaScript too, which adds an extra 29KB to the overall weight. All in all, you’re looking at a bare minimum of 160 KB to create a template using the default Joomla! Bootstrap library. Now add in your custom styles and override rules, and your CSS may be too heavy to lift, as it were.

Conflicts

Incompatibility between Bootstrap v.2.3.2 and v.3 is not the only conflict that can cause issues. When a template provider is logical and tries to keep their code clean by avoiding the loading of unnecessary CSS, the only viable solution with Bootstrap is to include their own Bootstrap build with the template. However, this in itself can also cause its own problems. First of all, third-party extension developers don’t often check whether Bootstrap is already loaded, which that there code will load the library from the JUI too, resulting in Bootstrap being loaded twice which creates a huge amount of CSS conflicts.


This kind of confusion is prevalent; since Bootstrap isn’t a requirement of Joomla, responsible developers that wish to use it must second-guess every other template or extension developer; “Will they use Bootstrap too?”, “Can I trust them to include it?”, “If not, can I trust them to check it’s not loaded before loading it?”. It becomes a guessing game.


Since Joomla doesn’t force Bootstrap (and they shouldn’t), then the potential for these issues arising increases. But would forcing Bootstrap help at all? A CMS needs to be flexible, and users should be able to choose from the many frameworks available to find one that works for them; taking away that choice limits Joomla and its users.

For the life of me, I do not understand why anyone sane would want to force Bootstrap into a CMS without the option to easily disable it. I agree with those who say Joomla should have simply had a small, tightly defined core of CSS definitions. Those core definitions would be the ones needed for the CORE extensions (i.e., com_content, modules, etc. ), both front and back, as well as for templates to hook into should developers choose to. The CSS would be unique to Joomla, giving Joomla developers true control over the system.

Bootstrap could be packed in the core as an OPTIONAL plugin that could be enabled should a developer choose to. Other CSS/frontend frameworks could similarly be added as per the needs of each project. That way, third-party packages like Bootstrap could truly be optional - meaning that disabling them does not destroy core functionality. If a third-party framework gets updated, then no problem - because it is not core. It becomes a matter of (in)convenience, rather than a monumental problem.

[DrByte]

My question to you is why is this even being considered/discussed (in relation to the ZenCart core code). Surely this is more the realm of those that develop ZenCart templates/themes, so shouldn't/wouldn't this then become a personal choice for the individual developers?

Actually, the original thought behind the post was more admin-related.
But everyone's replied in the context of the storefront template.


That said, the majority of thoughts shared here related to storefront template are similar to my own opinions.
I'm a bit amazed at the very strong language expressed by so many about wanting the front-end template to be completely unopinionated by any framework. I did ask for opinions ... just surprised at how "passionate" those opinions actually are.


And yet I don't feel we've collected any usable data here with respect to how we integrate tooling for the Admin side. I think we'll just pick a tool we're willing to work with and go from there.

[DivaVocals]

Actually, the original thought behind the post was more admin-related.
But everyone's replied in the context of the storefront template.


That said, the majority of thoughts shared here related to storefront template are similar to my own opinions.
I'm a bit amazed at the very strong language expressed by so many about wanting the front-end template to be completely unopinionated by any framework. I did ask for opinions ... just surprised at how "passionate" those opinions actually are.


And yet I don't feel we've collected any usable data here with respect to how we integrate tooling for the Admin side. I think we'll just pick a tool we're willing to work with and go from there.

Fair enough.. and I admit that my response just followed along with the tide.. :)

• Front-End: See my thoughts above :)
• Admin-Side: I get it and I do see integration of these frameworks into the admin as a separate deal.. As I stated in the Git discussion, no REAL preference here.. I had concerns that the 1.6 codebase was integrated with Foundation, while there are PRs/commits for integrating Bootstrap into v1.5.5 admin. So as I stated in the Git covo if I HAD to make a choice, I vote for Bootstrap.. WHY?? Because it is the most popular of the two frameworks, so that would be my choice for that reason.. (yep sometimes popularity IS a good enough reason.. lol) Truly I think it's MORE important to pick ONE framework for the admin and stick with it.. If the direction is NOW to use Bootstrap, then it needs to be made clear that the v1.6.0 admin will ALSO change to replace Foundation with Bootstrap.