materialize-css/jade/page-contents/color_content.html

Builds Materialize distribution packages

<div class="container">
  <div class="row">

    <div class="col s12 m9 l10">

      <div id="color-usage" class="section scrollspy">
        <h2 class="header">Usage</h2>
        <p class="caption">
        Here is a color palette based on the material design base colors. Each of these colors is defined with a base color class and an optional lighten or darken class.
        </p>
        <div class="row section">
          <h5 class="col s12 m3">Background Color</h5>
          <div class="col s12 m9">
            <p>To apply a background color, just add the color name and light/darkness as a class to the element.</p>
            <div class="card-panel teal lighten-2">This is a card panel with a teal lighten-2 class</div>
            <pre><code class="language-markup">
    &lt;div class="card-panel teal lighten-2">This is a card panel with a teal lighten-2 class&lt;/div>
            </code></pre>
          </div>

          <br>

          <h5 class="col s12 m3">Text Color</h5>
          <div class="col s12 m9">
            <p>To apply a text color, just append <code class="languague-markup">-text</code> to the color class like this:</p>
            <div class="card-panel"><span class="blue-text text-darken-2">This is a card panel with dark blue text</span></div>
            <pre><code class="language-markup">
    &lt;div class="card-panel">
      &lt;span class="blue-text text-darken-2">This is a card panel with dark blue text&lt;/span>
    &lt;/div>
            </code></pre>
          </div>
        </div>
      </div>

      <div id="sass" class="section scrollspy">
        <h2 class="header">Sass</h2>
        <p>
        For background colors, you can apply the color simply by extending the classes like the example below.
        </p>
        <pre><code class="language-scss col s12">
  .ilike-blue-container {
    @extend .blue, .lighten-4;
  }
        </code></pre>

        <p>
        For changing text color, you can apply the color simply by extending the classes like the example below.
        </p>
        <pre><code class="language-scss col s12">
  .ilike-blue-container {
    @extend .blue-text, .text-lighten-4;
  }
        </code></pre>
      </div>
      <div id="palette" class="section scrollspy">

        <h2 class="header">Color Palette</h2>
        <div class="row dynamic-color">
          <div class="col s12 m6 l4">
            <div class="red lighten-5"></div>
            <div class="red lighten-4"></div>
            <div class="red lighten-3"></div>
            <div class="red lighten-2"></div>
            <div class="red lighten-1"></div>
            <div class="red"></div>
            <div class="red darken-1"></div>
            <div class="red darken-2"></div>
            <div class="red darken-3"></div>
            <div class="red darken-4"></div>
            <div class="red accent-1"></div>
            <div class="red accent-2"></div>
            <div class="red accent-3"></div>
            <div class="red accent-4"></div>
          </div>

          <div class="col s12 m6 l4">
            <div class="pink lighten-5"></div>
            <div class="pink lighten-4"></div>
            <div class="pink lighten-3"></div>
            <div class="pink lighten-2"></div>
            <div class="pink lighten-1"></div>
            <div class="pink"></div>
            <div class="pink darken-1"></div>
            <div class="pink darken-2"></div>
            <div class="pink darken-3"></div>
            <div class="pink darken-4"></div>
            <div class="pink accent-1"></div>
            <div class="pink accent-2"></div>
            <div class="pink accent-3"></div>
            <div class="pink accent-4"></div>
          </div>
          <div class="col s12 m6 l4">
            <div class="purple lighten-5"></div>
            <div class="purple lighten-4"></div>
            <div class="purple lighten-3"></div>
            <div class="purple lighten-2"></div>
            <div class="purple lighten-1"></div>
            <div class="purple"></div>
            <div class="purple darken-1"></div>
            <div class="purple darken-2"></div>
            <div class="purple darken-3"></div>
            <div class="purple darken-4"></div>
            <div class="purple accent-1"></div>
            <div class="purple accent-2"></div>
            <div class="purple accent-3"></div>
            <div class="purple accent-4"></div>
          </div>
          <div class="col s12 m6 l4">
            <div class="deep-purple lighten-5"></div>
            <div class="deep-purple lighten-4"></div>
            <div class="deep-purple lighten-3"></div>
            <div class="deep-purple lighten-2"></div>
            <div class="deep-purple lighten-1"></div>
            <div class="deep-purple"></div>
            <div class="deep-purple darken-1"></div>
            <div class="deep-purple darken-2"></div>
            <div class="deep-purple darken-3"></div>
            <div class="deep-purple darken-4"></div>
            <div class="deep-purple accent-1"></div>
            <div class="deep-purple accent-2"></div>
            <div class="deep-purple accent-3"></div>
            <div class="deep-purple accent-4"></div>
          </div>
          <div class="col s12 m6 l4">
            <div class="indigo lighten-5"></div>
            <div class="indigo lighten-4"></div>
            <div class="indigo lighten-3"></div>
            <div class="indigo lighten-2"></div>
            <div class="indigo lighten-1"></div>
            <div class="indigo"></div>
            <div class="indigo darken-1"></div>
            <div class="indigo darken-2"></div>
            <div class="indigo darken-3"></div>
            <div class="indigo darken-4"></div>
            <div class="indigo accent-1"></div>
            <div class="indigo accent-2"></div>
            <div class="indigo accent-3"></div>
            <div class="indigo accent-4"></div>
          </div>
          <div class="col s12 m6 l4">
            <div class="blue lighten-5"></div>
            <div class="blue lighten-4"></div>
            <div class="blue lighten-3"></div>
            <div class="blue lighten-2"></div>
            <div class="blue lighten-1"></div>
            <div class="blue"></div>
            <div class="blue darken-1"></div>
            <div class="blue darken-2"></div>
            <div class="blue darken-3"></div>
            <div class="blue darken-4"></div>
            <div class="blue accent-1"></div>
            <div class="blue accent-2"></div>
            <div class="blue accent-3"></div>
            <div class="blue accent-4"></div>
          </div>
          <div class="col s12 m6 l4">
            <div class="light-blue lighten-5"></div>
            <div class="light-blue lighten-4"></div>
            <div class="light-blue lighten-3"></div>
            <div class="light-blue lighten-2"></div>
            <div class="light-blue lighten-1"></div>
            <div class="light-blue"></div>
            <div class="light-blue darken-1"></div>
            <div class="light-blue darken-2"></div>
            <div class="light-blue darken-3"></div>
            <div class="light-blue darken-4"></div>
            <div class="light-blue accent-1"></div>
            <div class="light-blue accent-2"></div>
            <div class="light-blue accent-3"></div>
            <div class="light-blue accent-4"></div>
          </div>
          <div class="col s12 m6 l4">
            <div class="cyan lighten-5"></div>
            <div class="cyan lighten-4"></div>
            <div class="cyan lighten-3"></div>
            <div class="cyan lighten-2"></div>
            <div class="cyan lighten-1"></div>
            <div class="cyan"></div>
            <div class="cyan darken-1"></div>
            <div class="cyan darken-2"></div>
            <div class="cyan darken-3"></div>
            <div class="cyan darken-4"></div>
            <div class="cyan accent-1"></div>
            <div class="cyan accent-2"></div>
            <div class="cyan accent-3"></div>
            <div class="cyan accent-4"></div>
          </div>
          <div class="col s12 m6 l4">
            <div class="teal lighten-5"></div>
            <div class="teal lighten-4"></div>
            <div class="teal lighten-3"></div>
            <div class="teal lighten-2"></div>
            <div class="teal lighten-1"></div>
            <div class="teal"></div>
            <div class="teal darken-1"></div>
            <div class="teal darken-2"></div>
            <div class="teal darken-3"></div>
            <div class="teal darken-4"></div>
            <div class="teal accent-1"></div>
            <div class="teal accent-2"></div>
            <div class="teal accent-3"></div>
            <div class="teal accent-4"></div>
          </div>
          <div class="col s12 m6 l4">
            <div class="green lighten-5"></div>
            <div class="green lighten-4"></div>
            <div class="green lighten-3"></div>
            <div class="green lighten-2"></div>
            <div class="green lighten-1"></div>
            <div class="green"></div>
            <div class="green darken-1"></div>
            <div class="green darken-2"></div>
            <div class="green darken-3"></div>
            <div class="green darken-4"></div>
            <div class="green accent-1"></div>
            <div class="green accent-2"></div>
            <div class="green accent-3"></div>
            <div class="green accent-4"></div>
          </div>
          <div class="col s12 m6 l4">
            <div class="light-green lighten-5"></div>
            <div class="light-green lighten-4"></div>
            <div class="light-green lighten-3"></div>
            <div class="light-green lighten-2"></div>
            <div class="light-green lighten-1"></div>
            <div class="light-green"></div>
            <div class="light-green darken-1"></div>
            <div class="light-green darken-2"></div>
            <div class="light-green darken-3"></div>
            <div class="light-green darken-4"></div>
            <div class="light-green accent-1"></div>
            <div class="light-green accent-2"></div>
            <div class="light-green accent-3"></div>
            <div class="light-green accent-4"></div>
          </div>
          <div class="col s12 m6 l4">
            <div class="lime lighten-5"></div>
            <div class="lime lighten-4"></div>
            <div class="lime lighten-3"></div>
            <div class="lime lighten-2"></div>
            <div class="lime lighten-1"></div>
            <div class="lime"></div>
            <div class="lime darken-1"></div>
            <div class="lime darken-2"></div>
            <div class="lime darken-3"></div>
            <div class="lime darken-4"></div>
            <div class="lime accent-1"></div>
            <div class="lime accent-2"></div>
            <div class="lime accent-3"></div>
            <div class="lime accent-4"></div>
          </div>
          <div class="col s12 m6 l4">
            <div class="yellow lighten-5"></div>
            <div class="yellow lighten-4"></div>
            <div class="yellow lighten-3"></div>
            <div class="yellow lighten-2"></div>
            <div class="yellow lighten-1"></div>
            <div class="yellow"></div>
            <div class="yellow darken-1"></div>
            <div class="yellow darken-2"></div>
            <div class="yellow darken-3"></div>
            <div class="yellow darken-4"></div>
            <div class="yellow accent-1"></div>
            <div class="yellow accent-2"></div>
            <div class="yellow accent-3"></div>
            <div class="yellow accent-4"></div>
          </div>
          <div class="col s12 m6 l4">
            <div class="amber lighten-5"></div>
            <div class="amber lighten-4"></div>
            <div class="amber lighten-3"></div>
            <div class="amber lighten-2"></div>
            <div class="amber lighten-1"></div>
            <div class="amber"></div>
            <div class="amber darken-1"></div>
            <div class="amber darken-2"></div>
            <div class="amber darken-3"></div>
            <div class="amber darken-4"></div>
            <div class="amber accent-1"></div>
            <div class="amber accent-2"></div>
            <div class="amber accent-3"></div>
            <div class="amber accent-4"></div>
          </div>
          <div class="col s12 m6 l4">
            <div class="orange lighten-5"></div>
            <div class="orange lighten-4"></div>
            <div class="orange lighten-3"></div>
            <div class="orange lighten-2"></div>
            <div class="orange lighten-1"></div>
            <div class="orange"></div>
            <div class="orange darken-1"></div>
            <div class="orange darken-2"></div>
            <div class="orange darken-3"></div>
            <div class="orange darken-4"></div>
            <div class="orange accent-1"></div>
            <div class="orange accent-2"></div>
            <div class="orange accent-3"></div>
            <div class="orange accent-4"></div>
          </div>
          <div class="col s12 m6 l4">
            <div class="deep-orange lighten-5"></div>
            <div class="deep-orange lighten-4"></div>
            <div class="deep-orange lighten-3"></div>
            <div class="deep-orange lighten-2"></div>
            <div class="deep-orange lighten-1"></div>
            <div class="deep-orange"></div>
            <div class="deep-orange darken-1"></div>
            <div class="deep-orange darken-2"></div>
            <div class="deep-orange darken-3"></div>
            <div class="deep-orange darken-4"></div>
            <div class="deep-orange accent-1"></div>
            <div class="deep-orange accent-2"></div>
            <div class="deep-orange accent-3"></div>
            <div class="deep-orange accent-4"></div>
          </div>
          <div class="col s12 m6 l4">
            <div class="brown lighten-5"></div>
            <div class="brown lighten-4"></div>
            <div class="brown lighten-3"></div>
            <div class="brown lighten-2"></div>
            <div class="brown lighten-1"></div>
            <div class="brown"></div>
            <div class="brown darken-1"></div>
            <div class="brown darken-2"></div>
            <div class="brown darken-3"></div>
            <div class="brown darken-4"></div>
          </div>
          <div class="col s12 m6 l4">
            <div class="grey lighten-5"></div>
            <div class="grey lighten-4"></div>
            <div class="grey lighten-3"></div>
            <div class="grey lighten-2"></div>
            <div class="grey lighten-1"></div>
            <div class="grey"></div>
            <div class="grey darken-1"></div>
            <div class="grey darken-2"></div>
            <div class="grey darken-3"></div>
            <div class="grey darken-4"></div>
          </div>
        </div>
        <div class="row dynamic-color">
          <div class="col s12 m6 l4">
            <div class="blue-grey lighten-5"></div>
            <div class="blue-grey lighten-4"></div>
            <div class="blue-grey lighten-3"></div>
            <div class="blue-grey lighten-2"></div>
            <div class="blue-grey lighten-1"></div>
            <div class="blue-grey"></div>
            <div class="blue-grey darken-1"></div>
            <div class="blue-grey darken-2"></div>
            <div class="blue-grey darken-3"></div>
            <div class="blue-grey darken-4"></div>
          </div>
          <div class="col s12 m6 l4">
            <div class="black"></div>
            <div class="white"></div>
            <div class="transparent"></div>
          </div>          
        </div>
      </div>
    </div>

    <div class="col hide-on-small-only m3 l2">
      <div class="toc-wrapper">
        <div class="buysellads hide-on-small-only">
          <!-- CarbonAds Zone Code -->
          <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
        </div>
        <div style="height: 1px;">
          <ul class="section table-of-contents">
            <li><a href="#color-usage">Usage</a></li>
            <li><a href="#sass">Sass</a></li>
            <li><a href="#palette">Color Palette</a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>