Skip to content

Latest commit

 

History

History
73 lines (52 loc) · 2.5 KB

README.md

File metadata and controls

73 lines (52 loc) · 2.5 KB
Raw
Meteor ================================================

'||     .|''''|, '||\   ||` '||'''|. .|''''|, '||\   ||`
 ||     ||    ||  ||\\  ||   ||   || ||    ||  ||\\  ||
 ||     ||    ||  || \\ ||   ||   || ||    ||  || \\ ||
 ||     ||    ||  ||  \\||   ||   || ||    ||  ||  \\||
.||...| `|....|' .||   \||. .||...|' `|....|' .||   \||.

 ============================================ body-class

Giving you Blaze.addBodyClass for live live live reactive class names on the body element.

Works automagically with meteorhacks:flow-router & iron:router to add the current route name as a body class; useful for isolating your page-specific CSS styles.

It's super simple

meteor add london:body-class

Call Blaze.addBodyClass(fn) with a function and its return value will be added as a class to the body.

If that function uses a reactive data source (Collection, Session, etc) then the body class will update when the dependencies change.

You can also just call Blaze.addBodyClass('foo') with a string to add a static class to the body.

Examples

Session.setDefault('state', 'alpha')

Blaze.addBodyClass(function() {
  return Session.get('state')
})

results in

<body class="alpha">

The value from Session.get('state') is added as a class to the element. It will be updated whenever the value for state changes.

// You can also add static classes
Blaze.addBodyClass('foo')

// Or some combination of the two...
Blaze.addBodyClass([
 'bar',
  function () { return Meteor.status().status }
])

results in

<body class="foo bar connected">

Where connected will update to reflect the current connection state with the server.

So, remember kids:

  • If iron:router is present, the current route is automatically added as a body class.
  • If meteorhacks:flow-router is present, the name property of the current route is automatically added as a body class.
  • Calling addBodyClass multiple times is fine. They all end up as additional body classes.
  • Duplicate classes are removed by virtue of using jQuery addClass to do the dirty work.
  • For bonus points: add Meteor.status().status as a body class so you can visualize the connection health.

From the meteorlondon / (╯°□°）╯︵ TABLEFLIP crew