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

Builds Materialize distribution packages

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

    <div class="col s12 m9 l10">

      <!--  Valign Section-->
      <div id="valign" class="section scrollspy">
        <h2 class="header">Alignment</h2>
        <p class="caption">We have easy to use classes to help you align your content.</p>

        <h5 class="light">Vertical Align</h5>
        <p>You can easily vertically center things by adding the class <code class="language-markup">valign-wrapper</code> to the container holding the items you want to vertically align.</p>
        <div class="valign-demo valign-wrapper">
          <h5 class="valign center" style="width: 100%;">This should be vertically aligned</h5>
        </div>
        <pre><code class="language-markup">
&lt;div class="valign-wrapper">
  &lt;h5 class="valign">This should be vertically aligned&lt;/h5>
&lt;/div>
        </code></pre><br>

        <h5 class="light">Text Align</h5>
        <p>These classes are for horizontally aligning content. We have <code class="language-markup">.left-align</code>, <code class="language-markup">.right-align</code> and <code class="language-markup">.center-align</code></p>
        <div class="talign-demo">
          <br>
          <h5 class="left-align">This should be left aligned</h5>
        </div>
        <br>
        <div class="talign-demo">
          <br>
          <h5 class="right-align">This should be right aligned</h5>
        </div>
        <br>
        <div class="talign-demo">
          <br>
          <h5 class="center-align">This should be center aligned</h5>
        </div>
        <pre><code class="language-markup">
  &lt;div>
    &lt;h5 class="left-align">This should be left aligned&lt;/h5>
  &lt;/div>
  &lt;div>
    &lt;h5 class="right-align">This should be right aligned&lt;/h5>
  &lt;/div>
  &lt;div>
    &lt;h5 class="center-align">This should be center aligned&lt;/h5>
  &lt;/div>
        </code></pre><br>

        <h5 class="light">Quick Floats</h5>
        <p>Quickly float things by adding the class <code class="language-markup">left</code> or <code class="language-markup">right</code> to the element. <code class="language-markup">!important</code> is used to avoid specificity issues.</p>
        <pre><code class="language-markup">
&lt;div class="left">...&lt;/div>
&lt;div class="right">...&lt;/div>
        </code></pre><br>

      </div><!--  End Valign Section  -->

      <!--  Hiding Section-->
      <div id="hiding" class="section scrollspy">
        <h2 class="header">Hiding Content</h2>
        <p>We provide easy to use classes to hide content on specific screen sizes. </p>
        <table class="striped">
          <thead>
            <tr>
              <th></th>
              <th>Screen Range</th>
            </tr>
          </thead>
            <tbody>
            <tr>
              <td><code class="language-markup"><strong>.hide</strong></code></td>
              <td>Hidden for all Devices</td>
            </tr>
            <tr>
              <td><code class="language-markup"><strong>.hide-on-small-only</strong></code></td>
              <td>Hidden for Mobile Only</td>
            </tr>
            <tr>
              <td><code class="language-markup"><strong>.hide-on-med-only</strong></code></td>
              <td>Hidden for Tablet Only</td>
            </tr>
            <tr>
              <td><code class="language-markup"><strong>.hide-on-med-and-down</strong></code></td>
              <td>Hidden for Tablet and Below</td>
            </tr>
            <tr>
              <td><code class="language-markup"><strong>.hide-on-med-and-up</strong></code></td>
              <td>Hidden for Tablet and Above</td>
            </tr>
            <tr>
              <td><code class="language-markup"><strong>.hide-on-large-only</strong></code></td>
              <td>Hidden for Desktop Only</td>
            </tr>
          </tbody>
        </table>
        <br>
        <h5 class="light">Usage</h5>
        <pre><code class="language-markup">
  &lt;div class="hide-on-small-only">&lt;/div>
        </code></pre><br>

      </div><!--  End Hiding Section  -->



      <!--  Formatting Section-->
      <div id="formatting" class="section scrollspy">
        <h2 class="header">Formatting</h2>
        <p>These classes help format various content on your site.</p>

        <h5 class="light">Truncation</h5>
        <p>To truncate long lines of text in an ellipsis, add the class <code class="language-markup">truncate</code> to the tag which contains the text. See an example below of a header being truncated inside a card.</p>

        <div class="row">
          <div class="col s6 offset-s3 m6 offset-m3">
            <div class="card-panel">
              <h4 class="truncate">This is an extremely long title that will be truncated</h4>
            </div>
          </div>
        </div>

        <pre><code class="language-markup">
  &lt;h4 class="truncate">This is an extremely long title that will be truncated&lt;/h4>
        </code></pre><br>

        <h5 class="light">Hover</h5>
        <p>The <code class="language-markup">hoverable</code> is a hover class that adds an animation for box shadow as seen below. It can be used on most elements, but meant for use on cards.</p>
        <div class="card hoverable small">
          <div class="card-image">
            <img src="images/sample-1.jpg">
            <span class="card-title">Card Title</span>
          </div>
          <div class="card-content">
            <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
          </div>
          <div class="card-action">
            <a href="#">This is a link</a>
          </div>
        </div>

        <pre><code class="language-markup">
  &lt;div class="card-panel hoverable"> Hoverable Card Panel&lt;/div>
        </code></pre>

      </div><!--  End Formatting Section  -->

      <!--  Browser Default Section-->
      <div id="browser-default" class="section scrollspy">
        <h2 class="header">Browser Defaults</h2>
        <p>Because we override many of the default browser styles and elements, we provide the <code class="language-markup">.browser-default</code> class to revert these elements to their original state.</p>

        <table class="striped">
          <thead>
            <tr>
              <th>Name of Element</th>
              <th>Reverted Style</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>UL</td>
              <td>Bullet points</td>
            </tr>
            <tr>
              <td>SELECT</td>
              <td>Browser default select element</td>
            </tr>
          </tbody>
        </table>
      </div><!--  End Browser Default Section  -->


    </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="#valign">Alignment</a></li>
            <li><a href="#hiding">Hiding Content</a></li>
            <li><a href="#formatting">Formatting</a></li>
            <li><a href="#browser-default">Browser Defaults</a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>