Bootstrap-3 Boilerplate

this small package helps to automate the reoccurring setup for Bootstrap 3.

Installation

Installation is simple, just add the package

meteor add jamgold:bootstrap3boilerplate

and your preferred bootstrap3 package, eg.

meteor add mrt:bootstrap-3

Setup

No Iron Router

If Iron:Router is not used, the system defaults to Template.dynamic via the Session variable Bootstrap3boilerplateContent.

Include the Bootstrap3boilerplate template in your body tag

{{>Bootstrap3boilerplate}}

and initialize the setup. Without Iron Router the hash is being used to set the template to use as content. Manually this can be achieved with Bootstrap3boilerplate.setContent('#something') which will then try to load template 'something'

if(Meteor.isClient) { Bootstrap3boilerplate.init(); }

The package exports the Object Bootstrap3boilerplate that allows to configure the menus and styles and event maps for the menu.

With Iron Router

simple configure Iron Router to use Bootstrap3Boilerplate as the layoutTemplate

Router.configure({
    layoutTemplate: 'Bootstrap3boilerplate'
});
if(Meteor.isClient)
{
    Bootstrap3boilerplate.init();
}

With Flow Router

FlowRouter.route('/', {
  name: 'route_name',
  action: function(params) {
    BlazeLayout.render(Bootstrap3boilerplate.layout, {
      // specify the name of the template to be rendered
      content: "template"
    });
  }
});

Configuration

The package exports a global object called Bootstrap3boilerplate which is being used to control the different aspects of the template.

The following reactive vars can be set

• Bootstrap3boilerplate.ProjectName.set(String) set string in top left
• Bootstrap3boilerplate.fluid.set(Boolean) container layout fluid or not
• Bootstrap3boilerplate.Navbar.type.set(Style) set the template Navbar style to on of navbar-default|navbar-static-top|navbar-fixed-top
• Bootstrap3boilerplate.Navbar.inverse.set(Boolean) Set Navbar inverse

and one static string defining the Not Found template

• Bootstrap3boilerplate.notFound = 'Template' set the notFound template, default Bootstrap3boilerplateNotFound

• Bootstrap3boilerplate.Footer.show.set(boolean) show the footer (default true)

• Bootstrap3boilerplate.Footer.content.set(text) the text in the footer (default Meteor.release)

The following are methods that can be overridden

• Bootstrap3boilerplate.Navbar.left = function() return array of menu objects
• Bootstrap3boilerplate.Navbar.right = function() return array of menu objects

where a menu object is contains href and text, and optionally a sub-array called dropdown. Three special menu objects are divider:true, header: 'Text' and showLoginButtons:true which will render {{>loginButtons}}

The Boilerplate handles which menu item is active based on the current URL/slug, unless overwritten by the optional active:true

Lastly a couple of remaining methods of the Bootstrap-3 Boilerplate

• Bootstrap3boilerplate.Navbar.events(MeteorEventDefinition) Define the event callbacs for the Navbar
• Bootstrap3boilerplate.Navbar.defaultEvents() setup default events for the Navbar
• Bootstrap3boilerplate.init(customEvents) initialize the boilerplate and the the Navbar events. If omitted init will call the defaultEvents() method
• Bootstrap3boilerplate.alert(type,text,dismiss) show bootstrap alert of type
• Bootstrap3boilerplate.removeAlert(id|'all'|'clear') remove a specific or all alerts

Menu Object Example

{href:'#hello',text:'Home'},
{href:'#about',text:'About'},
{href:'#contact',text:'Contact'},
{text:'Dropdown',dropdown:[
    {href:'#action1',text: 'Action'},
    {href:'#action2',text: 'Another Action'},
    {divider: true},
    {header: 'Some More'},
    {href:"#sep1", text: 'Separated link'},
    {href:"#sep2", text: 'One more separated link'}
]}

Modals

The boilerplate has support for Bootstrap Modals built-in. Bootstrap3boilerplate.Modal.show() and Bootstrap3boilerplate.Modal.hide() control the display of the Modal. You can determine what to show in the modal with Bootstrap3boilerplate.Modal.title.set(text) and Bootstrap3boilerplate.Modal.body.set(text). Instead of setting the body text of the Modal, you can dynamically load a template instead by defining Bootstrap3boilerplate.Modal.dynamicTemplate.set(templateName). Other variables for the Modal are

• Bootstrap3boilerplate.Modal.large.set(boolean) determine whether to render modal with modal-lg (default false)
• Bootstrap3boilerplate.Modal.effect.set(effect) set the Modal transition (default fade)
• Bootstrap3boilerplate.Modal.formId.set(string) determins if a save button will be shown
• Bootstrap3boilerplate.Modal.save Object this object contains three values
  • classes: defines the CSS classes for the save button
  • text: the text of the Save button
  • action: a function that will be called when the save button is clicked