material-design-lite/docs/_templates/customize.html

{% extends 'layout.html' %}

{% block content %}
<link rel="stylesheet" href="{{page.include_prefix}}assets/customizer.css">
<div class="mdl-gen mdl-cell mdl-cell--12-col">
  <div class="mdl-grid">
    <div class="mdl-gen__panel mdl-gen__panel--left mdl-cell mdl-cell--6-col-desktop mdl-cell--8-col">
      <div id="wheel">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <defs>
            <filter id="drop-shadow">
              <feGaussianBlur in="SourceAlpha" stdDeviation="3.2"/>
              <feOffset dx="0" dy="0" result="offsetblur"/>
              <feFlood flood-color="rgba(0,0,0,1)"/>
              <feComposite in2="offsetblur" operator="in"/>
              <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/>
              </feMerge>
            </filter>
          </defs>
          <g class="wheel--maing"></g>
        </svg>
        <div class="mdl-gen-download">
          <a href="#" id="download" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--fab"><i class="material-icons">file_download</i></a>
        </div>
      </div>
    </div>
    <div class="mdl-gen__panel--right mdl-gen__panel mdl-cell mdl-cell--6-col-desktop mdl-cell--8-col">
      <div class="mdl-gen__desc">
        <strong>Custom CSS theme builder</strong>
        <p>Click on the color wheel to choose a primary (1) and accent (2) color to preview the theme below. When you’ve selected a color combination you like, either reference our hosted CSS (see below) or download the CSS by clicking the white button in the middle.</p>
      </div>
      <div class="mdl-gen__preview">
        <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
          <header class="mdl-layout__header">
            <svg class="mdl-layout-icon" width="411px" height="406px" viewBox="0 0 411 406" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g transform="translate(-51.000000, -54.000000)" fill="currentColor">
                  <path d="M253.532807,381.627 L205.905373,459.1512 L75.2987939,365.2047 L137.208794,290.0547 L51,265.8834 L100.217083,116.7498 L183.176447,150.0543 L176.402456,54 L337.901996,54 L331.203531,149.0202 L409.306732,116.4465 L461.243662,265.7448 L371.760263,290.7036 L429.826513,365.6628 L302.333596,459.2493 L253.532807,381.627 Z M222.176831,106.2 L291.098533,106.2 L282.729084,224.796484 L383.182429,182.939488 L404.947387,245.446521 L297.795289,275.304737 L368.114228,365.995226 L313.701833,405.9 L252.592681,308.789934 L192.876775,405.9 L137.348587,365.995226 L212.130699,275.304737 L105.539492,245.446521 L126.18666,182.939488 L230.548276,224.796484 L222.176831,106.2 Z"></path>
                </g>
              </g>
            </svg>
            <div class="mdl-layout__header-row">
              <span class="mdl-layout-title">Theme Preview</span>
            </div>
          </header>
          <div class="mdl-layout__drawer">
            <span class="mdl-layout-title">Theme Preview</span>
            <nav class="mdl-navigation">
              <a class="mdl-navigation__link" href="#">Some</a>
              <a class="mdl-navigation__link" href="#">Links</a>
              <a class="mdl-navigation__link" href="#">Here</a>
            </nav>
          </div>
          <main class="mdl-layout__content">
            <h3>Try it out</h3>
            <p>
              Lorem ipsum dolor sit amet.
            </p>
            <button class="mdl-button mdl-button--colored mdl-button--raised mdl-js-button mdl-js-ripple-effect">BUTTON</button>
            <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect">
              <i class="material-icons">email</i>
            </button>
          </main>
        </div>
      </div>
    </div>
    <div class="mdl-gen__cdn mdl-cell mdl-cell--12-col">
      <pre class="demo-code language-markup codepen-button-disabled"><code class="language-markup mdl-gen__cdn-link" data-language="markup"> &lt;link rel="stylehsheet" href="$$hosted_libs_prefix$$/$$version$$/material.$primary-$accent.min.css" /&gt; </code><code class="language-markup mdl-gen__placeholder" data-language="markup"> &lt;link rel="stylehsheet" href="$$hosted_libs_prefix$$/$$version$$/material.indigo-pink.min.css" /&gt; </code></pre>
    </div>
  </div>
</div>
<script src="{{page.include_prefix}}assets/customizer.js"></script>
<script>init();</script>
{% endblock %}