materializr

A mobile web application that is themed with the new Material Design. This application works well on both phones and tablets, fully responsive and comes packed with a large pattern library for code re-use and ease of scalability.    

Features

• Material Designed theme
• Adaptable to both phones and tablets
• Touch Enabled Elements
• Visually Elegant Color Scheme
• Fully configured PHP contact form
• jQuery Colorbox Portfolio viewer
• Ergonomic Navigation

#

Get started

#

Homepage Slider

Slider

Our slider is awesome!

// Simplified example
  <div class="column">....</div

Quote Slider

    <div class="container material-box homepage-gallery no-bottom">
        <h3>Customer Testimonials</h3>
        <h6 class="full-bottom">We're happy to see you're happy!</h6>            
        <div class="full-decoration"></div>            
        <div class="quote-slider full-bottom" data-snap-ignore="true">
            <div> 
                <h4>
                   Quote
                </h4>
                <a href="#">......</a>
                <span>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                </span>
            </div>
        </div>
    </div>

Two responsive columns

    <div class="container">
        <div class="one-half-responsive">CONTENT HERE</div>
        <div class="one-half-responsive last-column">CONTENT HERE</div>
    </div>

Sidebar columns

    <div class="container">
        <div class="sidebar-right-big">CONTENT HERE</div>
        <div class="sidebar-left-small">CONTENT HERE</div>
    </div>
    <div class="container">
        <div class="sidebar-left-big">CONTENT HERE</div>
        <div class="sidebar-right-small">CONTENT HERE</div>
    </div>

Responsive images

  <img src="images/img.jpg" alt="img" class="responsive-image">

Responsive videos

  <iframe class="responsive-video" src="video_address_link"></iframe>

jQuery tabs

  <div class="container">
      <div class="tabs">
          <a href="#" class="tab-but tab-but-1 tab-active">Tab 1</a>
          <a href="#" class="tab-but tab-but-2">Tab 2</a>   
      </div>
      <div class="tab-content tab-content-1">
          Tab Content
      </div>
      <div class="tab-content tab-content-2">
          Tab Content
      </div>
  </div>

jQuery toggle

  <div class="container">
      <div class="toggle-1">
          <a href="#" class="deploy-toggle-1">This is content toggle</a>
          <div class="toggle-content">
              Toggle Content Here
          </div>
      </div>
  </div>

Simple buttons

  <a href="#" class="button button-red">Button</a>
  <a href="#" class="button button-green">Button</a>
  <a href="#" class="button button-blue">Button</a>

3D button classes

  <a href="#" class="button-3d button-red red-3d">Button</a>
  <a href="#" class="button-3d button-green green-3d">Button</a>
  <a href="#" class="button-3d button-blue blue-3d">Button</a>

Round and square thumbnail galleries

  <ul class="gallery round-thumb">
      <li>
          <a class="swipebox" href="images/pictures/1.jpg" title="An awesome gallery!">
              <img src="images/pictures/1s.jpg" alt="img" />
          </a>
      </li>
  </ul>

Wide Portfolio

  <div class="portfolio-wide">
      <a href="#" class="portfolio-wide-item">
          <h3>Swing near the ocean</h3>
          <p>This is a wide item, just tap it to read more</p>
          <div class="overlay"></div>
          <img class="responsive-image" src="images/pictures/1ww.jpg" alt="img">
      </a>
  </div>

Installation

Clone the repository

  $ git clone https://github.com/ipeters90/materializr.git
  $ cd materializr