menu

Online Style Guide


Design Framework

Choosing a framework that would work for Fuel3D meant looking at not only the features we wanted, but the grid system itself. And it is because of the grid system that we chose Materialize as the software’s CSS framework. 
Materialize is a front-end framework based on "material design," Google's specifications for building apps.

(See this video for a more dynamic idea of what this looks/feels like.)

It is a library of CSS classes that we helps make fuel3D site look nice with very little effort and comes with a grid system that makes layout out content on a variety of screen sizes much easier to deal with.


Get Materialze lastest upgrade

Setup and Files


To start using Materialize, all you have to do is download one of the options below.
Materialize

This version that comes with both the minified and unminified CSS and JavaScript files. This option requires little to no setup. Use this if you are unfamiliar with Sass.

Download CSSfile_download

Sass

This version contains the source SCSS files with the Fuel3D customise classes and colours
| sass/components/_fue3d-classes
| sass/components/_fuel3d-color-variables
You will need a Sass compiler if you choose this option.

Download SASSfile_download 

          

<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.css"  media="screen,projection"/>

<!--Import Montserrat font-->
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
|
|
<!-- Compiled and minified JavaScript -->
<script src="js/bin/materialize.js"></script>

Responsive Grid System

The Materialize grid system is based on the idea that a page layout for any given screen size is represented with 12 fluid columns. Columns are always horizontally contained in rows, which in turn are contained inside of a larger container (container > row > column).

No matter the size of the browser, each of these columns will always have an equal width.

       
    <!-- Page Layout here -->
    <div class="row">

      <div class="col s12 m4 l3"> 
       
          This content will be:
          3-columns-wide on large screens
          4-columns-wide on medium screens
          12-columns-wide on small screens

      </div>

     <div class="col s12 m8 l9"> 

          This content will be:
          9-columns-wide on large screens
          8-columns-wide on medium screens
          12-columns-wide on small screens

      </div>

    </div>

Montserrat font style

Download fontfile_download 
      
<!--Import Montserrat Font-->
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
Montserrat Thin free font

Montserrat Thin | 1946 Glyphs
Montserrat Thin Italic free font

Montserrat Thin Italic | 1973 Glyphs
Montserrat ExtraLight free font

Montserrat ExtraLight | 1946 Glyphs
Montserrat ExtraLight Italic free font

Montserrat ExtraLight Italic | 1973 Glyphs
Montserrat Light free font

Montserrat Light | 1946 Glyphs
Montserrat Light Italic free font

Montserrat Light Italic | 1973 Glyphs
Montserrat Regular free font

Montserrat Regular | 1946 Glyphs
Montserrat Italic free font

Montserrat Italic | 1973 Glyphs
Montserrat Medium free font

Montserrat Medium | 1946 Glyphs
Montserrat Medium Italic free font

Montserrat Medium Italic | 1973 Glyphs
Montserrat Semi Bold free font

Montserrat Semi Bold | 1946 Glyphs
Montserrat SemiBold Italic free font

Montserrat SemiBold Italic | 1973 Glyphs
Montserrat Bold free font

Montserrat Bold | 1946 Glyphs
Montserrat Bold Italic free font

Montserrat Bold Italic | 1973 Glyphs
Montserrat Extra Bold free font

Montserrat Extra Bold | 1946 Glyphs
Montserrat ExtraBold Italic free font

Montserrat ExtraBold Italic | 1973 Glyphs
Montserrat Black free font

Montserrat Black | 1946 Glyphs
Montserrat Black Italic free font

Montserrat Black Italic | 1973 Glyphs

Iconography


By creating a font that is specific to our style of lettering, people will begin to associate this with our company, especially if this font isn’t marketed externally, as no other company or individual will have access to it. It also adds very fine detailing to your work, as it has the same appearance as handwriting.

Download PDFfile_download

Color set

Light gray color code: #f5f5f5"
       
R: (245)
G: (245)
B: (245)
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. I am similar to what is called a panel in other frameworks.
default color code: #e1e1e1"
       
R: (225)
G: (225)
B: (225)
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. I am similar to what is called a panel in other frameworks
dark gray color code: #5d5d5d"
       
R: (93)
G: (93)
B: (93)
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. I am similar to what is called a panel in other frameworks.
gradient color: #01728e, #01a418"
       
R: (1)    R: (1)
G: (164)  G: (114)
B: (24)   B: (142)
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. I am similar to what is called a panel in other frameworks.

Default Buttons Breadcrumb

large button "Class: btn-default-white"

Button 
        
<a class="waves-effect btn-large btn-default-white">Button</a>
cloudbutton 
        
<a class="waves-effect waves-light btn-large btn-default-white">
  <i class="material-icons left">cloud</i>button
</a>
cloudbutton 
        
<a class="waves-effect waves-light btn-large btn-default-white">
  <i class="material-icons right">cloud</i>button
</a>
add 
       
<a class="btn-floating btn-large waves-effect btn-default-white">
  <i class="material-icons">add</i>
</a>
        
      
        
<button class="btn btn-default-white" type="submit" name="action">
  Submit <i class="material-icons right">send</i>
</button>
Button 
      
<a class="waves-effect waves-teal btn-flat btn-default-white">Button</a>
Breadcrumb "Class: nav-default-white"

       
<nav>
  <div class="nav-wrapper nav-default-white">
    <div>
      <a href="#!" class="breadcrumb">First</a>
      <a href="#!" class="breadcrumb">Second</a>
      <a href="#!" class="breadcrumb">Third</a>
    </div>
  </div>
</nav>

Buttons Breadcrumb

large button "Class: btn-default-lighten"

Button 
                
<a class="waves-effect btn-large btn-default-lighten">Button</a>
cloudbutton 
                
<a class="waves-effect waves-light btn-large btn-default-lighten">
  <i class="material-icons left">cloud</i>button
</a>
cloudbutton 
                  
<a class="waves-effect waves-light btn-large btn-default-lighten">
  <i class="material-icons right">cloud</i>button
</a>
add 
       
<a class="btn-floating btn-large waves-effect btn-default-lighten">
  <i class="material-icons">add</i>
</a>        
    
       
<button class="btn btn-default-lighten" type="submit" name="action">
  Submit<i class="material-icons right">send</i>
</button>
Button 
       
<a class="waves-effect waves-teal btn-flat btn-lighten">Button</a>


Breadcrumb "Class: nav-default-lighten"

       
<nav>
  <div class="nav-wrapper nav-default-lighten">
    <div>
      <a href="#!" class="breadcrumb">First</a>
      <a href="#!" class="breadcrumb">Second</a>
      <a href="#!" class="breadcrumb">Third</a>
    </div>
  </div>
</nav>

Buttons Breadcrumb

large button "Class: btn-default"

Button 
       
<a class="waves-effect waves-light btn-large btn-default">Button</a>
cloudbutton 
       
<a class="waves-effect waves-light btn-large btn-default">
  <i class="material-icons left">cloud</i>button
</a>
cloudbutton 
       
<a class="waves-effect waves-light btn-large btn-default">
  <i class="material-icons right">cloud</i>button
</a>
add 
       
<a class="btn-floating btn-large waves-effect waves-light btn-default">
  <i class="material-icons">add</i>
</a>
        
    
       
<button class="btn btn-default" type="submit" name="action">Submit
  <i class="material-icons right">send</i>
</button>
Button 
       
<a class="waves-effect waves-teal btn-flat btn-default">Button</a>


Breadcrumb "Class: nav-default"

       
<nav>
  <div class="nav-wrapper nav-default">
    <div>
      <a href="#!" class="breadcrumb">First</a>
      <a href="#!" class="breadcrumb">Second</a>
      <a href="#!" class="breadcrumb">Third</a>
    </div>
  </div>
</nav>

Buttons Breadcrumb

large button "Class: btn-default-darken"

Button 
       
<a class="waves-effect btn-large btn-default-darken">Button</a>
cloudbutton 
       
<a class="waves-effect waves-light btn-large btn-default-darken">
  <i class="material-icons left">cloud</i>button
</a>
cloudbutton 
       
<a class="btn-large btn-default-darken">
  <i class="material-icons right">cloud</i>button
</a>
add 
       
<a class="btn-floating btn-large btn-default-darken">
  <i class="material-icons">add</i>
</a>
    
       
<button class="btn btn-default-darken" type="submit" name="action">
  Submit<i class="material-icons right">send</i>
</button>
Button 
       
<a class="waves-effect waves-teal btn-flat btn-default-darken">Button</a>


Breadcrumb "Class: nav-default-darken"

       
<nav>
  <div class="nav-wrapper nav-default-darken">
    <div>
      <a href="#!" class="breadcrumb">First</a>
      <a href="#!" class="breadcrumb">Second</a>
      <a href="#!" class="breadcrumb">Third</a>
    </div>
  </div>
</nav>

Gradient Buttons Breadcrumb

large button "Class: btn-gadient"

Button 
       
<a class="waves-effect btn-large btn-gradient">Button</a>
cloudbutton 
       
<a class="btn-large btn-gradient">
  <i class="material-icons left">cloud</i>button
</a>
add 
       
<a class="btn-floating btn-large btn-gradient">
  <i class="material-icons">add</i>
</a>
cloudbutton 
       
<a class="waves-effect waves-light btn-large btn-gradient">
  <i class="material-icons right">cloud</i>button
</a>
Button 
       
<a class="waves-effect waves-teal btn-flat btn-gradient">Button</a>
        

        
    
       
<button class="btn  btn-gradient" type="submit" name="action">Submit
  <i class="material-icons right">send</i>
</button>


Breadcrumb "Class: nav-gradient"

       
<nav>
  <div class="nav-wrapper nav-gradient">
    <div>
      <a href="#!" class="breadcrumb">First</a>
      <a href="#!" class="breadcrumb">Second</a>
      <a href="#!" class="breadcrumb">Third</a>
    </div>
  </div>
</nav>

Default-lighten Links

Active link "Class: link-default-lighten"

Alvin Alvin Alvin Alvin 
       
<div class="collection link-default-lighten">
  <a href="#!" class="collection-item">Alvin</a>
  <a href="#!" class="collection-item active">Alvin</a>
  <a href="#!" class="collection-item">Alvin</a>
  <a href="#!" class="collection-item">Alvin</a>
</div>
Basic link "Class: link-default-lighten"

  • Alvin
  • Alvin
  • Alvin
  • Alvin
       
 <ul class=" collection link-default-lighten">
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
</ul>

Default Links

Active link "Class: link-default"

Alvin Alvin Alvin Alvin 
       
<div class="collection link-default">
  <a href="#!" class="collection-item">Alvin</a>
  <a href="#!" class="collection-item active">Alvin</a>
  <a href="#!" class="collection-item">Alvin</a>
  <a href="#!" class="collection-item">Alvin</a>
</div>
Basic link "Class: link-default"

  • Alvin
  • Alvin
  • Alvin
  • Alvin
       
 <ul class=" collection link-default">
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
</ul>

Default-darken Links

Active link "Class: link-default-darken"

Alvin Alvin Alvin Alvin 
       
<div class="collection link-default-darken">
  <a href="#!" class="collection-item">Alvin</a>
  <a href="#!" class="collection-item active">Alvin</a>
  <a href="#!" class="collection-item">Alvin</a>
  <a href="#!" class="collection-item">Alvin</a>
</div>
Basic link "Class: link-default-darken"

  • Alvin
  • Alvin
  • Alvin
  • Alvin
       
 <ul class=" collection link-default-darken">
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
</ul>

Gradient Links

Active link "Class: link-gradient"

Alvin Alvin Alvin Alvin 
       
<div class="collection link-gradient">
  <a href="#!" class="collection-item">Alvin</a>
  <a href="#!" class="collection-item active">Alvin</a>
  <a href="#!" class="collection-item">Alvin</a>
  <a href="#!" class="collection-item">Alvin</a>
</div>
Basic link "Class: link-gradient"

  • Alvin
  • Alvin
  • Alvin
  • Alvin
       
 <ul class=" collection link-gradient">
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
</ul>

Default-lighten Cards

Card button "Class: btn-default-lighten"

Card Title add

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.

Card action area "Class: card-default-lighten"

I am a very simple card. I am good at containing small bits of information.

This is a link
Card action area "Class: card-default-lighten"

Card Title

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.

This is a link
Card reveal "Class: card-default-lighten"

Card Titlemore_vert

This is a link

Card Titleclose

Here is some more information about this product that is only revealed once clicked on.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar turpis suscipit blandit tempus. Pellentesque a tellus tempus, rutrum metus id, vulputate dolor. Vivamus quis eros sit amet nunc congue cursus vitae non mauris. Suspendisse tempor, orci in auctor placerat, eros ex tincidunt ante, at venenatis orci ipsum eget orci. Donec non lacinia quam. Proin finibus eros nec tellus scelerisque efficitur. Praesent id nulla sagittis, suscipit tellus id, semper sem.

Card reveal "Class: card-default-lighten"

Card Titlemore_vert

This is a link

This is a link
Card Titleclose

Here is some more information about this product that is only revealed once clicked on.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar turpis suscipit blandit tempus. Pellentesque a tellus tempus, rutrum metus id, vulputate dolor. Vivamus quis eros sit amet nunc congue cursus vitae non mauris. Suspendisse tempor, orci in auctor placerat, eros ex tincidunt ante, at venenatis orci ipsum eget orci. Donec non lacinia quam. Proin finibus eros nec tellus scelerisque efficitur. Praesent id nulla sagittis, suscipit tellus id, semper sem.

Card Panel "Class: card-default-lighten"

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. I am similar to what is called a panel in other frameworks.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar turpis suscipit blandit tempus. Pellentesque a tellus tempus, rutrum metus id, vulputate dolor. Vivamus quis eros sit amet nunc congue cursus vitae non mauris. Suspendisse tempor, orci in auctor placerat, eros ex tincidunt ante, at venenatis orci ipsum eget orci. Donec non lacinia quam. Proin finibus eros nec tellus scelerisque efficitur. Praesent id nulla sagittis, suscipit tellus id, semper sem.

Default Cards

Card button "Class: btn-default"

Card Title add

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.

Card action area "Class: card-default"

I am a very simple card. I am good at containing small bits of information.

This is a link
Card action area "Class: card-default"

Card Title

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.

This is a link
Card reveal "Class: card-default"

Card Titlemore_vert

This is a link

Card Titleclose

Here is some more information about this product that is only revealed once clicked on.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar turpis suscipit blandit tempus. Pellentesque a tellus tempus, rutrum metus id, vulputate dolor. Vivamus quis eros sit amet nunc congue cursus vitae non mauris. Suspendisse tempor, orci in auctor placerat, eros ex tincidunt ante, at venenatis orci ipsum eget orci. Donec non lacinia quam. Proin finibus eros nec tellus scelerisque efficitur. Praesent id nulla sagittis, suscipit tellus id, semper sem.

Card reveal "Class: card-default"

Card Titlemore_vert

This is a link

This is a link
Card Titleclose

Here is some more information about this product that is only revealed once clicked on.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar turpis suscipit blandit tempus. Pellentesque a tellus tempus, rutrum metus id, vulputate dolor. Vivamus quis eros sit amet nunc congue cursus vitae non mauris. Suspendisse tempor, orci in auctor placerat, eros ex tincidunt ante, at venenatis orci ipsum eget orci. Donec non lacinia quam. Proin finibus eros nec tellus scelerisque efficitur. Praesent id nulla sagittis, suscipit tellus id, semper sem.

Card Panel "Class: card-default"

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. I am similar to what is called a panel in other frameworks.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar turpis suscipit blandit tempus. Pellentesque a tellus tempus, rutrum metus id, vulputate dolor. Vivamus quis eros sit amet nunc congue cursus vitae non mauris. Suspendisse tempor, orci in auctor placerat, eros ex tincidunt ante, at venenatis orci ipsum eget orci. Donec non lacinia quam. Proin finibus eros nec tellus scelerisque efficitur. Praesent id nulla sagittis, suscipit tellus id, semper sem.

Default-darken Cards

Card button "Class: btn-default-darken"

Card Title add

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.

Card action area "Class: card-default-darken"

I am a very simple card. I am good at containing small bits of information.

This is a link
Card action area "Class: card-default-darken"

Card Title

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.

This is a link
Card reveal "Class: card-default-darken"

Card Titlemore_vert

This is a link

Card Titleclose

Here is some more information about this product that is only revealed once clicked on.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar turpis suscipit blandit tempus. Pellentesque a tellus tempus, rutrum metus id, vulputate dolor. Vivamus quis eros sit amet nunc congue cursus vitae non mauris. Suspendisse tempor, orci in auctor placerat, eros ex tincidunt ante, at venenatis orci ipsum eget orci. Donec non lacinia quam. Proin finibus eros nec tellus scelerisque efficitur. Praesent id nulla sagittis, suscipit tellus id, semper sem.

Card reveal "Class: card-default-darken"

Card Titlemore_vert

This is a link

This is a link
Card Titleclose

Here is some more information about this product that is only revealed once clicked on.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar turpis suscipit blandit tempus. Pellentesque a tellus tempus, rutrum metus id, vulputate dolor. Vivamus quis eros sit amet nunc congue cursus vitae non mauris. Suspendisse tempor, orci in auctor placerat, eros ex tincidunt ante, at venenatis orci ipsum eget orci. Donec non lacinia quam. Proin finibus eros nec tellus scelerisque efficitur. Praesent id nulla sagittis, suscipit tellus id, semper sem.

Card Panel "Class: card-default-darken"

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. I am similar to what is called a panel in other frameworks.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar turpis suscipit blandit tempus. Pellentesque a tellus tempus, rutrum metus id, vulputate dolor. Vivamus quis eros sit amet nunc congue cursus vitae non mauris. Suspendisse tempor, orci in auctor placerat, eros ex tincidunt ante, at venenatis orci ipsum eget orci. Donec non lacinia quam. Proin finibus eros nec tellus scelerisque efficitur. Praesent id nulla sagittis, suscipit tellus id, semper sem.

Gradient Cards

Card button "Class: btn-gradient"

Card Title add

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.

Card action area "Class: card-gradient"

I am a very simple card. I am good at containing small bits of information.

This is a link
Card action area "Class: card-gradient"

Card Title

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.

This is a link
Card reveal "Class: card-gradient"

Card Titlemore_vert

This is a link

Card Titleclose

Here is some more information about this product that is only revealed once clicked on.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar turpis suscipit blandit tempus. Pellentesque a tellus tempus, rutrum metus id, vulputate dolor. Vivamus quis eros sit amet nunc congue cursus vitae non mauris. Suspendisse tempor, orci in auctor placerat, eros ex tincidunt ante, at venenatis orci ipsum eget orci. Donec non lacinia quam. Proin finibus eros nec tellus scelerisque efficitur. Praesent id nulla sagittis, suscipit tellus id, semper sem.

Card reveal "Class: card-gradient"

Card Titlemore_vert

This is a link

This is a link
Card Titleclose

Here is some more information about this product that is only revealed once clicked on.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar turpis suscipit blandit tempus. Pellentesque a tellus tempus, rutrum metus id, vulputate dolor. Vivamus quis eros sit amet nunc congue cursus vitae non mauris. Suspendisse tempor, orci in auctor placerat, eros ex tincidunt ante, at venenatis orci ipsum eget orci. Donec non lacinia quam. Proin finibus eros nec tellus scelerisque efficitur. Praesent id nulla sagittis, suscipit tellus id, semper sem.



Card Panel "Class: card-gradient"

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. I am similar to what is called a panel in other frameworks.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar turpis suscipit blandit tempus. Pellentesque a tellus tempus, rutrum metus id, vulputate dolor. Vivamus quis eros sit amet nunc congue cursus vitae non mauris. Suspendisse tempor, orci in auctor placerat, eros ex tincidunt ante, at venenatis orci ipsum eget orci. Donec non lacinia quam. Proin finibus eros nec tellus scelerisque efficitur. Praesent id nulla sagittis, suscipit tellus id, semper sem.

Collections

Header "Class: header-default-lighten"

  • First Names

  • Alvin
  • Alvin
  • Alvin
  • Alvin


       
<ul class="  collection with-header header-default-lighten">
  <li class="collection-header"><h4>First Names</h4></li>
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
</ul>
Header "Class: header-default-lighten"



       
<ul class="collection with-header header-default-lighten">
  <li class="collection-header"><h4>First Names</h4></li>
  <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content">
    <i class="material-icons">send</i></a></div>
  </li>
  <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content">
    <i class="material-icons">send</i></a></div>
  </li>
  <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content">
    <i class="material-icons">send</i></a></div>
  </li>
  <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content">
    <i class="material-icons">send</i></a></div>
  </li>
</ul>
Header "Class: header-default"

  • First Names

  • Alvin
  • Alvin
  • Alvin
  • Alvin


       
<ul class="  collection with-header header-default">
  <li class="collection-header"><h4>First Names</h4></li>
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
</ul>
Header "Class: header-default"



       
<ul class="collection with-header header-default">
  <li class="collection-header"><h4>First Names</h4></li>
  <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content">
    <i class="material-icons">send</i></a></div>
  </li>
  <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content">
    <i class="material-icons">send</i></a></div>
  </li>
  <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content">
    <i class="material-icons">send</i></a></div>
  </li>
  <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content">
    <i class="material-icons">send</i></a></div>
  </li>
</ul>
Header "Class: header-default-darken"

  • First Names

  • Alvin
  • Alvin
  • Alvin
  • Alvin


       
<ul class="  collection with-header header-default-darken">
  <li class="collection-header"><h4>First Names</h4></li>
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
</ul>
Header "Class: header-default-darken"



       
<ul class="collection with-header header-default-darken">
  <li class="collection-header"><h4>First Names</h4></li>
  <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content">
    <i class="material-icons">send</i></a></div>
  </li>
  <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content">
    <i class="material-icons">send</i></a></div>
  </li>
  <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content">
    <i class="material-icons">send</i></a></div>
  </li>
  <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content">
    <i class="material-icons">send</i></a></div>
  </li>
</ul>
Header "Class: header-gradient"

  • First Names

  • Alvin
  • Alvin
  • Alvin
  • Alvin


       
<ul class="  collection with-header header-gradient">
  <li class="collection-header"><h4>First Names</h4></li>
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
</ul>
Header "Class: header-gradient"



       
<ul class="collection with-header header-gradient">
  <li class="collection-header"><h4>First Names</h4></li>
  <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content">
    <i class="material-icons">send</i></a></div>
  </li>
  <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content">
    <i class="material-icons">send</i></a></div>
  </li>
  <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content">
    <i class="material-icons">send</i></a></div>
  </li>
  <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content">
    <i class="material-icons">send</i></a></div>
  </li>
</ul>

tables

Table "Class: table-default-lighten"

Name Item Name Item Price
Alvin Eclair $0.87
Alan Jellybean $3.76
Jonathan Lollipop $7.00 


       
<table class="table-default-lighten">
    <thead>
        <tr>
            <th>Name</th>
            <th>Item Name</th>
            <th>Item Price</th>
        </tr>
    </thead>

    <tbody>
        <tr>
      <td>Alvin</td>
            <td>Eclair</td>
            <td>$0.87</td>
        </tr>
        <tr>
            <td>Alan</td>
            <td>Jellybean</td>
            <td>$3.76</td>
        </tr>
        <tr>
            <td>Jonathan</td>
            <td>Lollipop</td>
            <td>$7.00</td>
        </tr>
    </tbody>
</table>
Table "Class: table-default"

Name Item Name Item Price
Alvin Eclair $0.87
Alan Jellybean $3.76
Jonathan Lollipop $7.00 


       
<table class="table-default">
    <thead>
        <tr>
            <th>Name</th>
            <th>Item Name</th>
            <th>Item Price</th>
        </tr>
    </thead>

    <tbody>
        <tr>
      <td>Alvin</td>
            <td>Eclair</td>
            <td>$0.87</td>
        </tr>
        <tr>
            <td>Alan</td>
            <td>Jellybean</td>
            <td>$3.76</td>
        </tr>
        <tr>
            <td>Jonathan</td>
            <td>Lollipop</td>
            <td>$7.00</td>
        </tr>
    </tbody>
</table>
Table "Class: table-default-darken"

Name Item Name Item Price
Alvin Eclair $0.87
Alan Jellybean $3.76
Jonathan Lollipop $7.00 


       
<table class="table-default-darken">
    <thead>
        <tr>
            <th>Name</th>
            <th>Item Name</th>
            <th>Item Price</th>
        </tr>
    </thead>

    <tbody>
        <tr>
      <td>Alvin</td>
            <td>Eclair</td>
            <td>$0.87</td>
        </tr>
        <tr>
            <td>Alan</td>
            <td>Jellybean</td>
            <td>$3.76</td>
        </tr>
        <tr>
            <td>Jonathan</td>
            <td>Lollipop</td>
            <td>$7.00</td>
        </tr>
    </tbody>
</table>
Table "Class: table-gradient"

Name Item Name Item Price
Alvin Eclair $0.87
Alan Jellybean $3.76
Jonathan Lollipop $7.00 


       
<table class="table-gradient">
    <thead>
        <tr>
            <th>Name</th>
            <th>Item Name</th>
            <th>Item Price</th>
        </tr>
    </thead>

    <tbody>
        <tr>
      <td>Alvin</td>
            <td>Eclair</td>
            <td>$0.87</td>
        </tr>
        <tr>
            <td>Alan</td>
            <td>Jellybean</td>
            <td>$3.76</td>
        </tr>
        <tr>
            <td>Jonathan</td>
            <td>Lollipop</td>
            <td>$7.00</td>
        </tr>
    </tbody>
</table>

Collapsibles

Collapsible "Class: collapse-default-lighten"

  • homeFirst
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie, ligula ac ornare iaculis, ligula quam vulputate dui, sed hendrerit nunc ligula at neque. Fusce sodales, nisi ac fermentum congue, lectus velit aliquet nunc, id gravida augue ex non est. Integer finibus nibh sed sapien iaculis sagittis. Aenean blandit vel diam quis ultricies. Nulla vel mi eget erat pretium hendrerit eget nec felis. Praesent risus massa, pulvinar eget augue vitae, varius aliquam metus. Etiam in vestibulum justo. Morbi id augue non leo rhoncus semper. Sed mattis viverra tempor.
  • placeSecond
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie, ligula ac ornare iaculis, ligula quam vulputate dui, sed hendrerit nunc ligula at neque. Fusce sodales, nisi ac fermentum congue, lectus velit aliquet nunc, id gravida augue ex non est. Integer finibus nibh sed sapien iaculis sagittis. Aenean blandit vel diam quis ultricies. Nulla vel mi eget erat pretium hendrerit eget nec felis. Praesent risus massa, pulvinar eget augue vitae, varius aliquam metus. Etiam in vestibulum justo. Morbi id augue non leo rhoncus semper. Sed mattis viverra tempor.
  • whatshotThird
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie, ligula ac ornare iaculis, ligula quam vulputate dui, sed hendrerit nunc ligula at neque. Fusce sodales, nisi ac fermentum congue, lectus velit aliquet nunc, id gravida augue ex non est. Integer finibus nibh sed sapien iaculis sagittis. Aenean blandit vel diam quis ultricies. Nulla vel mi eget erat pretium hendrerit eget nec felis. Praesent risus massa, pulvinar eget augue vitae, varius aliquam metus. Etiam in vestibulum justo. Morbi id augue non leo rhoncus semper. Sed mattis viverra tempor.


       
<ul class="collapsible collapse-default-lighten">
    <li>
      <div class="collapsible-header"><i class="material-icons">home</i>First</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet, consectetur...</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet, consectetur...</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet, consectetur...</span></div>
    </li>
</ul>
Collapsible "Class: collapse-default"

  • homeFirst
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie, ligula ac ornare iaculis, ligula quam vulputate dui, sed hendrerit nunc ligula at neque. Fusce sodales, nisi ac fermentum congue, lectus velit aliquet nunc, id gravida augue ex non est. Integer finibus nibh sed sapien iaculis sagittis. Aenean blandit vel diam quis ultricies. Nulla vel mi eget erat pretium hendrerit eget nec felis. Praesent risus massa, pulvinar eget augue vitae, varius aliquam metus. Etiam in vestibulum justo. Morbi id augue non leo rhoncus semper. Sed mattis viverra tempor.
  • placeSecond
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie, ligula ac ornare iaculis, ligula quam vulputate dui, sed hendrerit nunc ligula at neque. Fusce sodales, nisi ac fermentum congue, lectus velit aliquet nunc, id gravida augue ex non est. Integer finibus nibh sed sapien iaculis sagittis. Aenean blandit vel diam quis ultricies. Nulla vel mi eget erat pretium hendrerit eget nec felis. Praesent risus massa, pulvinar eget augue vitae, varius aliquam metus. Etiam in vestibulum justo. Morbi id augue non leo rhoncus semper. Sed mattis viverra tempor.
  • whatshotThird
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie, ligula ac ornare iaculis, ligula quam vulputate dui, sed hendrerit nunc ligula at neque. Fusce sodales, nisi ac fermentum congue, lectus velit aliquet nunc, id gravida augue ex non est. Integer finibus nibh sed sapien iaculis sagittis. Aenean blandit vel diam quis ultricies. Nulla vel mi eget erat pretium hendrerit eget nec felis. Praesent risus massa, pulvinar eget augue vitae, varius aliquam metus. Etiam in vestibulum justo. Morbi id augue non leo rhoncus semper. Sed mattis viverra tempor.


       
<ul class="collapsible collapse-default">
    <li>
      <div class="collapsible-header"><i class="material-icons">home</i>First</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet, consectetur...</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet, consectetur...</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet, consectetur...</span></div>
    </li>
</ul>
Collapsible "Class: collapse-default-darken"

  • homeFirst
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie, ligula ac ornare iaculis, ligula quam vulputate dui, sed hendrerit nunc ligula at neque. Fusce sodales, nisi ac fermentum congue, lectus velit aliquet nunc, id gravida augue ex non est. Integer finibus nibh sed sapien iaculis sagittis. Aenean blandit vel diam quis ultricies. Nulla vel mi eget erat pretium hendrerit eget nec felis. Praesent risus massa, pulvinar eget augue vitae, varius aliquam metus. Etiam in vestibulum justo. Morbi id augue non leo rhoncus semper. Sed mattis viverra tempor.
  • placeSecond
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie, ligula ac ornare iaculis, ligula quam vulputate dui, sed hendrerit nunc ligula at neque. Fusce sodales, nisi ac fermentum congue, lectus velit aliquet nunc, id gravida augue ex non est. Integer finibus nibh sed sapien iaculis sagittis. Aenean blandit vel diam quis ultricies. Nulla vel mi eget erat pretium hendrerit eget nec felis. Praesent risus massa, pulvinar eget augue vitae, varius aliquam metus. Etiam in vestibulum justo. Morbi id augue non leo rhoncus semper. Sed mattis viverra tempor.
  • whatshotThird
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie, ligula ac ornare iaculis, ligula quam vulputate dui, sed hendrerit nunc ligula at neque. Fusce sodales, nisi ac fermentum congue, lectus velit aliquet nunc, id gravida augue ex non est. Integer finibus nibh sed sapien iaculis sagittis. Aenean blandit vel diam quis ultricies. Nulla vel mi eget erat pretium hendrerit eget nec felis. Praesent risus massa, pulvinar eget augue vitae, varius aliquam metus. Etiam in vestibulum justo. Morbi id augue non leo rhoncus semper. Sed mattis viverra tempor.


       
<ul class="collapsible collapse-default-darken">
    <li>
      <div class="collapsible-header"><i class="material-icons">home</i>First</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet, consectetur...</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet, consectetur...</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet, consectetur...</span></div>
    </li>
</ul>
Collapsible "Class: collapse-gradient"

  • homeFirst
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie, ligula ac ornare iaculis, ligula quam vulputate dui, sed hendrerit nunc ligula at neque. Fusce sodales, nisi ac fermentum congue, lectus velit aliquet nunc, id gravida augue ex non est. Integer finibus nibh sed sapien iaculis sagittis. Aenean blandit vel diam quis ultricies. Nulla vel mi eget erat pretium hendrerit eget nec felis. Praesent risus massa, pulvinar eget augue vitae, varius aliquam metus. Etiam in vestibulum justo. Morbi id augue non leo rhoncus semper. Sed mattis viverra tempor.
  • placeSecond
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie, ligula ac ornare iaculis, ligula quam vulputate dui, sed hendrerit nunc ligula at neque. Fusce sodales, nisi ac fermentum congue, lectus velit aliquet nunc, id gravida augue ex non est. Integer finibus nibh sed sapien iaculis sagittis. Aenean blandit vel diam quis ultricies. Nulla vel mi eget erat pretium hendrerit eget nec felis. Praesent risus massa, pulvinar eget augue vitae, varius aliquam metus. Etiam in vestibulum justo. Morbi id augue non leo rhoncus semper. Sed mattis viverra tempor.
  • whatshotThird
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie, ligula ac ornare iaculis, ligula quam vulputate dui, sed hendrerit nunc ligula at neque. Fusce sodales, nisi ac fermentum congue, lectus velit aliquet nunc, id gravida augue ex non est. Integer finibus nibh sed sapien iaculis sagittis. Aenean blandit vel diam quis ultricies. Nulla vel mi eget erat pretium hendrerit eget nec felis. Praesent risus massa, pulvinar eget augue vitae, varius aliquam metus. Etiam in vestibulum justo. Morbi id augue non leo rhoncus semper. Sed mattis viverra tempor.


       
<ul class="collapsible collapse-gradient">
    <li>
      <div class="collapsible-header"><i class="material-icons">home</i>First</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet, consectetur...</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet, consectetur...</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet, consectetur...</span></div>
    </li>
</ul>

Dropdowns



Dropdown default lighten 

       
           
<!-- Dropdown Trigger -->
<a class='dropdown-trigger btn btn-default-lighten' href='#' data-target='dropdown'>BUTTON TEXT</a>

<!-- Dropdown Structure -->
<ul id='dropdown6' class='dropdown-content dropdown-default-lighten'>
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider" tabindex="-1"></li>
  <li><a href="#!">three</a></li>
  <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
  <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
</ul>
Dropdown default 

       
           
<!-- Dropdown Trigger -->
<a class='dropdown-trigger btn btn-default' href='#' data-target='dropdown'>BUTTON TEXT</a>

<!-- Dropdown Structure -->
<ul id='dropdown' class='dropdown-content dropdown-default'>
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider" tabindex="-1"></li>
  <li><a href="#!">three</a></li>
  <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
  <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
</ul>
Dropdown default darken 

       
           
<!-- Dropdown Trigger -->
<a class='dropdown-trigger btn btn-default-darken' href='#' data-target='dropdown'>BUTTON TEXT</a>

<!-- Dropdown Structure -->
<ul id='dropdown6' class='dropdown-content dropdown-default-darken'>
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider" tabindex="-1"></li>
  <li><a href="#!">three</a></li>
  <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
  <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
</ul>
Dropdown gradient 

       
           
<!-- Dropdown Trigger -->
<a class='dropdown-trigger btn btn-gradient' href='#' data-target='dropdown'>BUTTON TEXT</a>

<!-- Dropdown Structure -->
<ul id='dropdown' class='dropdown-content dropdown-gradient'>
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider" tabindex="-1"></li>
  <li><a href="#!">three</a></li>
  <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
  <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
</ul>

Switches

Switche "Class: switch-default-lighten"

       
 <div class="switch switch-default-lighten">
  <label>
   Off
  <input type="checkbox">
  <span class="lever"></span>
  On
  </label>
</div>
Switche "Class: switch-default"

       
 <div class="switch switch-default">
  <label>
   Off
  <input type="checkbox">
  <span class="lever"></span>
  On
  </label>
</div>
Switche "Class: switch-default-darken"

       
 <div class="switch switch-default-darken">
  <label>
   Off
  <input type="checkbox">
  <span class="lever"></span>
  On
  </label>
</div>
Switche "Class: switch-gradient"

       
 <div class="switch switch-gradient">
  <label>
   Off
  <input type="checkbox">
  <span class="lever"></span>
  On
  </label>
</div>

Sliders

Slider "Class: range-default"

      
<form action="#" class="range-default">
 <p class="range-field">
    <input type="range" id="test5" min="0" max="100" />
 </p>
</form>
Slider "Class: range-default-darken"

      
<form action="#" class="range-default-darken">
 <p class="range-field">
    <input type="range" id="test5" min="0" max="100" />
 </p>
</form>
Slider "Class: range-default-gradient"

      
<form action="#" class="range-default-gradient">
 <p class="range-field">
    <input type="range" id="test5" min="0" max="100" />
 </p>
</form>

Upload File

Upload File "Class: btn-default-lighten"

File 
      
<form action="#">
    <div class="file-field input-field">
      <div class="btn btn-default-lighten">
        <span>File
        <input type="file">
      </div>
      <div class="file-path-wrapper">
        <input class="file-path validate" type="text" placeholder="Upload your file">
      </div>
    </div>
 </form>
Upload File "Class: btn-default"

File 
      
<form action="#">
    <div class="file-field input-field">
      <div class="btn btn-default">
        <span>File
        <input type="file">
      </div>
      <div class="file-path-wrapper">
        <input class="file-path validate" type="text" placeholder="Upload your file">
      </div>
    </div>
 </form>
Upload File "Class: btn-default-darken"

File 
      
<form action="#">
    <div class="file-field input-field">
      <div class="btn btn-default-darken">
        <span>File
        <input type="file">
      </div>
      <div class="file-path-wrapper">
        <input class="file-path validate" type="text" placeholder="Upload your file">
      </div>
    </div>
 </form>
Upload File "Class: btn-gradient"

File 
      
<form action="#">
    <div class="file-field input-field">
      <div class="btn btn-gradient">
        <span>File
        <input type="file">
      </div>
      <div class="file-path-wrapper">
        <input class="file-path validate" type="text" placeholder="Upload your file">
      </div>
    </div>
 </form>

Modal With Fixed Footer

Modal "Class: modal-default-lighten"

      
<!-- Modal Trigger -->
<button data-target="modal5" class="btn btn-default-lighten modal-trigger">Modal With Fixed Footer</button>

  <!-- Modal Structure -->
<div id="modal5" class="modal modal-fixed-footer modal-default-lighten">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</span></p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>
Modal "Class: modal-default"

      
<!-- Modal Trigger -->
<button data-target="modal5" class="btn btn-default modal-trigger">Modal With Fixed Footer</button>

  <!-- Modal Structure -->
<div id="modal5" class="modal modal-fixed-footer modal-default">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</span></p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>
Modal "Class: modal-default-darken"

      
<!-- Modal Trigger -->
<button data-target="modal5" class="btn btn-default-darken modal-trigger">Modal With Fixed Footer</button>

  <!-- Modal Structure -->
<div id="modal5" class="modal modal-fixed-footer modal-default-darken">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</span></p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>
Modal "Class: modal-gradient"

      
<!-- Modal Trigger -->
<button data-target="modal5" class="btn btn-gradient modal-trigger">Modal With Fixed Footer</button>

  <!-- Modal Structure -->
<div id="modal5" class="modal modal-fixed-footer modal-gradient">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</span></p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>