Yii Framework Forum: UI components standardization - Yii Framework Forum

Jump to content

  • (7 Pages)
  • +
  • 1
  • 2
  • 3
  • 4
  • 5
  • Last »
  • You cannot start a new topic
  • You cannot reply to this topic

UI components standardization

#41 User is offline   Rodrigo Coelho 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 664
  • Joined: 05-August 10
  • Location:Rio de Janeiro, Brazil

Posted 26 January 2012 - 08:27 PM

Just to complement jacmoe's post: http://woork.blogspo...-in-naming.html (check the pictures).
2

#42 User is offline   lightglitch 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 33
  • Joined: 05-January 10

Posted 26 January 2012 - 08:31 PM

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/h...late/issues/936
0

#43 User is offline   ekerazha 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 525
  • Joined: 10-October 08
  • Location:European Union

Posted 27 January 2012 - 04:24 AM

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

This post has been edited by ekerazha: 27 January 2012 - 04:34 AM

Yii user #37
0

#44 User is offline   schmunk 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 566
  • Joined: 02-November 08
  • Location:Stuttgart, Germany

Posted 27 January 2012 - 07:26 AM

View Postjacmoe, on 26 January 2012 - 05:14 PM, said:

Are you sure you understand what 'semantic' means? :)

It simply means that those layout specifics are taken out of the views and put into the style sheet.

I am currently using Sass/Compass with Susy (grid). And it has semantic support.
Sass/Compass also supports Blueprint semantically.

So, instead of using 'span-8', use a meaningful, semantic name.
And deal with it in the stylesheet.

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.stuffandn...ions_table.html
Phundament - Yii Application Boilerplate with composer support
Fork on github

Follow phundament on Twitter

DevSystem: Mac OS X 10.7 - PHP 5.3 - Apache2 - Yii 1.1 / trunk - Firefox or Safari
0

#45 User is offline   schmunk 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 566
  • Joined: 02-November 08
  • Location:Stuttgart, Germany

Posted 27 January 2012 - 10:17 AM

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?
Phundament - Yii Application Boilerplate with composer support
Fork on github

Follow phundament on Twitter

DevSystem: Mac OS X 10.7 - PHP 5.3 - Apache2 - Yii 1.1 / trunk - Firefox or Safari
0

#46 User is offline   ekerazha 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 525
  • Joined: 10-October 08
  • Location:European Union

Posted 01 February 2012 - 01:43 AM

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.
Yii user #37
0

#47 User is offline   ekerazha 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 525
  • Joined: 10-October 08
  • Location:European Union

Posted 01 February 2012 - 05:39 AM

Comparison table between
Yii (Blueprint + jQuery UI + custom) -- Bootstrap 2 -- Foundation -- HTML KickStart
is work in progress (I should complete it on Saturday)
Yii user #37
0

#48 User is offline   schmunk 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 566
  • Joined: 02-November 08
  • Location:Stuttgart, Germany

Posted 01 February 2012 - 06:08 AM

View Postekerazha, on 01 February 2012 - 05:39 AM, said:

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!
Phundament - Yii Application Boilerplate with composer support
Fork on github

Follow phundament on Twitter

DevSystem: Mac OS X 10.7 - PHP 5.3 - Apache2 - Yii 1.1 / trunk - Firefox or Safari
0

#49 User is offline   Chris83 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 440
  • Joined: 27-February 10
  • Location:Helsinki, Finland

Posted 01 February 2012 - 10:18 AM

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.
Best regards,
Chris

My contribution to the Yii community:
Account | Yiistrap | Auth | Bootstrap | NordCms | Rights | LESS | SEO | Img

Follow me:
Twitter | GitHub | Bitbucket
0

#50 User is offline   schmunk 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 566
  • Joined: 02-November 08
  • Location:Stuttgart, Germany

Posted 01 February 2012 - 10:31 AM

View PostChris83, on 01 February 2012 - 10:18 AM, said:

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"
?
Phundament - Yii Application Boilerplate with composer support
Fork on github

Follow phundament on Twitter

DevSystem: Mac OS X 10.7 - PHP 5.3 - Apache2 - Yii 1.1 / trunk - Firefox or Safari
0

#51 User is offline   Chris83 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 440
  • Joined: 27-February 10
  • Location:Helsinki, Finland

Posted 01 February 2012 - 11:10 AM

View Postschmunk, on 01 February 2012 - 10:31 AM, said:

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.
Best regards,
Chris

My contribution to the Yii community:
Account | Yiistrap | Auth | Bootstrap | NordCms | Rights | LESS | SEO | Img

Follow me:
Twitter | GitHub | Bitbucket
0

#52 User is offline   Mike 

  • Elite Member
  • PipPipPipPipPip
  • Yii
  • Group: Members
  • Posts: 3,013
  • Joined: 06-October 08
  • Location:Upper Palatinate

Posted 03 February 2012 - 03:09 AM

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.
0

#53 User is offline   phpnode 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 141
  • Joined: 18-April 11

Posted 03 February 2012 - 10:06 AM

View PostMike, on 03 February 2012 - 03:09 AM, said:

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? :)
0

#54 User is offline   Mike 

  • Elite Member
  • PipPipPipPipPip
  • Yii
  • Group: Members
  • Posts: 3,013
  • Joined: 06-October 08
  • Location:Upper Palatinate

Posted 03 February 2012 - 10:16 AM

View Postphpnode, on 03 February 2012 - 10:06 AM, said:

You mean bootstrap, Mike? :)


Of course :D
0

#55 User is offline   jacmoe 

  • Elite Member
  • Yii
  • Group: Moderators
  • Posts: 2,601
  • Joined: 10-October 10
  • Location:Denmark

Posted 03 February 2012 - 10:24 AM

'wontfix' ??
That's not a valid answer. Posted Image
"Less noise - more signal"
0

#56 User is offline   Da:Sourcerer 

  • Elite Member
  • PipPipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,222
  • Joined: 30-March 11
  • Location:Berlin, Germany

Posted 03 February 2012 - 01:02 PM

If I had to choose, I'd go for Foundation. Bootstrap might look better but I find it too restricting.
programmer /ˈprəʊgramə/, noun: a device that converts ►coffee into ►code
0

#57 User is offline   jacmoe 

  • Elite Member
  • Yii
  • Group: Moderators
  • Posts: 2,601
  • Joined: 10-October 10
  • Location:Denmark

Posted 04 February 2012 - 06:22 AM

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..
"Less noise - more signal"
0

#58 User is offline   schmunk 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 566
  • Joined: 02-November 08
  • Location:Stuttgart, Germany

Posted 04 February 2012 - 11:46 AM

View Postjacmoe, on 04 February 2012 - 06:22 AM, said:

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.

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

View Postjacmoe, on 04 February 2012 - 06:22 AM, said:

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.

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'


View Postjacmoe, on 04 February 2012 - 06:22 AM, said:

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

+1 :)
Phundament - Yii Application Boilerplate with composer support
Fork on github

Follow phundament on Twitter

DevSystem: Mac OS X 10.7 - PHP 5.3 - Apache2 - Yii 1.1 / trunk - Firefox or Safari
0

#59 User is offline   tburandt 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 30
  • Joined: 04-December 11

Posted 04 February 2012 - 11:06 PM

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...
Attached File  preview.png (61.92K)
Number of downloads: 74
0

#60 User is offline   ekerazha 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 525
  • Joined: 10-October 08
  • Location:European Union

Posted 05 February 2012 - 01:13 PM

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.
Yii user #37
0

Share this topic:


  • (7 Pages)
  • +
  • 1
  • 2
  • 3
  • 4
  • 5
  • Last »
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users