Mojolicious::Plugin::BootstrapHelpers - Type less bootstrap
# Mojolicious $self->plugin('BootstrapHelpers'); # ::Lite plugin 'BootstrapHelpers';
This is an unstable work in progress. Backwards compatibility is currently not to be expected between releases.
Currently supported Bootstrap version: 3.2.0.
Only Perl 5.20+ is supported (thanks to postderef). This might change.
Mojolicious::Plugin::BootstrapHelpers is a convenience plugin that reduces some bootstrap complexity by introducing several tag helpers specifically for Bootstrap 3.
The goal is not to have tag helpers for everything, but for common use cases.
All examples below (and more, see tests) is expected to work.
There are several shortcuts for context and size classes, that automatically expands to the correct class depending on which tag it is applied to.
For instance, if you apply the info shortcut to a panel, it becomes panel-info, but when applied to a button it becomes btn-info.
info
panel-info
btn-info
For sizes, you can only use xsmall, small, medium and large, they are shortened to the Bootstrap type classes.
xsmall
small
medium
large
The following shortcuts are available:
xsmall default small primary medium success large info warning danger
See below for usage. Important: You can't follow a shortcut with a fat comma (=>). The fat comma auto-quotes the shortcut, and then the shortcut is not a shortcut anymore.
=>
If there is no corresponding class for the element you add the shortcut to it is automatically removed.
Bootstrap documentation
%= panel <div class="panel panel-default"> <div class="panel-body"> </div> </div>
The class is set to panel-default, by default.
panel-default
%= panel undef ,=> begin <p>A short text.</p> % end <div class="panel panel-default"> <div class="panel-body"> <p>A short text.</p> </div> </div>
If you want a panel without title, set the title to undef. Note that you can't use a regular fat comma since that would turn undef into a string.
undef
%= panel 'The header' => begin <p>A short text.</p> % end <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">The Header</h3> </div> <div class="panel-body"> <p>A short text.</p> </div> </div>
%= panel 'Panel 5', success, begin <p>A short text.</p> % end <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">Panel 5</h3> </div> <div class="panel-body"> <p>A short text.</p> </div> </div>
The first shortcut, success. This applies .panel-success.
success
.panel-success
%= formgroup 'Text test 1', text_field => ['test_text'] <div class="form-group"> <label class="control-label" for="test_text">Text test 1</label> <input class="form-control" id="test_text" name="test_text" type="text" /> </div>
The first item in the array ref is used for both id and name. Except...
id
name
%= formgroup 'Text test 4', text_field => ['test-text', append => '.00', large] <div class="form-group"> <label class="control-label" for="test_text">Text test 4</label> <div class="input-group"> <input class="form-control input-lg" id="test-text" name="test_text" type="text" /> <span class="input-group-addon">.00</span> </div> </div>
Shortcuts can also be used in this context. Here large applies .input-lg.
.input-lg
If the input name (the first item in the text_field array ref) contains dashes, those are replaced (in the name) to underscores.
%= formgroup 'Text test 5', text_field => ['test_text', '200', prepend => '$', append => '.00'] <div class="form-group"> <label class="control-label" for="test_text">Text test 5</label> <div class="input-group"> <span class="input-group-addon">$</span> <input class="form-control" id="test_text" name="test_text" type="text" value="200" /> <span class="input-group-addon">.00</span> </div> </div>
The (optional) second item in the array ref is the value, if any, that should populate the input tag.
%= formgroup 'Text test 6', text_field => ['test_text'], large <div class="form-group form-group-lg"> <label class="control-label" for="test_text">Text test 6</label> <input class="form-control" id="test_text" name="test_text" type="text" /> </div>
Note the difference with the earlier example. Here large is outside the text_field array ref, and therefore .form-group-lg is applied to the form group.
text_field
.form-group-lg
%= formgroup 'Text test 8', text_field => ['test_text'], cols => { medium => [2, 10], small => [4, 8] } <div class="form-group"> <label class="control-label col-md-2 col-sm-4" for="test_text">Text test 8</label> <div class="col-md-10 col-sm-8"> <input class="form-control" id="test_text" name="test_text" type="text" /> </div> </div>
If the form is .form-horizontal, you can set the column widths with the cols attribute. The first item in each array ref is for the label, and the second for the input.
form
.form-horizontal
cols
%= button 'The example 5' => large, warning <button class="btn btn-lg btn-warning">The example 5</button>
An ordinary button, with applied shortcuts.
%= button 'The example 1' => ['http://www.example.com/'], small <a class="btn btn-sm" href="http://www.example.com/">The example 1</a>
If the first argument after the button text is an array ref, it is used to populate href and turns the button into a link. The url is handed off url_for, so this is basically link_to with Bootstrap classes.
href
Some options are available:
$app->plugin('BootstrapHelpers', { tag_prefix => 'bs', shortcut_prefix => 'set', init_shortcuts => 1, });
Default: undef
If you want to you change the name of the tag helpers, by applying a prefix. These are not aliases, by using the prefix to original names are no longer available. The following rules are used:
If the option is missing, or is undef, there is no prefix.
If the option is set to the empty string, the prefix is _. That is, panel is now used as _panel.
_
panel
_panel
If the option is set to any other string, the prefix is that string followed by _. If you set tag_prefix => 'bs', then panel is now used as bs_panel.
tag_prefix => 'bs'
bs_panel
This is similar to tag_prefix, but is instead applied to the shortcuts. The same rules applies.
tag_prefix
Default: 1
1
If you don't want the shortcuts setup at all, set this option to a defined but false value.
All functionality is available, but instead of warning you must now use __warning => 1. That is why they are shortcuts.
warning
__warning => 1
Erik Carlsson <csson@cpan.org>
Copyright 2014- Erik Carlsson
This library is free software; you can redistribute it and/or modify it under the same terms as Perl itself.
To install Mojolicious::Plugin::BootstrapHelpers, copy and paste the appropriate command in to your terminal.
cpanm
cpanm Mojolicious::Plugin::BootstrapHelpers
CPAN shell
perl -MCPAN -e shell install Mojolicious::Plugin::BootstrapHelpers
For more information on module installation, please visit the detailed CPAN module installation guide.