Scribd
Upload
2 views

W12 Materialize CSS - Part 2 - Presentation

This document provides a comprehensive guide on using MaterializeCSS with CodeIgniter, detailing various classes for colors, helpers, media, shadows, tables, typography, and more. It explains how to implement design features such as color palettes, text alignment, responsive images, and table formatting. Additionally, it covers the use of helper classes for functionality like vertical alignment and truncation, as well as customization options for typography and blockquotes.

Uploaded by

Winter Equinox
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

W12 Materialize CSS - Part 2 - Presentation

This document provides a comprehensive guide on using MaterializeCSS with CodeIgniter, detailing various classes for colors, helpers, media, shadows, tables, typography, and more. It explains how to implement design features such as color palettes, text alignment, responsive images, and table formatting. Additionally, it covers the use of helper classes for functionality like vertical alignment and truncation, as well as customization options for typography and blockquotes.

Uploaded by

Winter Equinox
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

Working Around with MaterializeCSS

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
Base colors:
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.
• To use it as a Text Color, just append a “–text” suffix to the color class

Or a combination of background color and text color:


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.
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:

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:
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.
• 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.
Outputs:
Table / Default Table
• 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:
Bordered Table
• If you still prefer bordered tables, use the class bordered to the table
element.
Striped Table
• Use striped class for striped table
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.
• 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.
Flow Text
• 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.
•
Thank you…

You might also like