BoostCake

BoostCake Examples Bootstrap Version 2.3.2

Forms

Default styles

Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.

Legend Example block-level help text here. 
<?php echo $this->Form->create('BoostCake', array(
	'inputDefaults' => array(
		'div' => false,
		'wrapInput' => false
	),
	'class' => 'well'
)); ?>
	<fieldset>
		<legend>Legend</legend>
		<?php echo $this->Form->input('text', array(
			'label' => 'Label name',
			'placeholder' => 'Type something…',
			'after' => '<span class="help-block">Example block-level help text here.</span>'
		)); ?>
		<?php echo $this->Form->input('checkbox', array(
			'label' => 'Check me out'
		)); ?>
		<?php echo $this->Form->submit('Submit', array(
			'div' => false,
			'class' => 'btn'
		)); ?>
	</fieldset>
<?php echo $this->Form->end(); ?>

Search form

Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.

<?php echo $this->Form->create('BoostCake', array(
	'inputDefaults' => array(
		'div' => false,
		'wrapInput' => false
	),
	'class' => 'well form-search'
)); ?>
	<?php echo $this->Form->input('text', array(
		'label' => false,
		'class' => 'input-medium search-query',
	)); ?>
	<?php echo $this->Form->submit('Search', array(
		'div' => false,
		'class' => 'btn'
	)); ?>
<?php echo $this->Form->end(); ?>

Inline form

Add .form-inline for left-aligned labels and inline-block controls for a compact layout.

<?php echo $this->Form->create('BoostCake', array(
	'inputDefaults' => array(
		'div' => false,
		'label' => false,
		'wrapInput' => false
	),
	'class' => 'well form-inline'
)); ?>
	<?php echo $this->Form->input('email', array(
		'class' => 'input-small',
		'placeholder' => 'Email'
	)); ?>
	<?php echo $this->Form->input('password', array(
		'class' => 'input-small',
		'placeholder' => 'Password'
	)); ?>
	<?php echo $this->Form->input('remember', array(
		'label' => array(
			'text' => 'Remember me',
			'class' => 'checkbox'
		),
		'checkboxDiv' => false
	)); ?>
	<?php echo $this->Form->submit('Sign in', array(
		'div' => false,
		'class' => 'btn'
	)); ?>
<?php echo $this->Form->end(); ?>

Horizontal form

Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:

  • Add .form-horizontal to the form
  • Wrap labels and controls in .control-group
  • Add .control-label to the label
  • Wrap any associated controls in .controls for proper alignment
<?php echo $this->Form->create('BoostCake', array(
	'inputDefaults' => array(
		'div' => 'control-group',
		'label' => array(
			'class' => 'control-label'
		),
		'wrapInput' => 'controls'
	),
	'class' => 'well form-horizontal'
)); ?>
	<?php echo $this->Form->input('email', array(
		'placeholder' => 'Email'
	)); ?>
	<?php echo $this->Form->input('password', array(
		'placeholder' => 'Password'
	)); ?>
	<?php echo $this->Form->input('remember', array(
		'label' => 'Remember me',
		'afterInput' => $this->Form->submit('Sign in', array(
			'class' => 'btn'
		))
	)); ?>
<?php echo $this->Form->end(); ?>

Other form example

東京
大阪
@
.00
.00
Please provide a price
Please provide a password
Checkbox Bootstrap Style
Checkbox CakePHP Style
<?php echo $this->Form->create('BoostCake', array(
	'inputDefaults' => array(
		'div' => 'control-group',
		'label' => array(
			'class' => 'control-label'
		),
		'wrapInput' => 'controls'
	),
	'class' => 'well form-horizontal'
)); ?>
	<?php echo $this->Form->input('select', array(
		'label' => array(
			'text' => 'Select Nested Options'
		),
		'empty' => '選択してください',
		'options' => array(
			'東京' => array(
				1 => '渋谷',
				2 => '秋葉原'
			),
			'大阪' => array(
				3 => '梅田',
				4 => '難波'
			)
		),
	)); ?>
	<?php echo $this->Form->input('select', array(
		'label' => array(
			'text' => 'Select Nested Options Checkbox'
		),
		'class' => 'checkbox inline',
		'multiple' => 'checkbox',
		'options' => array(
			'東京' => array(
				1 => '渋谷',
				2 => '秋葉原'
			),
			'大阪' => array(
				3 => '梅田',
				4 => '難波'
			)
		)
	)); ?>
	<?php echo $this->Form->input('radio', array(
		'type' => 'radio',
		'before' => '<label class="control-label">Radio</label>',
		'legend' => false,
		'options' => array(
			1 => 'Option one is this and that—be sure to include why it\'s great',
			2 => 'Option two can be something else and selecting it will deselect option one'
		)
	)); ?>
	<?php echo $this->Form->input('username', array(
		'placeholder' => 'Username',
		'div' => 'control-group',
		'label' => array(
			'text' => 'Prepend',
		),
		'beforeInput' => '<div class="input-prepend"><span class="add-on">@</span>',
		'afterInput' => '</div>'
	)); ?>
	<?php echo $this->Form->input('price', array(
		'label' => array(
			'text' => 'Append',
		),
		'beforeInput' => '<div class="input-append">',
		'afterInput' => '<span class="add-on">.00</span></div>'
	)); ?>
	<?php echo $this->Form->input('price_error', array(
		'label' => array(
			'text' => 'Append Error',
		),
		'beforeInput' => '<div class="input-append">',
		'afterInput' => '<span class="add-on">.00</span></div>'
	)); ?>
	<?php echo $this->Form->input('password', array(
		'label' => array(
			'text' => 'Show Error Message'
		),
		'placeholder' => 'Password',
	)); ?>
	<?php echo $this->Form->input('password', array(
		'label' => array(
			'text' => 'Hide Error Message'
		),
		'placeholder' => 'Password',
		'errorMessage' => false
	)); ?>
	<?php echo $this->Form->input('checkbox', array(
		'label' => array('class' => null),
		'afterInput' => '<span class="help-block">Checkbox Bootstrap Style</span>'
	)); ?>
	<?php echo $this->Form->input('checkbox', array(
		'div' => false,
		'label' => false,
		'before' => '<label class="control-label">Checkbox</label>',
		'wrapInput' => 'controls',
		'afterInput' => '<span class="help-block">Checkbox CakePHP Style</span>'
	)); ?>
	<div class="form-actions">
		<?php echo $this->Form->submit('Save changes', array(
			'div' => false,
			'class' => 'btn btn-primary'
		)); ?>
		<button type="button" class="btn">Cancel</button>
	</div>
<?php echo $this->Form->end(); ?>

Pagination

Standard pagination

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas. 

<?php echo $this->Paginator->pagination(array(
	'div' => 'pagination'
)); ?>

Sizes

Fancy larger or smaller pagination? Add .pagination-large, .pagination-small, or .pagination-mini for additional sizes. 

<?php echo $this->Paginator->pagination(array(
	'div' => 'pagination pagination-large'
)); ?>

<?php echo $this->Paginator->pagination(array(
	'div' => 'pagination'
)); ?>

<?php echo $this->Paginator->pagination(array(
	'div' => 'pagination pagination-small'
)); ?>

<?php echo $this->Paginator->pagination(array(
	'div' => 'pagination pagination-mini'
)); ?>

Alignment

Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right. 

<?php echo $this->Paginator->pagination(array(
	'div' => 'pagination pagination-centered'
)); ?>

<?php echo $this->Paginator->pagination(array(
	'div' => 'pagination pagination-right'
)); ?>

Pager

Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines. 

<?php echo $this->Paginator->pager(); ?>

<?php echo $this->Paginator->pager(array(
	'prev' => '← Older',
	'next' => 'Newer →'
)); ?>

Alerts

× Alert notice message testing...
× Alert success message testing...
× Alert error message testing...
<?php
// View
echo $this->Session->flash();

// Controller
$this->Session->setFlash(__('Alert notice message testing...'), 'alert', array(
	'plugin' => 'BoostCake',
));

$this->Session->setFlash(__('Alert success message testing...'), 'alert', array(
	'plugin' => 'BoostCake',
	'class' => 'alert-success'
));

$this->Session->setFlash(__('Alert error message testing...'), 'alert', array(
	'plugin' => 'BoostCake',
	'class' => 'alert-error'
));
?>