@moodxd/theme-core v1.0.3

MoO Core Theme

Standard Breakpoints

sm-viewport (min-width:698px); max-sm-viewport (max-width:698px); md-viewport (min-width:857px); max-md-viewport (max-width:857px); lg-viewport (min-width:900px); max-lg-viewport (max-width:900px);

Color Palette

<div class="u-cf">
  <div class="Grid Grid--withoutGutter u-cf">
    <div class="Grid-cell u-md-size1of8 u-md-size1of8">
      <div class="u-bgGrayDarkest u-fontWhite u-pV8">
      grayDarkest
      </div>
    </div>
    <div class="Grid-cell u-md-size1of8">
      <div class="u-pV8 u-bgGrayDarker u-fontWhite">
      grayDarker
      </div>
    </div>
    <div class="Grid-cell u-md-size1of8">
      <div class="u-pV8 u-bgGrayDark u-fontWhite">
      grayDark
      </div>
    </div>
    <div class="Grid-cell u-md-size1of8">
      <div class="u-pV8 u-bgGray u-fontWhite">
      gray
      </div>
    </div>
    <div class="Grid-cell u-md-size1of8">
      <div class="u-pV8 u-bgGrayLight u-fontWhite">
      grayLight
      </div>
    </div>
    <div class="Grid-cell u-md-size1of8">
      <div class="u-pV8 u-bgGrayLighter">
      grayLighter
      </div>
    </div>
    <div class="Grid-cell u-md-size1of8">
      <div class="u-pV8 u-bgGrayLightest">
      grayLightest
      </div>
    </div>
  </div>
  <div class="Grid Grid--withoutGutter u-cf">
    <div class="Grid-cell u-md-size1of8">
      <div class="u-pV8 u-bgBlueDark u-fontWhite">
      blueDark
      </div>
    </div>
    <div class="Grid-cell u-md-size1of8">
      <div class="u-pV8 u-bgBlue u-fontWhite">
      blue
      </div>
    </div>
  </div>
  <div class="Grid Grid--withoutGutter u-cf">
    <div class="Grid-cell u-md-size1of8">
      <div class="u-pV8 u-bgTeal u-fontWhite">
      teal
      </div>
    </div>
  </div>
  <div class="Grid Grid--withoutGutter u-cf">
    <div class="Grid-cell u-md-size1of8">
      <div class="u-pV8 u-bgGreen u-fontWhite">
      green
      </div>
    </div>
    <div class="Grid-cell u-md-size1of8">
      <div class="u-pV8 u-bgGreenLight">
      greenLight
      </div>
    </div>
  </div>
  <div class="Grid Grid--withoutGutter u-cf">
    <div class="Grid-cell u-md-size1of8">
      <div class="u-pV8 u-bgYellow u-fontWhite">
      yellow
      </div>
    </div>
    <div class="Grid-cell u-md-size1of8 u-md-before1of8">
      <div class="u-pV8 u-bgYellowLighter">
      yellowLighter
      </div>
    </div>
  </div>
  <div class="Grid Grid--withoutGutter u-cf">
    <div class="Grid-cell u-md-size1of8 u-md-before3of8">
      <div class="u-pV8 u-bgRed u-fontWhite">
      red
      </div>
    </div>
    <div class="Grid-cell u-md-size1of8 u-md-before1of8">
      <div class="u-pV8 u-bgRedLighter">
      redLighter
      </div>
    </div>
  </div>
</div>