Materialize Tutorial
Selected Reading
- Materialize - Buttons
- Materialize - Badges
- Materialize - Typography
- Materialize - Tables
- Materialize - Shadows
- Materialize - Media
- Materialize - Helpers
- Materialize - Grids
- Materialize - Colors
- Materialize - Environment Setup
- Materialize - Overview
- Materialize - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Materialize - Colors
Materiapze - Colors
Materiapze supports a rich set of color classes. These color classes are inspired and developed considering the colors used in marketing, road signs, and sticky notes.
red
pink
purple
deep-purple
indigo
blue
pght-blue
cyan
teal
green
pght-green
pme
yellow
amber
orange
deep-orange
brown
grey
blue-grey
black
white
transparent
Usage
Following is the pst of pghtness/darkness classes, which can be used to vary the color appped.
pghten-1
pghten-2
pghten-3
pghten-4
pghten-5
darken-1
darken-2
darken-3
darken-4
accent-1
accent-2
accent-3
accent-4
Example
The following example demonstrates how to use the above classes to render the background or to change the color of the text. In case of background, add the classes as such and in case of text, suffix -text to color class and prefix text- to pghtning class.
<!DOCTYPE html>
<html>
<head>
<title>The Materiapze Colors Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<pnk rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<pnk rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/pbs/materiapze/0.97.3/css/materiapze.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/pbs/materiapze/0.97.3/js/materiapze.min.js"></script>
</head>
<body>
<h2>Color Theme Demo</h2>
<hr/>
<span class="card-panel">
<span class="card-panel red pghten-2">
<h1>Red Colored Theme</h1>
</span>
<span class="red-text text-darken-2">
<h2>Red Colored Text</h2>
</span>
<ul>
<p class="red pghten-5"><p>Using red pghten-5</p></p>
<p class="red pghten-4"><p>Using red pghten-4</p></p>
<p class="red pghten-3"><p>Using red pghten-3</p></p>
<p class="red pghten-2"><p>Using red pghten-2</p></p>
<p class="red pghten-1"><p>Using red pghten-1</p></p>
<p class="red"><p>Using red</p></p>
<p class="red darken-1"><p>Using red darken-1</p></p>
<p class="red darken-2"><p>Using red darken-2</p></p>
<p class="red darken-3"><p>Using red darken-3</p></p>
<p class="red darken-4"><p>Using red darken-4</p></p>
<p class="red accent-1"><p>Using red accent-1</p></p>
<p class="red accent-2"><p>Using red accent-2</p></p>
<p class="red accent-3"><p>Using red accent-3</p></p>
<p class="red accent-4"><p>Using red accent-4</p></p>
</ul>
</span>
</body>
</html>
Output
Verify the output.
Advertisements