Less/CSS rules need to be scoped

[cjsauer]

When a package is loaded, all of it's Less files are compiled and sent to the client. This forces the rules to be applied to every template/layout across all packages. It's necessary to scope these rules on a per template or layout basis so that the rules only apply exactly where you mean them to be.

For example:

@import (reference) url('/packages/app-bootstrap/theme.bootstrap.less');

#homepage {
  h1.fresh {
    margin-top: 2em;
    text-align: center;
    font-size: 6em;
    color: @gray-light;
  }
}

and then in a template:

<template name="home">
  <div id="homepage">  
    <div class="row">
      <h1 class="fresh">Enjoy your fresh start.</h1>
    </div>
  </div>
</template>

Now these CSS rules will only be applied to that specific template. The same applies to layouts. For example, you might scope the app to the rule #app and wrap your layout in <div id="app"> tags. You might scope your admin layout rules within #admin and wrap your admin template with <div id="admin" tags. Now you can have separate rules for both layouts.

This also requires that we don't define layout: 'layout' globally within Iron Router, but on a per-route basis. Otherwise the template used as the layout will depend on package load order, which isn't expected behavior. This could be easily solved using route groups to keep things DRY.

[cjsauer]

It should be noted that the README currently says that you can api.use('app:adminLayout') in your package.js file, and in this way use more than one layout template in your app. This isn't true and will not work as expected because of what I wrote above.

We will need to scope CSS rules (like above), as well as define the route layout template on a per-route basis for this to work properly.