Grid: provide 3 levels of nesting about vanilla-framework HOT 9 OPEN

Seems to not work even at just 2 levels of nesting:

from vanilla-framework.

Something very strange, we do have at least 2 nested levels defined in the css - see top right, but it doesn't work:

code fro this screenshot:

<section class="p-strip is-shallow">
  <hr class="p-rule">
  <div class="row">
    <div class="col-3">
      <h2 class="p-heading--2">Resources</h2>
    </div>
    <div class="col-8">
      <div class="row">
        <div class="col-3 col-medium-1">
          <h3 class="p-heading--5" data-gtm-vis-recent-on-screen1014405_499="92" data-gtm-vis-first-on-screen1014405_499="92" data-gtm-vis-total-visible-time1014405_499="100" data-gtm-vis-has-fired1014405_499="1">eBook</h3>
        </div>
        <div class="col-medium-3">
          <p data-gtm-vis-has-fired1014405_503="1"><a href="https://pages.ubuntu.com/Forrester_TAP_Report_2016.html">Forrester Research - get more from the cloud</a></p>
        </div>
      </div>
    </div>
    <div class="col-3 col-medium-4">
      <h3 class="p-heading--5" data-gtm-vis-has-fired1014405_499="1">Whitepaper</h3>
      <p data-gtm-vis-has-fired1014405_503="1"><a href="http://www-01.ibm.com/marketing/iwm/dre/signup?source=stg-web&amp;S_PKG=ov47989&amp;S_TACT=C47305CW">IDC - next generation applications on Ubuntu for LinuxONE/z</a></p>
      <hr class="u-hide--large">
    </div>
    <div class="col-3 col-medium-4">
      <h3 class="p-heading--5" data-gtm-vis-has-fired1014405_499="1">Webinar</h3>
      <p data-gtm-vis-has-fired1014405_503="1"><a href="https://www.youtube.com/watch?v=WxTAd0zqruA">Discover the Cloud and scale out world of Ubuntu on IBM</a></p>
      <hr class="u-hide--large">
    </div>
  </div>
</section>

from vanilla-framework.

@lyubomir-popov can you paste links to the pages where it actually happens, there maybe something else going on

Nesting does work on Vanilla grid: https://vanillaframework.io/docs/examples/patterns/grid/nested

from vanilla-framework.

ended up doing something else, so no actual pr with this.

from vanilla-framework.

@bartaz but just pasting the markup above into the vanilla nesting example (no css other than what is in vanilla), it still doesn't work:

from vanilla-framework.

think I found it - this works:

this doesn't:

from vanilla-framework.

this doesn't:

@lyubomir-popov this doesn't work because there is no col defined for desktop, so it likely assumes 12 column. It needs to define how many columns on desktop it uses.

from vanilla-framework.

Grid nesting works as expected, to any level with standard low level grid class names (row, etc).

With shorthand row--25-75 nesting works on first level (row--25-75 > col > row), but fails on deeper levels. Issue seems to be caused by CSS specificity and conflict between styles applied by standard .col-X > .row vs styles applied by row--25-75.

So we can have a look at fixing this on deeper levels. But it may require making some strict assumptions on markup (such as nested row is always direct child of it's parent col-), because otherwise nested rows will not know which of parent cols should define it's size.

Exploration on CodePen: https://codepen.io/bartoszopka/pen/dyLWOEO

from vanilla-framework.

@lyubomir-popov BTW, by "3 levels of nesting" do you mean, having 3 grids:

row--25-75 > nested row > another nested row

or actually 3 nested grids, 4 in total?

row--25-75 > nested row > nested row > nested row (which seems like a lot)

from vanilla-framework.