NAME Mojolicious::Plugin::Bootstrap3 - Mojolicious + http://getbootstrap.com/ VERSION 3.3501 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"