Git Product home page Git Product logo

jamgold-bootstrap3boilerplate's Introduction

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' });

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'}
]}

jamgold-bootstrap3boilerplate's People

Contributors

jamgold avatar sgaluza avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.