Working Around with MaterializeCSS

Now you know how to integrate MaterializeCSS to CodeIgniter and create grid layouts, in this chapter,
we’ll cover the rest of the MaterializeCSS classes you needed in Web Development.

CSS
Here are the classes that you can integrate with your elements for added design or functionality:

Colors
MaterializeCSS offers a color palette based on the material design base colors.

Here are the base color classes that you can use:

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

And the classes you can add to associate on those base colors:

lighten-N
darken-N
accent-N (applicable on selected base colors)

Where N is a number you can choose from 1-5 that ligthens or darkens the color into a certain extent.

To use it as a Background Color, just add the color name and light/darkness as a class to the element.

Example:

To use it as a Text Color, just append a “–text” suffix to the color class

Example:

Or a combination of background color and text color:

Example:

Helpers
Helper classes are used to assist in providing some common functionality.

Vertical Align

To vertical align an element content within a parent container, we simply add the valign-wrapper class
to the parent element and valign class to the child element.

Example:

Module 17 – Working Around with Materialize CSS 2

Text Align

To horizontally align content, we can add any of the following classes:

• left-align
• right-align
• center-align

Quick Floats

Floats specify an element on where to place, either using left or right classes accordingly.

Hiding Content

Instead of manually using CSS target media queries to hide an element, here are the classes you can use:

Class Screen Range

.hide Hidden for all Devices

.hide-on-small-only Hidden for Mobile Only

.hide-on-med-only Hidden for Tablet Only

.hide-on-med-and-down Hidden for Tablet and Below

.hide-on-med-and-up Hidden for Tablet and Above

.hide-on-large-only Hidden for Desktop Only

Add the class directly on the element you like to be hidden on a specified screen range.

Truncation

When you have a long line of text in an element that needs to be shortened or truncated, we can use
the truncate class to remove long lines of text into an ellipsis(…).

Example:

Outputs:

Module 17 – Working Around with Materialize CSS 3

Hover

MaterializeCSS has a class for hover events, it adds an animation box shadow to an element container.
Make containers hoverable by using the hoverable class but it is specially designed for card panels.

Example:

Outputs:

Browser Defaults

When using MaterializeCSS, it is commonly that it will replace most of the element’s CSS design
properties. If you wish to revert back to their default state and design, place a browser-default class.

Elements affected by MaterializeCSS:

• UL element(Bullet points)
• SELECT element(Browser default select element)

Media
Responsive Images

To make an image adapts and resize responsively to the screen size, add the responsive-img class to an
image element. It fundamentally utilizes the CSS rules of max-width:100%; and height:auto;.

Circular Images

To make an image appear round and circle, add the circle class to the element.

Module 17 – Working Around with Materialize CSS 4

Responsive Embeds

If you have an embed widget from Youtube or other sites that you want to make responsive. Append
the video-container class to them.

Responsive Videos

Make your HTML5 Videos responsive by putting the class responsive-video to the video tag’s class
attribute.

Shadow

Material Design is know for a realistic card design feel and what it emphasises is on depth and shadows.
A material design element should have a look of how far raised or close it is to the viewer’s perspective.

We can this depth or shadow effect by simply adding a z-depth-N class where N is a number from 1 to 5.
z-index-0 class is used to reset or remove this depth or shadowy effect.

Example:

Outputs:

Module 17 – Working Around with Materialize CSS 5

Table
Default Table

For a more organized tabular data, MaterializeCSS redesigns table into borderless design by default. The
table’s mobile-screen widths are automatically centered.

In order to make use of it, your table structure should follow this format:

Example:

Output:

Module 17 – Working Around with Materialize CSS 6

Bordered Table

If you still prefer bordered tables, use the class bordered to the table element.

Example Output:

Striped Table

Use striped class for striped table

Example Output:

Module 17 – Working Around with Materialize CSS 7

Highlighted Table

For an added “highlight” effect to rows on mouser hover, add the highlight class.

Example Output:

Mouse pointed on Row 3

Centered Table

Center the table’s content by adding the centered class

Responsive Table

For a table that make the table horizontally scrollable on small screen widths, add the responsive-table
class to the table element tag.

Module 17 – Working Around with Materialize CSS 8

Typography
The Google Material design use the Roboto font which MaterializeCSS also possess.

You can use 5 different font-weights:

• 200
• 300
• 400
• 500
• 600

Removing Roboto

If you want to remove the Roboto font and prefer a different font, you can just change the font-family
property directly by the overriding CSS Style.

Blockquote

Blockquotes are used to emphasize a quote or citation by putting a colored left border to the text.

It also supports nesting which means you can put a blockquote element within a blockquote element.
This represents text hierarchy and emphasis.

Create your own by putting text or content inside the <blockquote> element tags.

Example:

Output:

Notice the red left-border of the blockquote.

Flow Text

Module 17 – Working Around with Materialize CSS 9

Flow text is a responsive text class that change the text size depending on the screen size. This feature is
very useful in text heavy webpages that needs fluidly scalable text content. You can make text
responsive by adding flow-text class to div or paragraph element container.

Module 17 – Working Around with Materialize CSS 10