DluTwBootstrap updated to ZF2 RC5 and Twitter Bootstrap 2.1.0
DluTwBootstrap – the Zend Framework 2 module for generating Twitter Bootstrap UI (forms) has been updated to Zend Framework 2 RC5 and Twitter Bootstrap v2.1.0.
About
DluTwBootstrap is a Zend Framework 2 module consisting primarily of view helpers, which let you easily generate Twitter Bootstrap UI forms from your standard Zend Framework 2 Form objects without getting your hands dirty with Twitter Bootstrap mark-up. Check the on-line demo to see it in action.
Update to Zend Framework 2 RC5
BC breaks
There is only a single BC break: The FormButton view helper has been refactored and the button label has been moved from attributes to options. Go to the on-line demo, select Horizontal form, and check the Form tab, which shows the correct definition of the button component.
Composer support
DluTwBootstrap can be installed / updated using Composer. Please see the Installation – with Composer paragraph for instructions.
Update to Twitter Bootstrap 2.1.0
The new version of Twitter Bootstrap adds a few new form related features but the general mark-up remains the same. There are three things worth noting though.
Larger font
The default distribution of Twitter Bootstrap 2.1.0 uses a larger font size and line height as compared to the version 2.0.4. It’s 14px/20px vs. 13px/18px. (There are other changes, of course, go to the Bootstrap 2.1.0 released blog post to review them.)
The increased sizes were too much for me, so I used a custom built Twitter Bootstrap 2.1.0 library with the original sizing of 13px/18px. The Twitter Bootstrap library packaged with the DluTwBootstrap module is this customized smaller font version!
If you want to use the default distribution (or another custom build), just replace the public/css/bootstrap.min.css and optionally the public/js/bootstrap.min.js files.
Although Twitter Bootstrap recalculates other dimensions (padding, margins, inputs, etc.) based on the font size / line height in the custom build, the headings (<h1> through <h6>) remain the same and look disproportionatelly big. The DluTwBootstrap module overrides the default Twitter Bootstrap styling as little as possible, so it’s left up to you to provide a style override for these elements, if you deem it necessary.
Twitter Bootstrap 2.1.0 bug
There is a bug in Twitter Bootstrap v2.1.0 causing a thin gray line to be rendered above radio options in error state. To see this bug, go to the on-line demo, select the Horizontal form, submit it (do not enter anything) and check the Radio and Radio Inline elements.
This bug has already been fixed in Twitter Bootstrap master and the fix should appear in 2.1.1 release (see Issue #4526 for details).
jQuery update
Together with Twitter Bootstrap update, the jQuery library distributed with DluTwBootstrap has been updated too to version 1.8.0. You might want to update the references in your layouts.
Nice work. I saw that you have not yet added an prepend-icon support. Could it not easily be implemented with just passing the icon class as prependIcon option and let the FormTextTwb::render() method generate the markup?
I am not quite sure how I could extend FormTextTwb::render() to do this without having problems when updating the module…
The prepended/appended icons should be easy to implement and I’d like to work on this feature tomorrow. So stay tuned.
Hi Ralf, check the latest master (and demo app), the support for appended / prepended icons is there. You can use this feature on any form type except Search. (The prepended icons on vertical forms as well as prepended text have a bug – left border is missing. This is on my todo list. Everything else works fine.)
To use the icons, just add e.g.
'prependIcon' => 'icon-heart','appendIcon' => 'icon-glass',
to the relevant element in the
$displayOptionsarray. Since the icon names are Twitter Bootstrap related and likely have no meaning when used with another template, I decided to define the icons in the$displayOptionsarray instead of the form class.Hi David,
nice one. Works as expected. If you could add this to FormPasswordTwb as well, then I will be fully satisfied
Thanks, Ralf
Hi Ralf, the password is easy, the buttons will be a bit more complicated but doable nonetheless. I’ve put both your requests into the bugtracker (https://bitbucket.org/dlu/dlutwbootstrap/issues?status=new&status=open), you are wellcome to watch / comment on them or add new ones.
Thanks. I will be watching them…
Oh, and I forgot the FormSubmitTwb and FormButtonTwb, but I am afraid that looks a little more complicated to add. But then we could create really nice forms with TWB…
I just copy-pasted around and got it to work. But to be more precise, for buttons I would like to have this stuff:
http://fortawesome.github.com/Font-Awesome/#examples
But I guess that is not so easy to set up for form buttons, since the button text is set in the value attribute.