Media queries (and other queries)

[gavinmcfarland]

I was wondering if you have any suggestions for how you might write attributes which you want styled differently for different contexts.

For example in Bootstap you might write

<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>

How would you see this being written using Attribute Modules? Something like this perhaps?

<div am-row>
  <div am-column-md="8">.col-md-8</div>
  <div am-column-md="4">.col-md-4</div>
</div>

[geelen]

We suggest using a breakpoint: prefix on attribute values for responsive styles. So, in your examples:

<div am-row>
  <div am-column="md:8">.col-md-8</div>
  <div am-column="md:4">.col-md-4</div>
</div>

See this section of am-grid for an example: https://github.com/benschwarz/am-grid/blob/master/src/grid.css#L134

[gavinmcfarland]

Ah I see. Cool Thanks. That makes sense.