Updating Container Styles Programatically

help
1

Hey all, just curious if anyone’s run into a similar situation:

I’m currently working with Semantic UI and have dynamic content rendering like so:

<body>
  <div id="__blaze-root">
    <div class="pusher">
      <div class="ui container main">
        {{> Template.dynamic template=content}}
      </div>
    </div>
  </div>
<div>

Now, a team member wants to make style changes by route/module at the .pusher level, but my only idea so far is to add/remove classes based on the route. Just wondering if anyone has any other thoughts before I move the containers into each module template so we can tack on classes there.

2

I haven’t run into this situation but still like to share some ideas:

Option 1: Move the .pusher container into each template.
As you’ve already mentioned it’s an option. However it means a lot of code duplication. Another thing I (personally) don’t like about this approach is that the .pusher and .container classes exist for layout purposes in my mind. So they should be exactly where you placed them and not inside the templates. Just feels wrong to me.

Option 2: Set a class based on route.
If you use FlowRouter you could probably set a session on route and pass it the class name. Not sure how I feel about this, but it would work I guess.

Option 3: Set a class based on template.
You could set a session or better a reactiveVar in an onCreated() to add the class you need. This is probably how I would do it since the logic stays with the template. (If I understand correctly the stylechange is caused by the template.)

Option 4: Do some crazy CSS magic
As you probably know you can only go “down” the DOM in css.
In your case you would need to go “up”, which is something css can’t do by design.

However just recently Element Queries for CSS came out.
http://elementqueries.com

With this you could actually move “up” the DOM in css. I find it pretty fascinating and it could solve your problem I think, but haven’t tried it yet. So I can’t say for sure.

Hope that helps!
Good luck :slight_smile:

3 Likes
3

Awesome response, thanks.

I’ll definitely give Element Queries a shot – also, they look like a perfect way to simulate media queries for device previews, etc., so thanks for bringing them to my attention!