In case Semantic Views should be used for grid framworks such as bootstrap or foundation we need a markup such as

<div class="row"> // wrapper of the whole output
  <div class="col-xs-12 col-md-6"> // row wrapper tag
     <article class="box"> // row tag
       ... some fields ...
     </article>
  </div>
  <div class="col-xs-12 col-md-6">
     <article class="box">
       ... some fields ...
     </article>
  </div>
</div>

Therefore two changes would be necessary within "Semantic Views Style" to enable such markup:

  1. Change the "list" option to "wrapper" and enable to define a tag. In this case the tag is "div" with the class attribute "row".
  2. Add a row wrapper tag in addition to the row tag. In this case the row wrapper tag would be "div" with the class attribute "col-xs-12 col-md-6" and the row tag would be "article" with the class attribute "box".

The seperate row wrapper tag and row tag are necessary because the "col-xs-12 col-md-6" has a padding that must be seperated from the padding of "box". More general within the philosophy of grid frameworks they should be seperated.

Comments

demonde created an issue.

Scyther’s picture

I often use the Views css as "row" and then the row element i use with Foundations "column". But I see here you also have a inner element of the row.

demonde’s picture

Right now I use a rewritten version of Views Bootstrap Responsive Grid to achieve this.
https://www.drupal.org/sandbox/gido/2456873

But having Semantic Views for this would be a more general approach.