Improving grid situation

[MrTango]

I discussed with @tmassman the situation with the current grid we use in Mosaic. The down side of the surrent way we apply the grid definitions, is that if some one does not use Barceloneta or bootstrap theme, it needs always custom definitions for Mosaic. The same applies for other addons who want to define some kind of a grid but don't want to care about what grid system the users later use with there theme. He proposed that we go back to the marker classes in the html. This could then transformed by portal transforms or better with some Diazo rules. It does not have to be specific classes like bootstrap, but some everybody can use then in Plone addons to define grid columns. I would prefere the way skel.io is doing it. They just name it units. So you can have 1-12 units.

currently I'm doing things like below with Diazo rules, which works fine for me, but it only works for Mosaic grid. A generic way for doing that in Plone would be nice. So that these rules or a portal_transforms would work for all addons using a grid.

gist diazo rules

<div class="mosaic-grid-cell mosaic-position-two-thirds mosaic-width-third 4u 12u(mobile)">1 third content</div>
<div class="mosaic-grid-cell mosaic-position-leftmost mosaic-width-two-thirds 8u 12u(mobile)">2 third content</div>

Because we are apply the bootstrap grid by default, a had to unset some of the grid settings like width and float:

.mosaic-width-quarter{
  width: unset;
  float: unset;
}

Maybe we should not define the grid in Mosaic it self, but add the needed styles to Barceloneta theme, because it alsways releated to the theme and the used grid system. And by applying it be default we have side effects for the users.

Any ideas how to improve this?

[datakurre]

By overriding the Mosaic grid resource.

The first version of Mosaic had transform, which resulted in desired grid classes (back then it supported decogs and bs3). That was considered too complex, transform was removed and replaced with default grid. In the current version the grid is in its own resource so it should be overridable with custom grid (building a grid for Mosaic classes).

Here is an example grid for BS4 https://github.com/jyukopla/reclas/blob/master/resources/src/reclastheme/theme.extensions.mosaic.scss

I build separate grid for edit and view to only have responsive grid on view.

[b4oshany]

Using XSLT functions, you can remove the mosaic grid row and column classes and keep the other classes by doing the following:

        <replace css:content=".mosaic-grid-row">
            <xsl:copy>
                <xsl:copy-of select="@*" />
                <xsl:variable name="classlist" select="./@class"/>
                <xsl:attribute name="class">mosaic-transform row <xsl:value-of select="substring-after($classlist, 'mosaic-grid-row ')" /></xsl:attribute>
                <xsl:apply-templates />
            </xsl:copy>
        </replace>

See the full code at https://gist.github.com/b4oshany/5417ff922b0371774bfaf34271741ca4