UI components standardization

Just to complement jacmoe’s post: http://woork.blogspot.com/2008/11/css-coding-semantic-approach-in-naming.html (check the pictures).

We are discussing what design/css frameworks to use but under that we should have integration of HTML5 Boilerplate probably using a template from http://www.initializr.com/.

And H5BP + Twitter Bootstrap integration is already planned: https://github.com/h5bp/html5-boilerplate/issues/936

Bootstrap 2.0 will be released on January 31 http://www.markdotto…g-and-feedback/

Maybe we should wait for it before starting a comparative.

Preview: http://markdotto.com…docs/index.html

Yeah OK, not a very well chosen example :)

You mean like this, assuming you’re using blueprint as a grid?


.main {

  @extend .span-16;

}


.sidebar {

  @extend .span-8;

}

While with zurb it would be like…


.main {

  @extend .eight.columns;

}


.sidebar {

  @extend .four.columns;

}

I like that!

Are there some standard sematics already, like in mentels post?

e.g. http://www.stuffandnonsense.co.uk/archives/naming_conventions_table.html

One more thing: What’s your opinion about UI widgets coming with a Grid or Theme?

Pros: They provide a very useful set of componets.

Cons: Less flexibility.

E.g. yii-bootstrap widgets comes with a set of special bootstap widgets … would you write wrappers for them, when you’d like to use the views of a module which uses yii-bootrap with another grid or would you simply overwrite the views within your theme folder … other solutions?

Bootstrap 2.0 has been released! http://twitter.github.com/bootstrap/

And yes, it is responsive.

You can download the full package, but it’s also modular and pretty customizable http://twitter.githu…p/download.html

Notes about licensing: Bootstrap uses the Apache License 2.0, Zurb Foundation uses the MIT license.

Comparison table between

Yii (Blueprint + jQuery UI + custom) – Bootstrap 2 – Foundation – HTML KickStart

is work in progress (I should complete it on Saturday)

Nice, I am looking forward to this!

Hey All,

My vote is also for Bootstrap. A while ago I wrote a Bootstrap integration extension for Yii (you can find the link in my sig). I have customized Bootstrap for many projects so it is indeed customizable. Now with Bootstrap 2 it’s easier since it they deployed a tool for creating a custom Bootstrap package (much like jQuery UI).

People are not yet that familiar with LESS and the advantages it brings over CSS. The fact that Bootstrap is built using LESS is a really good pro since it allows you to use their variables, mixins, etc. in your own LESS.

However, the HTML generated by CHtml is not exactly compatible with Bootstrap. But I guess that that would not be a big issue.

Where are the glitches, is it about special attributes like


data-toggle="modal"

?

No, it’s how the elements are created. Input error is a div when it should be a span, HTML for checkboxes and radio buttons are different, etc.

Played around with blueprint lately. If we want to use it, it will require some changes in Yii’s CHtml helper. For now you will have problems with checkboxes, radiobuttons and the list versions of them. Blueprint expects the label to wrap the input field - which Yii does not support out of the box.

I had to write my custom versions of activeRadioButtonList and activeCheckBoxList.

You mean bootstrap, Mike? :)

Of course :D

‘wontfix’ ??

That’s not a valid answer.

If I had to choose, I’d go for Foundation. Bootstrap might look better but I find it too restricting.

We need to realize that Bootstrap is merely a handy collection of interface elements.

It is easy to get the same functionality using Foundation.

The problem is that once you want to choose other types of elements than the one included in Bootstrap, you are going to do a lot of work which you otherwise wouldn’t have done.

So my vote is still on Foundation. I can’t see why Yii couldn’t build on top of that and add its own set of widgets.

Would make it more flexible, and inherently more Yii-like.

But I would be fine with Boostrap - let’s not underestimate the value of popularity…

But this is not bootstrap specific, it applies always for elements which are not included in your framework.

For Bootstrap there’s already a complete extension, work for Bootstrap 2 is in progress. For zurb foundation, there’s only orbitslider available. Yii itself currently uses jQuery UI, which is also used by Bootstrap 2 - they should be more or less compatible, maybe Chris83 can say a few things about the the compatibility.

What’s about the idea of having a widget class map? E.g. you’d always use CTabsWidget in your code, which is translated to CJuiTabs by default:


'CTabsWidget' => 'CJuiTabs'

or choose bootstrap …


'CTabsWidget' => 'BootTabs'

You could also ‘retransform’ bootstrap widgets in extensions:


'BootTabs' => 'CJuiTabs'

+1 :)

I have been working with bootstrap for the past couple of months and it has my vote. Would you guys also consider taking a look at datatables?

Yes it is flexible…

2518

preview.png

I didn’t have time to complete the comparison, here you can track the progress https://docs.google…HRfMWhwc3NkYmY4 (still in the embryonic stages). I’m going to complete it as soon as possible.

My opinion in short: Go for Twitter Bootstrap 2.0.

Between Zurb Foundation and Boostrap 1.x maybe I’d have chosen Foundation, but Bootstrap 2.0 is another story.