Helpers
Life is not just about widgets. Helpers to the rescue :)
Alert Renders foundation alerts
Alerts are a handy element you can drop into a form or inline on a page to communicate success, warnings, failure or just information. They'll conform to 100% of the container width you put them in.
Example
Heads Up! Helpers do render the HTML markup but not handle the javascript
registration and functionality like the
widgets do. If you wish to do it, you will have to make sure you register the core javascript file + the
corresponding assets files for the plugins. In the case of the Alert would be
foundation.css
or foundation.min.css
plus foundation.js
and foundation.alerts.js
(or
foundation.min.js
). This is true for the rest of the plugins if you use helpers.
<p> <?php echo Alert::alert("This is a standard alert");?> </p> <p> <?php echo Alert::alert( "This is a standard alert with radius", array( 'class' => Enum::RADIUS_RADIUS));?> </p> <p> <?php echo Alert::success("This is a success alert round", array( 'class' => Enum::RADIUS_ROUND));?> </p> <p> <?php echo Alert::important("This is an important alert ");?> </p> <p> <?php echo Alert::secondary("This is a secondary alert");?> </p>
ArrayHelper Array utility methods
This class is an utility helper. It contains a set of methods that help us deal with arrays 'the easy way'
In order to get full information about its methods and what they do, please check the API documentation.
Example
$htmlOptions = array('class' => 'data', 'no-data' => 'no-data'); ArrayHelper::addValue('class', 'extra class', $htmlOptions); print_r($htmlOptions); // Array ( [class] => data extra class [no-data] => no-data ) $otherOptions = array(); ArrayHelper::move(array('no-data'), $htmlOptions, $otherOptions); print_r($otherOptions); // Array ( [no-data] => no-data )
Button Renders foundation buttons
Buttons are a convenient tool when it comes to more traditional actions. To that end, Foundation has a lot of easy to use button styles that you can customize or override to fit your needs.
Example
<div class="small-6 large-6 columns"> <p> <?php echo Button::link('.tiny.button', array('class' => Enum::SIZE_TINY ));?> <?php echo Button::link('.small.button', array('class' => Enum::SIZE_SMALL ));?> <?php echo Button::link('.medium.button', array('class' => Enum::SIZE_MEDIUM ));?> </p> </div> <div class="small-6 large-6 columns"> <p> <?php echo Button::link('.tiny.secondary', array( 'class' => Enum::COLOR_SECONDARY . ' ' . Enum::SIZE_TINY));?> <?php echo Button::link('.tiny.success.radius', array( 'class' => Enum::COLOR_SUCCESS . ' ' . Enum::SIZE_TINY . ' ' . Enum::RADIUS_RADIUS)); ?> <?php echo Button::link('.round.disabled', array( 'class' => Enum::STATE_DISABLED . ' ' . Enum::COLOR_ALERT . ' ' . Enum::RADIUS_ROUND)); ?></p> </div> <p> <?php echo Button::link('.large.expand', array('class' => Enum::SIZE_EXPAND . ' ' . Enum::SIZE_LARGE));?> </p>
Other Styles Splits, Dropdown, and with Icons
Dropdown Button
<?php echo Button::split( 'Split Button', array( CHtml::link('This is a link'), CHtml::link('This is another link'), CHtml::link('Yet another') ), array('style' => 'float:left; margin-right:5px') );?> <?php echo Button::dropdown( 'Dropdown Button', array( CHtml::link('This is a link'), CHtml::link('This is another link'), CHtml::link('Yet another') ), array( 'class' => Enum::COLOR_ALERT, 'style' => 'margin-right:5px' ) );?> <?php echo Button::button( Icon::icon(Enum::ICON_ADDRESS_BOOK) . ' Buttons with Icon' ); ?>
Foundation Handles core scripts registrations
Foundation Helper is the one you require to register core and/or independent assets scripts plus plugin events and initializations. We decided to develop a helper to handle that instead of an Application Component as on other tools (YiiStrap, YiiWheels) to have full control on what is happening and what we register on our view files.
It is highly recommended that you read through the API Documentation to understand clearly what this helper does for us.
Heads up! An important thing to take into account is that when you use widgets, they are automatically registering the required assets for them to work properly.
Html Modified methods and attributes of CHtml and more
This helper just holds those methods that CHtml does not handle the way the library requires. Like for example,
the addCssClass
and thumb
methods.
It also includes clientChange
so your buttons onclick events are handled as they should ;)
Please review its API documentation for further information of its methods.
Icon Classes and methods for icons
It easiest the task of rendering icons and remembering all of its classes. It also registers the requried fonts fonts.
Example general icon set
Icon::registerIconFontSet(Enum::ICONS_SET_GENERAL); echo Icon::icon(Enum::ICON_HEART);
Nav Handles navigation HTML renders
Description
Example
Sub Nav
This simple sub nav is great for moving between different states of a page. We use these frequently to show iterations of something, typically by date, but they're also handy for filters like these.
Side Bar
Side nav, like you'll see on Foundation's main site, is useful for sections of either a site or a page.
// sub bar echo Nav::sub( array( array('label' => 'Item', 'url' => '#', 'itemOptions' => array('class' => 'active')), array('label' => 'Another Item', 'url' => '/features'), array('label' => 'Another Item', 'url' => '/features'), ) ); // side bar echo Nav::side( array( array('label' => 'Item', 'url' => '#', 'itemOptions' => array('class' => 'active')), array('label' => 'Another Item', 'url' => '/features'), '----', array('label' => 'Another Item', 'url' => '/features'), ) );
Panel Renders panels
A panel is a simple, helpful Foundation component that enables you to outline sections of your page easily. This allows you to view your page sections as you add content to them or add emphasis to a section. The width is controlled by the grid columns you put them inside.
Example
This is a regular panel.
It has an easy to override visual style, and is appropriately subdued.
This is a callout panel.
It's a little ostentatious, but useful for important content.
<div class="large-6 columns"> <?php echo Panel::panel('<h5>This is a regular panel.</h5> <p>It has an easy to override visual style, and is appropriately subdued.</p>');?> </div> <div class="large-6 columns"> <?php echo Panel::callout('<h5>This is a callout panel.</h5> <p>It's a little ostentatious, but useful for important content.</p>', array('class' => Enum::RADIUS_RADIUS));?> </div>
Pricing Renders pricing tables
If you're making a rockin' marketing site for a subscription-based product, you are likely in need of a pricing table. These fill 100% of their container and are made from a simple unordered list.
Example
- Standard
- $99.99
- An awesome description
- 1 Database
- 5GB Storage
- 20 Users
- Lots of Love
- Buy Now
echo Pricing::table('Standard', '$99.99', 'An awesome description', array( '1 Database', '5GB Storage', '20 Users', Icon::icon(Enum::ICON_HEART) . ' Lots of Love', Button::link('Buy Now') ));
Progress Renders foundation progress bars
A simple way to add progress bars to your layouts. You only need two HTML elements to make them and they're easy to customize.
Example
<p> <?php echo Progress::bar('40%'); ?> </p> <p> <?php echo Progress::success(50, array('class' => Enum::RADIUS_ROUND)); ?> </p> <p> <?php echo Progress::important(60, array('class' => Enum::RADIUS_RADIUS)); ?> </p> <p> <?php echo Progress::secondary(70, array('class' => Enum::RADIUS_RADIUS)); ?> </p> <p> <?php echo Progress::important(60, array('class' => 'large-6')); ?> </p>
Typo Access special Foundation tags
Foundation 4 Typography is full of nice CSS tags. Typo helper contains some of what we thought would be easier to have within a helper.
Example
Subheader
h1.subheader
h2.subheader
h3.subheader
h4.subheader
h5.subheader
h6.subheader
<?php echo Typo::subHeader('This is a subheader h3 <small>I said it</small>', 'h3');?>
Blockquote
I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.Isaac Asimov
<?php echo Typo::blockquote('hello I said it');?>
vCard
- Gaius Baltar
- 13 Colonial Ave.
- Caprica City
- Caprica, 12345
- g.baltar@gmail.com
<?php echo Typo::vCard( 'Gaius Baltar', '13 Colonial Ave.', 'Caprica City', 'Caprica', '12345', CHtml::link('g.baltar@gmail.com')); ?>
Inline List
<?php echo Typo::inlineList(array( CHtml::link('Link 1'), CHtml::link('Link 2') )); ?>
Labels
Regular Label Radius Secondary Label Round Alert Label Success Label
echo Typo::label('Regular label'); echo Typo::label('Radius Secondary label', array('class' => Enum::RADIUS_RADIUS . ' ' . Enum::COLOR_SECONDARY));
Keystrokes
For example, to close your browser hit Cmd + Q
For example, to close your browser hit <?php echo Typo::kbd('Cmd') . ' + ' . Typo::kbd('Q');?>