Customise Bootstrap in Meteor with Less

Meteor is a JavaScript framework built on top of NodeJS to create web applications and mobile apps based on Cordova. Bootstrap is a popular stylesheet theme maintained by core developers from Twitter. This article explains how to customise Bootstrap within a Meteor application.

Bootstrap styles are written in Less. Less is similar to SASS. It allows to reuse variables and styles. It makes the styles easier to maintain. Less files are compiled to CSS usually on the server.

twbs:bootstrap is a package that has the compiled version of Bootstrap styles in CSS. The compiled version of Bootstrap is difficult to customise. To customise Bootstrap in Meteor, we need to use the Less version of Bootstrap.

Meteor has in-built support for Less files with the less package. To add the package, simply run the command:

meteor add less

huttonr:bootstrap3 is a package that the Less version of Bootstrap. Add the package:

meteor add huttonr:bootstrap3

In the client/stylesheet folder of the application, create a new file: bootstrap-settings.json. Run the  application. When the application runs, the bootstrap-settings.json file is populated with the default settings.

One of the settings is customVariables. By default, it is set to false. To customise Bootstrap, turn this to true.

{
  "less": {
    "customVariables": true,
    "exposeMixins": false,
    "compile": true,

    "modules": {
       "alerts": true,
       "badges": true
    }
  }
}

Setting the customVariables to true dumps a file called bootstrap-variables.less. This file contains all the variables defined in Bootstrap. Changing a variable in the file will customise the Bootstrap theme.

For example, the default background color of the navigation bar is #f8f8f8. This can be customised to a different color.

@navbar-default-color:             #ffffff; // #777;
@navbar-default-bg:                #3a5199; // #f8f8f8;
@navbar-default-border:            darken(@navbar-default-bg, 6.5%);

The image below shows how the navigation will look after the background color customisation.

Navbar customisation
Navbar customisation

Hope this got you started with Twitter Bootstrap in Meteor.

 

Related Posts

Leave a Reply

Your email address will not be published.