Yii Framework Forum: [EXTENSION] Bootstrap - Yii Framework Forum

Jump to content

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

[EXTENSION] Bootstrap Bringing together Yii and Twitter Bootstrap Rate Topic: ***** 23 Votes

#1 User is offline   Chris83 

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

Posted 26 September 2011 - 04:09 AM

*
POPULAR

Hello,

This is the discussion thread for my latest extension, Bootstrap.

What is Bootstrap?
Bootstrap is a toolkit to kickstart development of web applications. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation and more. Bootstrap has been developed by Twitter, it is open source and can be found on Github.

Why an extension?
After trying out Bootstrap I immediately decided that it was time to write an extension to allow developers to easily implement this awesome toolkit in their existing and upcoming Yii-projects.

Download the extension here:
http://www.yiiframew...sion/bootstrap/

Fork me Bitbucket:
https://bitbucket.or.../yii-bootstrap/

More about Bootstrap here:
http://twitter.github.com/bootstrap/

Try out the demo here:
http://www.cniska.ne...bootstrap/demo/

Enjoy!
Best regards,
Chris

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

Follow me:
Twitter | GitHub | Bitbucket
9

#2 User is offline   Mukesh 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 107
  • Joined: 17-May 11
  • Location:India

Posted 26 September 2011 - 04:53 AM

blueprint on steroids. Thanks for the extension
0

#3 User is offline   bigardusklei 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 53
  • Joined: 04-January 11
  • Location:Asturias, Spain

Posted 26 September 2011 - 05:36 AM

Hi!!! I'm using also bootstrap on a couple of projects, but I'm using it with less.js... is your extension compatible with it?

Thanks!
0

#4 User is offline   Chris83 

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

Posted 26 September 2011 - 05:51 AM

View Postbigardusklei, on 26 September 2011 - 05:36 AM, said:

Hi!!! I'm using also bootstrap on a couple of projects, but I'm using it with less.js... is your extension compatible with it?

Thanks!


I'm actually also using it with LESS but I'm using it trough my own less extension (that I haven't published yet) which uses Agar's LESS compiler, less.php (https://github.com/agar/less.php).

However, I don't see why you couldn't use less.js with the extension. The less-files are included in the less-folder.

Let me know if you run into any issues.
Best regards,
Chris

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

Follow me:
Twitter | GitHub | Bitbucket
0

#5 User is offline   thyseus 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 300
  • Joined: 18-April 09
  • Location:Leipzig, Germany

Posted 26 September 2011 - 06:18 AM

Are you already developing a "topbar" widget? If not - i would do it and send it to you.

The CMenu Widget is already working fine using this layout:


<div class="topbar">
	<div class="topbar-inner">
		<div class="container">
		<?php $this->widget('zii.widgets.CMenu',array(
			'items'=>array(
				...
			),
		)); ?>

		</div>
	</div>
</div>


But it would even be cooler using a Widget. I think about something like this:

 $this->widget('ext.bootstrap.widgets.topbar',array(
			'items'=>array( ... ) );


Of course, you do not always ONLY want a Menu in there. For example, you want infos about
the current logged in user, a search input field, and so-on. This could be accomplished
by something like this:

 $this->widget('ext.bootstrap.widgets.topbar',array(
			array( 
'class' => 'CMenu',
'items' => ...
),
array(
'class' => 'Searchbox'     // render a search box
),
array(
'class' => 'UserInfo'      // render info about the current logged in user
'template' => Yii::t('You are currently logged in as {username}', array('{username}' => $user)),
),
),


What do you think?

Edit: with a little bit of adjustment i also got the drop-down menu working. Nice !
Would also go into the navbar extension. "secondary nav" is also supported by bootstrap!
0

#6 User is offline   Chris83 

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

Posted 26 September 2011 - 06:54 AM

@thyseus: Initially I thought that the top bar is a bit too complicated to be a widget but I need to re-think it. Maybe it would be possible to do it as a widget after all. It could also be done with beginWidget / endWidget, but then it would be really simple.

Edit: Another solution could be to use a template string to achieve this.

Any thoughts about the extension in general?
Best regards,
Chris

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

Follow me:
Twitter | GitHub | Bitbucket
0

#7 User is offline   thyseus 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 300
  • Joined: 18-April 09
  • Location:Leipzig, Germany

Posted 26 September 2011 - 12:31 PM

View PostChris83, on 26 September 2011 - 06:54 AM, said:

Any thoughts about the extension in general?


The extension in general Rocks! ;)

Especially i like the BootActiveForm and the one-liner-widgets xxxxBlock Widgets. They
make form building even easier and quicker than the standard CActiveForm.

I will make a "topbar" widget. The template string is a very good idea, i will do it this way. I post it as soon as it is done
for you to check.

Another idea would be to do 'gii' templates that generate ready-to-use BootActiveForm _form.php files.
0

#8 User is offline   thyseus 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 300
  • Joined: 18-April 09
  • Location:Leipzig, Germany

Posted 26 September 2011 - 05:23 PM

As promised, here my first pre-test-alpha version attached to this post.

Please let me know if this works for you.

Usage _should_ be self-explanatory - but if you are going to include this in your bootstrap package i will write
examples and Documentation for it...

Attached File(s)


0

#9 User is offline   Chris83 

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

Posted 27 September 2011 - 01:05 AM

@thyseus: Seems a bit complicated, wouldn't it have been better to extend CMenu? The idea with BootWidget was to provide common functionality for registering JavaScript libraries for the widgets. The topbar doesn't require any extra JS so it could as well extend CMenu. I'll see what I can do about the topbar but it isn't highest on my priority list. I'd also like separate widgets for the searchbox, menu, topbar, 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

#10 User is offline   thyseus 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 300
  • Joined: 18-April 09
  • Location:Leipzig, Germany

Posted 27 September 2011 - 02:13 AM

Not exactly. There is a small javascript snippet that needs to be inserted by the assetManager, and some special
css classes need to be appended to the <ul> and <li>. Also a <a> with a special class needs to be assigned.

This is not possible with the vanilla CMenu. And i did not want a special Class just for the Menu. Moving
these few functions into the widget should do it, i think.

So it could extend from CWidget, thats true ;)

Of course, if you got a better approach with separate widgets, i would glad use them.
Until then i stick to my approach.
0

#11 User is offline   Chris83 

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

Posted 27 September 2011 - 02:21 AM

@thyseus: Fair enough, I'll see what I can do once I have time to take a look at the topbar.
Best regards,
Chris

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

Follow me:
Twitter | GitHub | Bitbucket
0

#12 User is offline   jacmoe 

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

Posted 27 September 2011 - 06:06 AM

Really awesome extension!
Totally needed for a totally non-designer like me. :lol:
"Less noise - more signal"
0

#13 User is offline   Chris83 

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

Posted 03 October 2011 - 04:06 AM

Thanks for all the feedback on this extension.

Version 0.9.1 is now live:
http://www.yiiframew...trap-0.9.1.zip/

What's new?
  • BootFlash (flash message widget)
  • BootstrapGenerator (Gii CRUD templates)
  • Various improvements to BootActiveForm

Enjoy!

Please note that the BootGridView has been moved into the following sub-package:
ext.bootstrap.widgets.grid
Best regards,
Chris

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

Follow me:
Twitter | GitHub | Bitbucket
0

#14 User is offline   zitter 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 140
  • Joined: 14-July 09

Posted 06 October 2011 - 03:48 PM

hi, is there a way to disable/do not display <label> and/or outer div.clearfix for some inputs? Sometime I need to get two or more inputs on the same row and it seems it is impossible now.
The "single line of code" is cool, but sometime it cannot be very flexible :)

EDIT: Looking at the code it seems it is possible. Now I have to find out how to pass $label=false from view :)
0

#15 User is offline   Chris83 

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

Posted 07 October 2011 - 12:56 AM

View Postzitter, on 06 October 2011 - 03:48 PM, said:

hi, is there a way to disable/do not display <label> and/or outer div.clearfix for some inputs? Sometime I need to get two or more inputs on the same row and it seems it is impossible now.
The "single line of code" is cool, but sometime it cannot be very flexible :)

EDIT: Looking at the code it seems it is possible. Now I have to find out how to pass $label=false from view :)


The idea with the one-line widget was to only cover the most common cases, so in your case I would just write the code the old fashion way.
Best regards,
Chris

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

Follow me:
Twitter | GitHub | Bitbucket
0

#16 User is offline   Chris83 

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

Posted 12 October 2011 - 05:14 AM

Bootstrap can now be forked on Bitbucket:
https://bitbucket.or...3/yii-bootstrap

Feel free to send me pull requests and I will review your patch to see if it should be merged into the master branch.

Bootstrap can also be found on Ohloh so please go tell Ohloh if you use this project by pressing the "I USE THIS" button.

https://www.ohloh.net/p/yii-bootstrap
Best regards,
Chris

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

Follow me:
Twitter | GitHub | Bitbucket
0

#17 User is offline   lehandr 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 10
  • Joined: 17-June 11
  • Location:Kharkov, Ukraine

Posted 12 October 2011 - 10:21 AM

Great extension! Thank you.

I want to see a twipsy tip on some input form element on focus event, but jquery.boottwipsy.js does not take into account a "trigger" option.

Also the default $selector is '.twipsy', but bootstrap.min.css has declared class .twipsy in it. So when I add this class to any form input element, I see that font decrease to 11px.
0

#18 User is offline   Chris83 

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

Posted 12 October 2011 - 03:31 PM

View Postlehandr, on 12 October 2011 - 10:21 AM, said:

Great extension! Thank you.

I want to see a twipsy tip on some input form element on focus event, but jquery.boottwipsy.js does not take into account a "trigger" option.

Also the default $selector is '.twipsy', but bootstrap.min.css has declared class .twipsy in it. So when I add this class to any form input element, I see that font decrease to 11px.


@lehandr: Twipsy was originally only meant for links but I can see why you'd like to have it on a focus event. I have to think about adding the functionality when I have time. Regarding your selector issue, you have two options. You can either specify the selector yourself by giving it as an "argument" to the widget or you can override the .twipsy class in your own CSS.
Best regards,
Chris

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

Follow me:
Twitter | GitHub | Bitbucket
0

#19 User is offline   lehandr 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 10
  • Joined: 17-June 11
  • Location:Kharkov, Ukraine

Posted 13 October 2011 - 08:50 AM

I have a form with many input fields. I want to use ajax validation for fields "username" and "email", but not for other fields!
When I use CActiveFrom I set:

<?php
$form=$this->beginWidget('CActiveForm', array(
...	
'enableAjaxValidation'=>true,
...
)) ?>

and on the fields that not required ajax validation:
<?php echo $form->error($model,$attribute,array(),false); ?>

where the last parameter false allow to disable ajax validation for field.

I saw in the BootInputBlock::run() to line 105:
$error = $this->form->error($this->model, $this->attribute); 


So when I use BootActiveForm I have not a possibility to disable ajax validation for some fields.
Is there another decision to resolve it or maybe all error's parameters can be added to all inputBlock methods in the next releases?
0

#20 User is offline   Chris83 

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

Posted 13 October 2011 - 09:04 AM

@lehandr: In your case I wouldn't use BootInputBlock. The widget was designed to cover only the most common cases to keep it simple. I hope this answers your question.
Best regards,
Chris

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

Follow me:
Twitter | GitHub | Bitbucket
0

Share this topic:


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

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