Skip to content

Easily scope CSS by automatically adding the current template and layout names as classes on the body element.

License

Notifications You must be signed in to change notification settings

krishaamer/body-class

 
 

Repository files navigation

Lookback Body Classes for Meteor

Now with ostrio:flow-router-extra support.

Circle CI

This package automatically adds classes on the body element (default) for the names of the current template and layout used. It also reactively updates a class name returned from a function.

Having classes for templates and layouts are great (if not vital) for scoping with CSS and similar.

Install

lookback:body-class is available on Atmosphere:

meteor add lookback:body-class

Usage

The package exports the BodyClass namespace on the client.

The add method adds a class to the body:

// Adds a string, string array or result from a function to the body element.

BodyClass.add('some-class')
// => body.some-class
BodyClass.add(['some-class', 'other-class'])
// => body.some-class.other-class
Session.setDefault('state', 'foo');

BodyClass.add(function() {
  return Session.get('state');
});
// => body.foo

Session.set('state', 'bar');
// => body.bar

Iron Router

The run method adds the names of the current template and/or layout to the body, and cleanup removes them. Goes well with Iron Router's onBeforeAction and onStop hooks:

Router.route('home', {
  path: '/home'
});

Router.route('foo', {
  path: '/foo',
  layoutTemplate: 'DefaultTemplate'
});

Router.onBeforeAction(function() {
  BodyClass.run();
});

Router.onStop(function() {
  BodyClass.cleanup();
});

Router.go('home');
// => body.home

Router.go('foo');
// => body.defaulttemplate.foo

This behavior is available as a nifty one-line-init Iron Router plugin:

Router.plugin('bodyClasses');

Flow Router

Triggers are automatically added for you, with:

FlowRouter.triggers.enter([() => BodyClass.run()]);
FlowRouter.triggers.exit([() => BodyClass.cleanup()]);

For Flow Router, we use the route name and potentially the layout name for a template. Like this:

FlowRouter.route({
  name: 'something',
  layout: 'MyLayout'
});

As of Flow Router 2.8.0, route groups also can specify options, and thus you can use the layout property there as well.

FlowRouter.group({
  name: 'webapp',
  layout: 'WebAppLayout'
});

Note that template and layout names are added in lower case.

Configure

It's possible to configure the package with the following options:

BodyClass.config({
  element: 'body' // What element to manipulate, defaults to 'body'
  classes: []     // What classes that *always* should be added
});

Tests

This package is tested with the sanjo:jasmine package, bundled in a separate Meteor app in the test-app dir. To run tests:

cd test-app
meteor --test

Version history

  • 0.4.1
    • If current route has no layout, get group's, then try parent's, then default layout
  • 0.4.0
    • Add support for Flow Router.
    • Needs Meteor 1.2.0.2.
  • 0.1.0 - Initial publish.

Contributions

Contributions are welcome. Please open issues and/or file Pull Requests.

License

MIT.


Made by Lookback.

About

Easily scope CSS by automatically adding the current template and layout names as classes on the body element.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CoffeeScript 48.5%
  • JavaScript 47.1%
  • HTML 4.4%