Mosaic: Fluid and Fixed Containers in one layout

Is there a way to distinguish a row as being fluid vs being fixed?
See the diagram below:

Additional context
I'd like to be able to do a layout like the one in the screenshot, as you can see the top "hero" content area (labeled Fluid container) fills the width of the page while the the next area (labelled Fixed container) has a defined width. I'd like to be able to achieve both easily in the same layout using Mosaic.

1 Like

We do this with custom row formats.

And you can do this in one of 2 ways.

  1. Default row style is fluid and then add a row style to constrain the width
  2. The reverse of one.

quick example

registry config:

<record name="plone.app.mosaic.default_available_actions">
    <value purge="False">
      <element>grid-row-fullwidth</element>
    </value>
</record>
<records interface="plone.app.mosaic.interfaces.IFormat"
           prefix="plone.app.mosaic.formats.grid_row_fullwidth">
    <value key="name">grid-row-fullwidth</value>
    <value key="category">row</value>
    <value key="label">Full width</value>
    <value key="action">row-toggle-class</value>
    <value key="icon">true</value>
    <value key="favorite">false</value>
    <value key="weight">100</value>
  </records>

less:

// default row
. mosaic-grid-row {
    padding-left: calc((100% / 2) - 585px);
    padding-right: calc((100% / 2) - 585px);
}
// override
.mosaic-grid-row-fullwidth {
  padding-left: 0;
  padding-right: 0;
}

Your less rules get more complicated if you have right and left columns.

2 Likes

Cool... on another note... wouldn't it be great if all this registry config stuff was in JSON or YAML? :slight_smile:

1 Like

I still haven't dug deeply enough into "the Mosaic way" to know how feasible this is yet but the "end game" for me with Mosaic would involve being able to do something similar to systems like Mobirise.
Where you are able to have (1) preprepared block tiles (A block is a composite of a few types of tiles). (2) a block tile could be toggled between fluid and fixed.

See my mockup (a mashup of ideas from mobirise and mosaic). In the mockup there is a pull down sidebar on the left containing available block tiles. In the before panel one block tile is being dragged into the layout.

This would leap frog Mosaic beyond something like Mobirise because it already supports more custom tiles such as theme fragments and rapido tiles.

1 Like

I think your use-case would work fine.

Just found this:

It really captures the same direction I'd like to go in.

1 Like

I did 'some trying' trying with this, and I found that the easiest was to set the the whole content area to 100%, and then add width to every tile that was not 'something'. It is actually possible to make a template that has some parts fluid and some not, but I felt that this ended up as a mess.

Slightly unrelated, but I am just making my first wordpress site, and I found an add on that does what you want. ( https://siteorigin.com ). This works pretty well, but I am not sure of 'how they do it'.

( the result is this, I assume there must be a javascript that calculates negative margins: http://egnevalg.no/wp/ )

Like this? :slight_smile: http://plonerestapi.readthedocs.io/en/latest/registry.html#reading-registry-records

1 Like

They've put a lot of work into that page builder plugin and it does have many of the characteristics that I'm looking for. In fact it has additional things that I didn't think of but make sense. The video I included above is closer to the final goal though (ready made draggable combined blocks).

Yes, didn't realize plonerestapi was already doing that.

We will work next week on Mosaic at the #PloneMephistoSprint in Leipzig/Germany.
http://www.coactivate.org/projects/plone-mephisto-sprint-2016/project-home

@pigeonflight do like to join us from remote, so we can discuss some ideas?

@MrTango,
Is there a preferred day next week for this? Thursdays are usually possible for me.

Sorry i missed this post some how :frowning:

No problem. Perhaps there can be a BoF or Open Space at the conference for this.

1 Like

I am making a new theme, and to my big surprise I noticed that themingfragents now works as fluid.
This is great news, and means that I can put together pages like this:
http://xweb14f.plana.dk:8080/systemtrafikk
by ONLY using mosaic.
This works basically OOTB. The only hack I did was to add a "clear floats" tile (basically just a div with a clear floats CSS class.

1 Like

Not getting to that page. Maybe a screenshot could work?

http://systemtrafikk.medialog.no

(under construction, it will be system-trafikk.no in a week or two)

Quick note, mostly for my future self, that purge="False" is critical.
I missed it in my initial implementation and lots of the layout related menu disappeared!!

I think that we should look at a way to add support for containers (in the bootstrap world that would correspond to the container and container-fluid classes).

The hierarchy would be:
containers > rows > cells

Then rows could be added to the container and the container would be toggled to be either container-fluid or container.