I am wondering the same thing, have you found a way to work around this issue? Currently all I can think of is to add a custom property and change the way the display views work, but that seems like quite a bit of work...

@Robert - No, I have not figured this one out yet. I can't see this working without having to change a lot of markup on every new website. We will continue using Archtype to make stuff like this. http://our.umbraco.org/projects/backoffice-extensions/archetype/

Unless someone comes up with a solution for the Grid system.

/Rune

Hello,

Did you try the Fanoe starter kit? It installs if you do a default install of Umbraco 7.2 without customizing. 

Jeroen

Also there is a lot of customization possible for the Grid system.

Try these videos and documentation: 

http://www.umbraco.tv/videos/umbraco-v7/implementor/fundamentals/grid-layouts/

http://our.umbraco.org/documentation/using-umbraco/backoffice-overview/property-editors/built-in-property-editors-v7/grid-layout

Jeroen

Hi Jeroen,

Implementing and starting to use the grid system is not a problem at all. What they have done around that is fantastic, and very easy to use.

The problem is making it truly responsive by alowing a block to fill 3 columns in one screen size and 4 columns in another. There's no settings for that, as far as I can see. All you can choose is one number of column per block and that won't cut it.

/Rune

I understand the problem. Don't think there is a solution for that yet. Maybe you can do something with this blogpost: http://24days.in/umbraco/2014/grid-macros/

You could also add a feature request here: http://issues.umbraco.org/dashboard#newissue=yes

Jeroen

Well, what I decided to do is to just style each possible row configuration for responsiveness. We know that (for Bootstrap 3) the resulting html is similar to the following:

div with attribute per row config property
  div.row
    div.col-md-xx.column
      div with attribute per column config property

What I do is create a new row config property 'Row Template' that uses the dropdownlist as an editor with certain specific templates I plan on styling.

Let's say one of the Row Templates is 'Unique Selling points' with value USP. The resulting html would become:

<div row-template="usp">
  <div class="row">
    <div class="col-md-4>
       <div>some unique selling point</div>
    </div>
    <div class="col-md-4>
       <div>some unique selling point</div>
    </div>
    <div class="col-md-4>
       <div>some unique selling point</div>
    </div>
  </div>
</div>

Now lets say I always want the USP's to be columns regardless of the width of the screen. I can simply add to my .less file:

[row-template='usp'] {
  .col-md-4 {
    float: left;
    width: percentage(1/3);
  }
}

The biggest downfall of this approach is that the end user will always have to choose a row template in addition to picking a row configuration. It'd be much nicer if it were possible to add a default row class to a row configuration. This is really easy to add though (and it's what I do in practise as opposed to the template approach), but it requires modifying standard Umbraco files which I'm normally not particulary fond of...

is working on a reply...