/ 
Mojolicious-Plugin-Bootstrap3-3.3007
/ Mojolicious::Plugin::Bootstrap3

NAME

Mojolicious::Plugin::Bootstrap3 - Mojolicious + http://getbootstrap.com/

VERSION

3.3007

DESCRIPTION

Mojolicious::Plugin::Bootstrap3 is used to include http://getbootstrap.com/ 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

use Mojolicious::Lite;
plugin "bootstrap3";
get "/" => "index";
app->start;

This basic application will make the bootstrap.css and bootstrap.js assets available, which you can load in your template.

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");

Mojolicious template

<!doctype html>
<html>
  <head>
    %= asset "bootstrap.css"
    %= asset "bootstrap.js"
  </head>
  <body>
    <p class="alert alert-danger">Danger, danger! High Voltage!</p>
  </body>
</html>

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 https://bootswatch.com. 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:

    <div class="form-group">
  %= label_for "username", "Username", class => "col-sm-2 control-label"
  <div class="col-sm-4">
    %= text_field "username", class => "form-control"
  </div>
</div>

    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