NAME
Mojolicious::Plugin::Bootstrap3 - Mojolicious + http://getbootstrap.com/
VERSION
3.3500
DESCRIPTION
Mojolicious::Plugin::Bootstrap3 is used to include
CSS and JavaScript files into your project.
This is done with the help of Mojolicious::Plugin::AssetPack and Sass
.
See "DESCRIPTION" in Mojolicious::Plugin::AssetPack::Preprocessor::Sass
on how to intall Sass.
SYNOPSIS
Mojolicious application with embedded template
use Mojolicious::Lite;
plugin "bootstrap3";
get "/" => "index";
app->start;
__DATA__
@@ index.html.ep
%= asset "bootstrap.css"
%= asset "bootstrap.js"
%= form_for "index", begin
% end
Alarm!
This basic application will make the "bootstrap.css" and "bootstrap.js"
assets available, which again is loaded into the "index.html.ep"
template in the data section.
Note: If this is all you're going to do, you can rather use AssetPack
directly:
use Mojolicious::Lite;
plugin "AssetPack";
app->asset("bootstrap.css" => "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css");
app->asset("bootstrap.js" => "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js");
Custom stylesheet
The reason for using this plugin is that it's very easy to customize
Bootstrap, and make a smaller package for the user to download.
use Mojolicious::Lite;
plugin "bootstrap3", {custom => 1};
get "/" => "index";
app->start;
Setting "custom" to a true value will copy "bootstrap.scss" to your
"public/sass" directory. You can then edit the file and remove the parts
you don't need.
Custom javascript
Custom list of which javascript to include can be done directly in the
configuration:
plugin "bootstrap3", jquery => 0, js => [qw( transition.js tooltip.js )];
The config above will *not* include jQuery, and only include
"transition.js" and "tooltip.js" in the output "bootstrap.js" bundle.
Complete list of possible javascripts can be found under "STATIC FILE
STRUCTURE".
Themes
It is very simple to use a custom _variables.scss
file with your project. This file contains the
variables controlling colors, fonts and styling rules in general.
Example:
# application code
$app->plugin(bootstrap3 => (
theme => {xyz => "http://example.com/_variables.scss"}
));
# template code
%= asset "xyz.css"
%= asset "bootstrap.js"
There is also built in support for themes from .
To use one of the themes from bootswatch, simply specify the URL to the
"_bootswatch.scss" file instead of "_variables.scss":
# application code
$app->plugin(bootstrap3 => (
theme => {paper => "https://bootswatch.com/paper/_bootswatch.scss"}
));
# template code
%= asset "paper.css"
%= asset "bootstrap.js"
STATIC FILE STRUCTURE
You can replace any of these static files in your own project.
public/sass/bootstrap.scss
and public/sass/bootstrap/_variables.scss
are probably the files that you want to
replace, to make the generated bootstrap file smaller and more personal.
font/glyphicons-halflings-regular.eot
font/glyphicons-halflings-regular.svg
font/glyphicons-halflings-regular.ttf
font/glyphicons-halflings-regular.woff
js/bootstrap/affix.js
js/bootstrap/alert.js
js/bootstrap/button.js
js/bootstrap/carousel.js
js/bootstrap/collapse.js
js/bootstrap/dropdown.js
js/bootstrap/modal.js
js/bootstrap/popover.js
js/bootstrap/scrollspy.js
js/bootstrap/tab.js
js/bootstrap/tooltip.js
js/bootstrap/transition.js
js/jquery-1.11.0.min.js
sass/bootstrap.scss
sass/bootstrap/_alerts.scss
sass/bootstrap/_badges.scss
sass/bootstrap/_breadcrumbs.scss
sass/bootstrap/_button-groups.scss
sass/bootstrap/_buttons.scss
sass/bootstrap/_carousel.scss
sass/bootstrap/_close.scss
sass/bootstrap/_code.scss
sass/bootstrap/_component-animations.scss
sass/bootstrap/_dropdowns.scss
sass/bootstrap/_field-with-error.scss
sass/bootstrap/_forms.scss
sass/bootstrap/_glyphicons.scss
sass/bootstrap/_grid.scss
sass/bootstrap/_input-groups.scss
sass/bootstrap/_jumbotron.scss
sass/bootstrap/_labels.scss
sass/bootstrap/_list-group.scss
sass/bootstrap/_media.scss
sass/bootstrap/_mixins.scss
sass/bootstrap/_modals.scss
sass/bootstrap/_navbar.scss
sass/bootstrap/_navs.scss
sass/bootstrap/_normalize.scss
sass/bootstrap/_pager.scss
sass/bootstrap/_pagination.scss
sass/bootstrap/_panels.scss
sass/bootstrap/_popovers.scss
sass/bootstrap/_print.scss
sass/bootstrap/_progress-bars.scss
sass/bootstrap/_responsive-utilities.scss
sass/bootstrap/_scaffolding.scss
sass/bootstrap/_tables.scss
sass/bootstrap/_theme.scss
sass/bootstrap/_thumbnails.scss
sass/bootstrap/_tooltip.scss
sass/bootstrap/_type.scss
sass/bootstrap/_utilities.scss
sass/bootstrap/_variables.scss
sass/bootstrap/_wells.scss
Non-standard files
Some of the static files are not bundled with the original Bootstrap
distribution.
* js/jquery-1.11.0.min.js
The jQuery bundled with this distribution will always be compatible
with the Bootstrap javascript files. It might change minor version,
but it is very unlikely that it will change much. Exceptions from
this rule is if the Bootstrap javascripts should require a newer
version to function properly.
* sass/bootstrap/_field-with-error.scss
This SASS file need to be included manually. It is used to style
.field-with-error tags, the same way as .has-error
.
Example of markup that will be styled on invalid input:
%= label_for "username", "Username", class => "col-sm-2 control-label"
%= text_field "username", class => "form-control"
This is EXPERIMENTAL and subject to change.
METHODS
asset_path
$path = Mojolicious::Plugin::Bootstrap3->asset_path($type);
$path = $self->asset_path($type);
Returns the base path to the assets bundled with this module.
Set $type to "sass" if you want a return value that is suitable for the
"SASS_PATH" environment variable.
register
$app->plugin(
bootstrap3 => {
css => [qw( bootstrap.scss )],
js => [qw( button.js collapse.js ... )],
custom => 0,
jquery => 1,
theme => undef,
},
);
Default values:
* css: "bootstrap.scss"
The name of the files to include in the asset named "bootstrap.css".
Specify an empty list to disable building "bootstrap.css".
* js
"affix.js", "alert.js", "button.js", "carousel.js", "collapse.js",
"dropdown.js", "modal.js", "popover.js", "scrollspy.js", "tab.js",
"tooltip.js" and "transition.js".
The name of the files to include in the asset named "bootstrap.js".
Specify an empty list to disable building "bootstrap.css".
* custom
Disabled by default. Will copy "sass/bootstrap.scss" to your project
if true and set "SASS_PATH" to the appropriate paths.
* jquery
This will include the bundled jQuery version in
the bootstrap.js asset. Set this to 0 if you include your own
jQuery.
* theme
Specifying a theme will override "custom" and "css".
See "Themes".
CREDITS
bootstrap-sass has a number of
major contributors:
Thomas McDonald
Tristan Harward
Peter Gumeson
Gleb Mazovetskiy
and a significant number of other contributors
LICENSE
Bootstrap is licensed under MIT
Mojolicious is licensed under Artistic License version 2.0 and so is
this code.
AUTHOR
Jan Henning Thorsen - "jhthorsen@cpan.org"