moo-component-container-wrap v1.0.3

MoO Container Wrap

The ContainerWrap classes allow for a background image or background color to be fluid with content height. There are several options:

Standard / Before

Use ContainerWrap-before to place the background style on the left and content on the right

<div class="ContainerWrap u-bgRedLighter">
  <div class="ContainerWrap-before u-bgYellowLighter"></div>
  <div class="Container">
    <div class="Grid">
      <div class="Grid-cell u-size1of2 u-bgYellowLighter">
        <p class="u-pV10">Cell</p>
      </div>
      <div class="Grid-cell u-size1of2 u-bgRedLighter">
        <p class="u-pV10">Cell</p>
      </div>
    </div>
  </div>
</div>

After

Use ContainerWrap-after to place the background style on the right and content on the left

<div class="ContainerWrap u-bgYellowLighter">
  <div class="Container">
    <div class="Grid">
      <div class="Grid-cell u-size1of2 u-bgYellowLighter">
        <p class="u-pV10">Cell</p>
      </div>
      <div class="Grid-cell u-size1of2 u-bgRedLighter">
        <p class="u-pV10">Cell</p>
      </div>
    </div>
  </div>
  <div class="ContainerWrap-after u-bgRedLighter"></div>
</div>

Applied in context

Fullscreen Image-Content Split

Use a Grid with a Grid-cell that has content inside of a Container. The Grid-cell will have an offset that matches the size of the ContainerWrap-before or ContainerWrap-after size

Uses Grid Doesn't need to be 50%-50%; Use .u-sizeXofX if needed

<div class="ContainerWrap u-bgRedLighter">
  <div
    class="ContainerWrap-before Image Image--fluid Image--fullHeight u-hidden u-lg-tableCell"
    style="background-image:url(https://unsplash.imgix.net/photo-1423683249427-8ca22bd873e0?q=75&fm=jpg&s=5e57c661d0f772ce269188a6f5325708?fit=crop&fm=jpg&q=75&w=950)"
  >
  </div>
  <div class="Container">
    <div class="Grid u-mH0">
      <div class="Grid-cell u-pH0 u-lg-hidden">
        <img src="https://unsplash.imgix.net/photo-1423683249427-8ca22bd873e0?q=75&fm=jpg&s=5e57c661d0f772ce269188a6f5325708?fit=crop&fm=jpg&q=75&w=950" alt="">
      </div>
      <div class="Grid-cell u-lg-size1of2 u-lg-before1of2 u-bgRedLighter">
        <p class="u-pV10">
          WinWin transfers the user workspace from one computer to another. The transfer is done over some form of network connection - router, network, direct cable or a wireless connection. In order to initial the transfer, the user should run the software on old and new computers, which then auto-locate each other on the network. The transfer is then initiated on the new computer. During the transfer, the old computer is not changed and nothing is removed from it.
        </p>
      </div>
    </div>
  </div>
</div>

Fullscreen Image with Content partial cover

Uses Grid Doesn't need to be 50%; Use .u-sizeXofX if needed

Content on the Right

Use both the ContainerWrap-before and ContainerWrap-after classes to place content on top of an image

<div class="ContainerWrap">
  <div
    class="ContainerWrap-before u-lg-sizeFull Image Image--fluid Image--fullHeight u-hidden u-lg-tableCell"
    style="background-image:url(https://unsplash.imgix.net/photo-1423683249427-8ca22bd873e0?q=75&fm=jpg&s=5e57c661d0f772ce269188a6f5325708?fit=crop&fm=jpg&q=75&w=950)"
  ></div>
  <div class="Container">
    <div class="Grid u-mH0">
      <div class="Grid-cell u-pH0 u-lg-hidden">
        <img src="https://unsplash.imgix.net/photo-1423683249427-8ca22bd873e0?q=75&fm=jpg&s=5e57c661d0f772ce269188a6f5325708?fit=crop&fm=jpg&q=75&w=950" alt="">
      </div>
      <div class="Grid-cell u-lg-size1of2 u-lg-before1of2">
        <p class="u-pV25">
          WinWin transfers the user workspace from one computer to another. The transfer is done over some form of network connection - router, network, direct cable or a wireless connection. In order to initial the transfer, the user should run the software on old and new computers, which then auto-locate each other on the network. The transfer is then initiated on the new computer. During the transfer, the old computer is not changed and nothing is removed from it.
        </p>
      </div>
    </div>
  </div>
  <div class="ContainerWrap-after u-sizeFull u-lg-size1of2 u-bgRedLighter u-opacity9"></div>
</div>

Add a Background Image

To use a background image on either ContainerWrap-before or ContainerWrap-after elements, Image Image--fluid Image--fullHeight classes must also be added. This will expand the background image to the full height and width of the ContainerWrap-before or ContainerWrap-after element.

Content on the Left

<div class="ContainerWrap">
  <div
    class="ContainerWrap-after u-lg-sizeFull Image Image--fluid Image--fullHeight u-hidden u-lg-tableCell"
    style="background-image:url(https://unsplash.imgix.net/photo-1423683249427-8ca22bd873e0?q=75&fm=jpg&s=5e57c661d0f772ce269188a6f5325708?fit=crop&fm=jpg&q=75&w=950)"
  ></div>
  <div class="Container">
    <div class="Grid u-mH0">
      <div class="Grid-cell u-pH0 u-lg-hidden">
        <img src="https://unsplash.imgix.net/photo-1423683249427-8ca22bd873e0?q=75&fm=jpg&s=5e57c661d0f772ce269188a6f5325708?fit=crop&fm=jpg&q=75&w=950" alt="">
      </div>
      <div class="Grid-cell u-lg-size1of2">
        <p class="u-pV25">
          WinWin transfers the user workspace from one computer to another. The transfer is done over some form of network connection - router, network, direct cable or a wireless connection. In order to initial the transfer, the user should run the software on old and new computers, which then auto-locate each other on the network. The transfer is then initiated on the new computer. During the transfer, the old computer is not changed and nothing is removed from it.
        </p>
      </div>
    </div>
  </div>
  <div class="ContainerWrap-before u-sizeFull u-lg-size1of2 u-bgRedLighter u-opacity9"></div>
</div>

3+ Columns

Uses Arrange Notably useful in cases where column heights are variable (read: flexbox hack)

<div class="ContainerWrap u-bgBlueLighter">
  <div class="ContainerWrap-before u-bgYellowLighter"></div>
  <div class="Container">
    <div class="Arrange">
      <div class="Arrange-sizeFit u-block u-md-tableCell u-md-size1of3 u-bgYellowLighter">
        <p class="u-pA2">Tall: WinWin transfers the user workspace from one computer to another. The transfer is done over some form of network connection - router, network, direct cable or a wireless connection. In order to initial the transfer, the user should run the software on old and new computers, which then auto-locate each other on the network. The transfer is then initiated on the new computer. During the transfer, the old computer is not changed and nothing is removed from it.</p>
      </div>
      <div class="Arrange-sizeFit u-block u-md-tableCell u-md-size1of3 u-bgRedLighter">
        <p class="u-pA2">Short</p>
      </div>
      <div class="Arrange-sizeFit u-block u-md-tableCell u-md-size1of3 u-bgBlueLighter">
        <p class="u-pA2">Tall: WinWin transfers the user workspace from one computer to another. The transfer is done over some form of network connection - router, network, direct cable or a wireless connection. In order to initial the transfer, the user should run the software on old and new computers, which then auto-locate each other on the network. The transfer is then initiated on the new computer. During the transfer, the old computer is not changed and nothing is removed from it.</p>
      </div>
    </div>
  </div>
</div>