HLF Media Grid Extension

Source | Tests

The required extension styling is crucial to extension usage. There's an optional, opinionated set of styles in mg-theme-folio.

Note that --mg-item-expanded-scale is set to 2 and other values are not yet supported. This also requires the item count be enough to form at least two rows.

js-mg is modified with the -dimmed and -ready classes. Note it sets box-sizing: border-box for itself and its descendants, and the (initial) flex-box positioning.

js-mg-item can be modified with the -expanded, -focused, -transitioning classes. Note the (initial) flex-box positioning, as well as the complex z-index rules when the item has modifier classes.

Its element's DOM can look like (especially if using mg-theme-folio):

<article class="js-mg-item">
  <section class="mg-preview"><!-- hidden when expanded -->
    <img src="..." />
    <div class="mg-headings">
      <h1 class="mg-title">...</h1>
      <h2 class="mg-date">...</h2>
    </div>
    <ul class="mg-tags">
      <li>...</li>
      <li>...</li>
    </ul>
  </section>
  <section class="mg-detail"><!-- visible when expanded -->
    <img src="..." />
    <div class="mg-headings">
      <h1 class="mg-title">...</h1>
      <h2 class="mg-date">...</h2>
    </div>
    <p>...</p>
    <ul class="mg-tags">
      <li>...</li>
      <li>...</li>
    </ul>
  </section>
</article>