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.

Links