Adaptive modules with SMACSS

Question

I use SMACSS in few projects, but ussually face one issue - what is the correct way to build adaptive content modules.

For example i have LAYOUT grid classes (.container, .row, .span-1, .span-N) + media queries for adaptive design.

I'd like to use same rules for content module to manage adaptive behavior, for e.g divide linklist into columns:

<ul class="list">
  <li class="list-el"> item 1</li>
  <li class="list-el"> item 1</li>
  <li class="list-el"> item 1</li>
  <li class="list-el"> item 1</li>
</ul>

I can manage it adding LAYOUT classes to MODULE elements like this:

<ul class="list row">
    <li class="list-el span-3"> item 1</li>
    <li class="list-el span-3"> item 1</li>
    <li class="list-el span-3"> item 1</li>
    <li class="list-el span-3"> item 1</li>
</ul>

But this approach makae tight coupling between LAYOUT and MODULE , what break main rule of SMACSS, that module should be independent from LAYOUT.

The other way is build special module (.adapt), and put content module into it like this:

<div class="adapt">
    <div class="adapt-span3">
        <ul class="list">
            <li class="list-el"> item 1</li>
            <li class="list-el"> item 1</li>
            <li class="list-el"> item 1</li>
            <li class="list-el"> item 1</li>
        </ul>
    </div>
    <div class="adapt-span3">
      <ul class="list"> ... </ul>
    </div>
    <div class="adapt-span3">
         <ul class="list"> ... </ul>
    </div>
    <div class="adapt-span3">
         <ul class="list"> ... </ul>
    </div>
</div>

This way doesent break the rules, but HTML markup looks overloaded.

So the question - What is the way you build adaptive content modules in SMACSS ?

Answer 1

After some discussions and case studies passed, i've find out that the correct way for such cases use some mediator block , like list with percentage width of its items. So it can help to separate LAYOUT from MODULE , make mediator block could be used in different layouts grids and manage different adaptive behavior rules for mediator block and layout.