CakePHP with Bootstrap (from Twitter)

CSS is purely presentational; how can it affect the form helper from working as it should?

Some of the CSS validation classes might need reworking as well as what Cake returns when an error is encountered.

You can easily modify the output using the error option:

$this->Form->input('Model.field', array('error' => array('wrap' => 'span',                                              'class' => 'boostrap-error')));

http://book.cakephp.org/view/1401/options-error

This seems to be what you are looking for.https://github.com/loadsys/twitter-bootstrap-helper/branches

I'm doing the same thing for an app, and I've found the CSS classes for form elements match up pretty well actually.

Twitter's Bootstrap form elements look like this:

<div class="clearfix">  <label for="xlInput">X-Large input</label>  <div class="input">    <input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" />  </div></div>

And CakePHP's FormHelper generates elements like this:

<div class="input text">    <label for="UserName">Name</label>    <input name="data[User][name]" type="text" value="" id="UserName" /></div>

The main difference being the label outside the div in Bootstrap. FormHelper lets you set custom classes like array('class' => 'clearfix').

The .input class in Bootstrap is defined in forms.less and only sets margin-left: 150px; to move the inputs over to the right. If you don't use this style you can just add margin-right: 20px; to <label> instead.

The code in my form element ends up being:

echo $this->Form->input('first_name', array('div' => 'clearfix'));

...and generates elements that are styled properly by Bootstrap.

<div class="clearfix required">  <label for="PersonFirstName">First Name</label>  <input name="data[Person][first_name]" maxlength="50" type="text" id="PersonFirstName"/></div>

I'm still learning both frameworks so there may be problems with this. Hope it helps though.