UI components standardization

Slightly off topic, but there is a free single-file, PHP-based Visual Online CSS editor developed by a group of website developers called bluePen. I played with it a bit with good success and have not had the chance to use it extensively to test for bugs and such. Would appreciate any problem-related feedback from others who have a chance to use it more extensively. The url is below

http://bluepeneditor.com/

awesome tool! tks for sharin’!

:)

Hi scoob… I’m not sure about the original intentions of adding this level of CSS support in 1.x and it makes me wonder if it really should be in the framework. In reading this thread, the thought struck me more than once that what may really be needed is a Layout Designer module and a wrapper to run the editor as a widget. Coupled with the above CSS Editor and a user’s choice of HTML editors, this might be a better solution and should eliminate the need to incorporate a CSS platform in the core framework. A module also provides a replaceable solution to this need, allowing other developers to build there own competing solutions.

How would you get the two editors to communicate, possibly provide some drag and drop support for applying styles, and provide other inter-component communication might be better solved with 2.0 core development, perhaps by developing an event-driven macro language, allowing the two editors to communicate based on the publish and subscribe pattern (observer and observable).

I’m currently converting and refactoring much of code for a lightweight portal originally designed to run on top of CodeIgniter. The Yii version of this portal is going to be the underlying foundation for my future Yii projects, including five large modules developed for other frameworks that I plan to run on top of the portal. The latter four of the five modules are layout intensive and have options allowing the user to select canned layouts to meet their needs. It would be nice to provide users the option of creating their own layouts, edit existing layouts, tweak them as they find problems, and also perform similar operations with themes.

There were several remarks earlier about Foundation or Bootstrap not supporting this and that. Well my friends, the solution to this in line with the designer module above is to refactor many of the existing widgets as portlets (menus, submenus, toolbars, breadcrumb, login, related (content, topics, products, etc), popular (downloads, content, posts, etc.), random (images, products, etc.), tag clouds, weather, whos online, counters, and other such widgets. This allows them to be used in conjunction with any layout by associating collections of portlets with theme or layout regions (containers) via menu items. Then a user will see a specific set of portlets when a specific layout or theme appears and another set when a new layout is displayed. I’m working in this direction with my portal project and hope to start passing on some extensions soon.

I would much rather see Qiang, Wei and the gang invest their time on an abstract layout manager (and associated navigation) interface solution to make it easier control the management of the physical presentation of a site’s modules and portlets (with less emphasis in the style of a site).

this is the topic i’ve been thinking of since i started my little cms project: allow users to create layouts, create pages based on layouts and insert a preset of portlets inside page’s regions, obviously, in a visual and drag n’ drop way. Till now, i haven’t started coding a page/layout builder, but instead, just created gallery manager, banner manager, user manager, promotions, guestbook, events and other little things, which are going to be used as portlets in frontend (plan to release a short video of it working soon)

there is a tool called GxPortal (http://www.gxportal.com) that I’ve been working with for some years, which is based on this concept: Portal has channels which has templates (layouts) which are used to create pages. All the rest are called portlets. Unfortunatelly, the tool is not free, neither open source and last but not least: not all times it works as expected, layouts are too limited. We have built the company’s website (http://www.coplana.com) using this tool, but now i’m interested on creating an open source evolution of the idea using Yii/jQuery

maybe we could open another topic to discuss about layout builders, share experiments and hear ppl’s thoughts about this…?

regards

If you get time, take a look at how the above was done in the Mambo and Joomla CMS applications. I’m doing something similar for my portal but my approach is quite a bit different because I needed to take better advantage of Yii’s caching support for view fragments. One thing I do like about the Joomla approach is the use of a xml file to identify the theme regions. Joomla reads this file, allowing it to determine which theme regions hold which collection of portlets. This gives a template designer more control over the theme design without fussing with the PHP code. My themes for the portal are pretty sparse with little PHP code other than some simple regular expressions (these get replaced with modules, portlets, etc.)

My layout solution currently does some things Yii already can handle using CAssetManager, so I need to do a bit of code refactoring improve my support for caching.

Similar design pattern to what I am using.

More of a document manager, I think.

little time now, but i’ll follow your tip and see how it is done in Joomla, however, i’m thinking of keeping all the structure in the database instead of xml

also, only read the database in edit mode, to load the document inside editor and when the user finishes editing the layout/page/ (document as you called), the system should generate a php file representing the page

:)

Yes… and Bootstrap version 2.0 is even more customizable and modular, look at this page http://twitter.githu…p/download.html

Initially Yii had a CAutoComplete component (based on the obsolete jQuery Autocomplete). Since Yii 1.1.3 it’s deprecated and you should use CJuiAutoComplete. Bootstrap 2 has an autocompletion component (bootstrap-typeahead.js). Zurb Foundation doesn’t have an autocompletion component. This is why I say that Boostrap is more complete and it could fully replace existent Yii components (just an example).

Side note: Boostrap 2.0.1 has been released https://github.com/t.../wiki/Changelog

I would advocate for more elastic solution and looks like it’s Foundation. Yii is not a CMS or CMF - it’s a framework, you build anything you need and not a limited subset of sites to witch Twitters Bootstrap is adapted.

More complete does not equal more flexible and easier to use. It makes you fight your way through when you need something more flexible. Yii community can and will provide extensions to meet the everyday needs.

Looks like there were a huge improvements, also regarding flexibility, with bootstrap 2.

Did someone take a deeper look into foundation and bootstrap 2?

What can foundation do better than bootstrap 2?

If Yii 2.0 is going to be really flexible it should support both! :)

Yeah Mike, that’s true.

But there are still issues with custom bootstrap widgets for example.

And also the fact that switching a theme does not necessarily switch your CSS files, at least not in the standard Yii WebApp skeleton :(

Zurb Foundation would be good if somebody will custom code the components (auto-completion etc.) which it doesn’t provide, but I think that time could be spent in a better manner. Otherwise if the alternative is to patch up Foundation with 3rd party components, I think that Bootstrap is a cleaner and more consistent solution.

I think you are coming about this in the wrong way Ekerazha. :)

Bootstrap ships with some stripped down jQuery components, Foundation does that too, but to a much lesser extent.

I agree with Psih: Foundation would be more suited to being distributed with Yii.

Since it already has jQuery and jQuery UI in the list of shipped libs, we just need to hook things up.

In my opinion, should we go for Foundation, we could aim for a Yii look.

Instead of - if we chose Bootstrap - looking like one of thousands of other sites built with it.

Mike: Yes, ideally!

Let me suggest the following:

  1. Yii goes for ZURB Foundation.

  2. Optionally, by means of CSS shims, it could be made to support Bootstrap.

  3. If people choose to use Bootstrap, there is an excellent and well-maintained extension by Chris.

The result:

Win-Win-Win. :D

If we put our mind to it, of course.

Let us choose Foundation because it offers more flexibility and doesn’t make Yii generated projects look like yet another Twitter Bootstrap site, but a really cool Yii site.

It wouldn’t be a big deal to make it support Bootstrap:

Semantic CSS shim is the answer!

I don’t think neither Foundation nor Bootstrap really has semantic CSS built in, but if we create two versions, one for Foundation (the default) and one for Bootstrap (optional), then we can have it all.

Even a third or a fourth CSS framework, like Blueprint.

That solution brings all the power to the users of Yii.

I could be wrong, but it looks like Bootstrap2’s jQuery components are developed for Bootstrap and they are not stripped down versions of some 3rd party component accidentally found on the web.

Indeed, I would drop jQuery UI and fully replace it with Bootstrap (which is also based on jQuery).

Bootstrap… especially Bootstrap 2… is widely customizable. It’s not less customizable than Blueprint or jQuery UI or Foundation.

Moreover, Foundation can’t really replace jQuery UI as it lacks too much components.

http://builtwithbootstrap.com

Really cool Boostrap-based sites.

Boostrap is very flexible.

Why I think that Yii 2 should use Bootstrap:

  • It’s modular.
  • It’s customizable.
  • It’s modern.
  • It provides many components, it can replace the current jQuery UI auto-completion plugin etc.
  • Huge user base and huge community

Meybe we could also open a poll about this.

Bootstrap doesn’t have any jQuery components.

If you check them out, you’ll notice that they are one-page jQuery scripts. ;)

In my honest opinion, Bootstrap from Twitter is over-hyped and well-packaged.

And it tends to conflict with what I already use more often than not.

You shouldn’t always make a decision based on what’s popular.

Especially not if you plan for the long term.

Well, it’s not really a big deal, as I can work around it…

Also, I don’t think this needs a poll.

I trust that the Yii team makes the right choice.

<edit>

License-wise, Foundation is MIT, Bootstrap is Apache.

Foundation ++

This!

The ultimate solution would be to base it on HTML5 Boilerplate - that is modernizer.js, html5 and css3.

And - by means of semantic CSS - it would mean that we are free to use whatever UI/CSS framework we want to use.

Then we don’t have to fight Bootstrap versus Foundation - we could simply make it possible to use whichever floats our boat.

In a perfect world… ;)

One way to do this would be to pick the following:

  1. Responsive grid, no UI.

  2. Foundation from ZURB.

  3. Bootstrap from Twitter.

And make something which works with all 3.

Number 1 would be built-in: grid, no UI, semantic stylesheet (yii-semantic.css)

Number 2 would be external: grid, limited UI, semantic stylesheet (yii-foundation-semantic.css)

Etc.

They are components coded as "one-page jQuery scripts".

It’s not “popular” as “popular at school”.

I’m talking about community interest and community contribution.

Of course it should also be a good product.

That’s not an issue. I.E. Yii already includes HTML Purifier which is LGPL.

If we are talking about the template generated by gii etc. I think that over-engineering, abstraction layers for a simple template (which is just a skeleton, not the final UI of you website) etc. are useless.

If we are talking about improving the bundled UI components, Bootstrap could replace jQuery UI (and you don’t need jQuery Mobile as you can use the Bootstrap responsive grid for mobile development).

  • Bootstrap 2 can replace Blueprint for the skeleton template.
  • Bootstrap 2 can replace jQuery UI as UI toolkit.

In my opinion it would be a good standardization choice, Bootstrap to rule them all.