Tag Archives: materialize framework tutorial

December 10, 2016 Materialized

Materialize Buttons

Materialize Buttons: Materialize Provides the inbuilt classes to create different buttons with effects. It is very simple to create buttons in Materialize framework. Here in this tutorial we are going to explain how you can create buttons in Materialize framework. You can also use our online editor to edit and
run the code online.

Materialize Buttons Example

There are following types of Buttons Available in Materialize-

→Raised
→Floating
There are basically four types of floating buttons –
1. Fixed Action
2. Horizontal FAB
3. Click Only FAB
4. Toolbar FAB
→Flat
→Submit
→Large
→Disabled

Let us go one by one to understand the above button types.

Raised Button

You can create Raised Button simply as below –

Materialize Raised Buttons | Example:

 Raised Button

    shop Raised Button With Icon

If you will run the above example it will produce the output something like this –

Materialize Buttons Example

Floating Button

Class btn-floating is used to create floating button in Materialize. Here is an example of floating button –

Materialize Floating Button Example:

edit

If you run the above example it will produce the following output –

Floating Button Materialize Example

Fixed Action Button

You can create fixed action which can contain multiple action that will appear on hover-

Materialize Floating Action Button Example:

 
    
      mode_edit
    
    
      insert_chart
      format_quote
      publish
      attach_file

If you run the above example it will produce the output something like this –

Fixed Action Button Example

Horizontal Fab

Class horizontal is used to create horizontal fab button. You can create Horizontal Fab simply as below –

Materialize Horizontal Fab Button Example:

 
    
      mode_edit
    
    
      insert_chart
      format_quote
      publish
      attach_file

If you run the above example it will produce the output something like this –

Materialize Horizontal Fab Button Example

Click Only Fab

If you want to open the option only on click, add the class click-to-toggle simply as below –

Materialize Click Only Fab Button Example:

 
    
      mode_edit
    
    
      insert_chart
      format_quote
      publish
      attach_file

Fab To Toolbar

To create Fab toolbar add class toolbar to the fab. Here is an example of fab toolbar-

Materialize Fab Toolbar Example:

 
    
      mode_edit
    
    
      delete
      format_quote
      publish
      attach_file

If you run the above example it will produce the output something like this –

Materialize Fab Toolbar

Flat Button

Class btn-flat is used to create Flat button in Materialize. Here is an example of flat Button –

Materialize Flat Button Example:

 Flat Button

Submit Button

Materialize Submit Button Example:

Disabled Button

Class disabled is used to create disabled button in materialize.

Materialize Disabled Button Example:

If you run the above example it will produce output something like this –

Read More

December 2, 2016 Materialized

Materialize Badges

Materialize Badges : Badges are basically used to show the notifications or unread messages. Materialize provides inbuilt classes to show Badges. Here in this tutorial we are going to explain how you can use badges in Materialize framework. You can also use our online demo edit and run the code online.

Materialize Badges Example

Let us go step by step to understand the badges-

Add Badges To Collections

Class badge is used to create badge and class new badge is used to add background to the badges. Here is an example to add badges in collections simply as below –

Materialize Add Badges In Collections Example:

 
    2Dummy
    Dummy
    5Dummy

If you run the above example it will produce output something like this –

Materialize Badges Example

Add Badges To Dropdown

You can add badges to dropdown menu simply as below –

Materialize Add badges to Dropdown Menu:

 
    Item 11
    Item 21
    Item 3
  
  My Dropdown

If you run the above example it will produce output something like this –

Materialize Badges Example In Dropdown

Add Badges To Navbar

Materialize Add badges to Navbar:

 
  
    Tutorialsplane.com
    
      Profile
      Messages4
      Logout

If you run the above example it will produce output something like this –

Add Badges To Collapsibles

You can add badges to collapsibles simply as below –

Materialize Add badges to Collapsibles:

 
  
    4perm_mediaFirst
    This is dummy description.
  
  
    10perm_scan_wifiFirst
    This is dummy description.
  
  
    2shopping_cartSecond
    This is dummy description.

If you run the above example it will produce output something like this –

Badges in Collapsible

Learn More

Let us have some More example and demo about the Angular Material Chips.

Custom Captions

Materialize Add badges to Custom Captions:

  5
  6

Add Custom Color

If you want to add color to the badges you can add simply as below –

Materialize Add Color to badges Example:

 14
  10

The above example will give output something like this –

Read More

November 30, 2016 Materialized

Materialize Typography

Materialize Typography Roboto 2.0 standard font is used in Materialize framework. Here in this tutorial we are going to explain headings, blockquotes and free-flow text. You can also use our online demo to edit and run the code online.

Materialize Typography

Sometimes we do not need the default Roboto font so we need to override/remove the default Roboto font. You can remove the roboto font simply as below –

Remove | Override Roboto

[su_divider top=”no” size=”2″ margin=”5″]

You can remove the roboto the simple css as –

Materialize Typography | Remove | Override Roboto | Example:

html {
    font-family: GillSans, Calibri, Trebuchet, sans-serif;
  }

Headings

[su_divider top=”no” size=”2″ margin=”5″]

Materialize provides basic styling for the headings. There are following heading styles available –

Materialize Headings | Example:

Heading H1
Heading H2
Heading H3
Heading H4
Heading H5
Heading H6

If you run the above example it will produce output something like this –

Materialize Typography Headings Example

Blockquotes

[su_divider top=”no” size=”2″ margin=”5″]

Blockquotes gives emphasis to a quote or citation. Here is an example of blockquote in Materialize-

Materialize Blockquote Example:

 
      This is quotation Blockquote tag Example.

If you run the above example it will produce output something like this –

Flow Text

[su_divider top=”no” size=”2″ margin=”5″]

Add the class flow-text to the body of text as in the example given below –

Materialize Flow Text Example:

This is dummy text.This is dummy text. This is dummy text.This is dummy text. This is dummy text.This is dummy text. This is dummy text.

Read More

November 22, 2016 Materialized

Materialize Table

Materialize Table Materialize Provides Utility Classes to create tables, Using these classes we can create beautiful tabales. Here in this tutorial we are going to explain how to create different-different tables using these classes. You can also use our online editor to edit and run the code online.

Materialize Table Example

You can use the utility classes to create following tables-

Borderless Table

By Default Tables in Materialize Framework are borderless. If you do not Add any class to the table then it will be borderless table. Here is an example of borderless table-

How to create Borderless Table in Materialize ?

If you run the above example it will produce output something like this –

Materialize Table Example

Bordered Table

To create Bordered Table add class bordered to the table tag. Here is an example of bordered table –

How to create Bordered Table in Materialize ?

If you run the above example it will produce output something like this –

Materialize Bordered Table

Striped Table

To create Striped Table add class striped to the table tag. Here is an example of Striped table –

How to create Striped Table in Materialize ?

If you run the above example it will produce the output something like this –

Materialize Striped Table

Highlight Table

To create Highlight(ie. change row background on hover) Table add class highlight to the table tag. Here is an example of Highlight table –

How to create Highlight Table in Materialize ?

Centered Table

To create Centered Table add class centered to the table tag. Here is an example of Centered table –

How to create Centered Table in Materialize ?

If you run the above example it will produce the output something like this –

Materialize Centered Table

Responsive Table

To create Responsive Table add class responsive-table to the table tag. Here is an example of Responsive table –

How to create Responsive Table in Materialize ?

Responsive table will be scrollable on smaller screens.

Read More

November 19, 2016 Materialized

Materialize Shadow

Materialize Shadow : Materialize Provides Various Shadow classes to Add the Shadow effect in the element. Here in this tutorial we are going to explain how you can Add shadow to the elements with example & demo.

Materialize Shadow Example

Here is list of Classes Available To Add Shadows-

z-depth-1: This Adds 1px border and z-depth 1.
z-depth-2: This Adds 2px border and z-depth 2.
z-depth-3: This Adds 3px border and z-depth 3.
z-depth-4: This Adds 4px border and z-depth 4.
z-depth-5: This Adds 5px border and z-depth 5.
z-depth-0: This is used to remove shadows from the element that have z-depths defaults.

Box Shadow Example

Let us create an example to understand the box Shadow in Materialize framework.

Materialize Shadow Example:


      z-depth-1
    
    
      z-depth-2
    
    
      z-depth-3
    
    
      z-depth-4
    
    
      z-depth-5

If you run the above example it will produce output something like this –

Materialize Shadow Example & Demo

Read More

November 18, 2016 Materialized

Materialize Media

Materialize Media– Materialize provides classes for displaying media content. Here in this tutorial we are going to explain how you can use media classes in MaterializeCSS to manage the media content. You can also use our online editor to edit and run the code online. You can also watch video tutorial for media content tutorial.

Materialize Media Example

Images

Images can be styled in following ways-

Responsive Images

To create responsive images you need to add the class responsive-img to the image tag which will make image responsive-

Materialize Media | Responsive Images Example:

Circular Images

To make image circular just add circle class to the image tag.

Materialize Media | Image Circle Example:

If you run the above example it will produce output something like this –

Materialize Media | Image Circle Example:

Videos

You can embed the videos in page using responsive-video and video-container class.

Responsive Embed

If you want to embed videos such as youtube videos you can embed videos simply as below which will be responsive on all devices.

Materialize Media | Embed Youtube Video Example:

Responsive Videos

You can make html videos responsive by simply adding the class responsive-video

Materialize Media | Responsive Video Html 5 Example:

Read More

November 17, 2016 Materialized

Materialize Helpers

Materialize Helpers : Materialize Provides inbuilt classes which fulfills the common and frequent tasks such as alignment, float, formatting, hover etc. Here in this tutorial we are going to explain how you can use these predefined classes. You can also use our online editor to edit and run the code online.

Materialize Helpers Example

Following helper classes are available-

Alignment Classes
Float Classses
Hiding Content Classes
Formatting Class
Hover Class
Browser Defaults Class

Alignment Classes

There are following alignment classes in Materialize-

Vertical Align
Text Align(Left Align, Right Align, Center Align)

Vertical Align

If you want to align the things vertically just add the class valign-wrapper to the container and valign class to the element you want to align vertically.

Materialize Helpers : Vertical Align Middle


  Hello World!

If You run the above example it will produce the output something like this –

Materialize Helpers : Vertical Align Middle Class

Text Align

There are following three classes which can be used to align text horizontally-

left-align : This class is used to left align the text.
right-align : This class is used to right align the text.
center-align : This class is used to center align the text.

Now let us create an example to understand this –

Materialize Helpers | Text Align | Left | Right | Center | Example:


  Left Align Text
  Right Align Text
  Center Align Text

If you run the above example it will produce the output something like this –

Text Align | Left | Right | Center | Example:

Float

There are basically two float classes available – left & right. You can use these classes to easily float the elements.

Materialize Helpers | Float | Left | Right Example:


  Float Left


  Float right

If you run the above example it will produce the output something like this –

Hiding Contents Classes

Sometimes we need to hide some content for all devices or some specific devices. Materialize provides inbuilt classes to hide content on several devices.

.hide: Hide for all Devices
.hide-on-small-only: Hide for Mobile Only
.hide-on-med-only: Hide for Tablet Only
.hide-on-med-and-down:Hide for Tablet and Below
.hide-on-med-and-up:Hide for Tablet and Above
.hide-on-large-only:Hide for Desktop Only

Materialize Helpers | Hide Contents Example:



 This will be hidden on desktop.

If you run the above example it will hide the div content on desktop.

Formatting

[su_divider top=”no” margin=”5″]

Materialize provides Formatting classes to format content.

Truncation
Hover

Truncation

This class is used to truncate the long text in an ellipsis.

Materialize Helpers | Truncate Text Contents Example:

This is large text heading Example

If you run the above example it will produce the output something like this –

Truncate text example

Hover

Materialize provides the hoverable class that adds the box shadow animation.

Materialize Helpers | Hoverable Effect Example:

 Hoverable Effect Demo

Browser Defaults

Some default styles are overridden in Materialize and sometimes we need default styles instead of overridden, so it provides browser-default class to revert the elements style to their original state.

Read More

November 11, 2016 Materialized

Materialize Color

Materialize Color: Materialize provides rich predefined colors. These colors are based on Material Design base colors. Colors in Materialize are defined with a base color class and an optional class which can be used for lighten or darken. Here in this tutorial we are going to explain how you can use colors in using the predefined classes in Materialize.

Materialize Color Usage | Example

Let us go step by step to understand the colors in Materialize –

Background Color

You can add the background color just add the color name and lightness/brightness as the class to the element. Here is an example to add background color in Materialize.

Materialize Add Background Color Example:

Background Color Example.

If you run the above example it will produce the output something like this –

Background Color : Background Color Examaple

Text Color

To change text color you just need to append “-text” in color classes. Let us create an example to change the color of the text.

Text Color Change in Materialize:

Text Color Example.

If you run the above example it will produce output something like this –

Colors

Following colors are available which you can use with lightness/darkness-

red
pink
purple
deep-purple
blue
indigo
light-blue
teal
cyan
green
light-green
lime
yellow
amber
orange
deep-orange
brown
grey
blue-grey
black
white
transparent

Lightness/Darkness

Following Lightness/Darkness classes Are available which can be used to apply darkness or lightness in color.

lighten-1
lighten-2
lighten-3
lighten-4
lighten-5
darken-1
darken-2
darken-3
darken-4
accent-1
accent-2
accent-3
accent-4

Learn More

Let us have some more example and demo about the Materialize Colors.

Basic Colors

Let us create an example of basic colors listed above-

Materialize Add Background Color Example:


red
pink
purple
deep-purple
blue
indigo
light-blue
teal
cyan
green
light-green
lime
yellow
amber
orange
deep-orange
brown
grey
blue-grey
black
white
transparent

If you run the above example it will produce the output something like this –

Materialize Color Picker

Now let us Understand how lightness and darkness works.

Lightness/Darkness Example

Here let us pick one color let us say “blue” and add lightness/darkness classes to see how it works-

Materialize Lightness | Darkness Color Example:


Blue
Blue lighten-1
Blue lighten-2
Blue lighten-3
Blue lighten-4
Blue lighten-5
Blue darken-1
Blue darken-2
Blue darken-3
Blue darken-4
Blue accent-1
Blue accent-2
Blue accent-3
Blue accent-4

If you run the above example it will produce the output something like this –

Materialize Color Lightness Brightness

Read More

November 10, 2016 Materialized

Materialize Grid

Materialize Grid– MaterializeCss uses 12-column fluid responsive layout grid system. All Columns have equal width no matter what is the browser’s width. Here in this tutorial we are going to explain how to create grid and use it in Materialize framework. You can also use our online editor to edit and run the code online.

Materialize Grid Example

Let us go step by step to create grid in Materialize. First we will create 12-column layout grid to understand how it works. –

Materialize Grid - 12 Columns Grid

12-Column Grid Example

Create a div with class “row” then add columns into it. To add columns create div then add class “col” to create column and add class “s1”. s1 class is used to create 12 column layouts which divides the screen into 12 equal columns.

Materialize Grid Example: 12 Column Grid

If you run the above example it will produce the output something like this –

Learn More

Let us have some example and demo about the Materialize Grids.

12 Columns & 6 Columns | Different Width Example

Sometimes we need to create columns of different-different width, You can use inbuilt classes to create columns of different width. For example to create 12 Columns(Together) you just need to add class s12 ie. you are combining 12 columns together. Suppose you want to make 2 columns only then you need to group 6-6 columns together which will create two columns of equal width, for 2 columns layout you need to add s6 class to both divs. Here is an example of both 12 and 6 column layouts-

12 Columns & 6 Columns Layout Example:

 
      12 Column Full Width
      6 Column(50% width)
      6 Column(50% width)

If you run the above example it will produce the output something like this –

12 Columns & 6 Columns Together Example

Offsets

To add offset, add offset class prefix and then add number(number of columns you want offset). Here is an example –

Materialize Grid Offset Example:

 
      12 Column Full Width
      6-columns (offset-by-6)

If you run the above example it will produce output something like this –

Materialize Offset Grid Example

Section

Materialize provides section class which adds simple padding at bottom and top. You can create section simply adding the section class to the div. Here is an example of simple section in Materialize –

How to create section in Materialize?:

 
   
    Section 1
    Content Goes Here...
  
  
  
    Section 2
    Content Goes Here...

If you run the above example it will produce the output something like this –

Materialize Section Class Example

Divider

Dividers are 1 pixel line which are used to separate the contents of the page. It is very simple to create divider in Materialize framework. Materialize provides divider class to create dividers, simply add this class to the div. Here is an example of Divider in Materialize Framework.

How to create Divider in Materialize ?

 
   
   
    Section 1
    Content Goes Here...
  
  
  
    Section 2
    Content Goes Here...
  
   
  
    Section 3
    Content Goes Here...

If you run the above example it will produce output something like this –

Materialize Grid Example

Read More