Pure CSS Material Design Components Library – Matter.css

Category: Layout | March 29, 2019
Author: finnhvman
Official Page: Go to Website
Last Update: December 15, 2019
License: MIT

The Matter.css is a complete library of material components which build with Pure CSS only. It’s a readymade kit which easies to use.

It includes a lot of items and all you need to pick a specific component and its CSS to implement on your website.

You just need to pick the HTML code and one class from the stylesheet and you are done.

All of the components are design for modern web and mobile sites.

 What are Components Included in Matter.css?

The library included more than 10 components. It has all the basic components which every website should need. Let’s take a look at the list of components.

  • Three Different Buttons
  • Two Different Checkbox
  • Two Radio buttons
  • Toggle switch
  • Range slider
  • Progress – Circular
  • Progress – Linear
  • Text field
  • Tooltip
  • And more…

How to Use Material Components:

Download the component and add the Matter.css on the web page.

<link rel="stylesheet" type="text/css" href="dist/matter.css" />

Each component arrange in a different folder for easy to use. Simple Go to src/components and you will find the different folders for each component.

Now Let’s take a look at the HTML of Different Buttons.

<!-- Button Markup; Classes: matter-button-contained, matter-button-outlined, matter-button-text, -->
<!-- matter-button-unelevated -->
<button class="matter-button-contained">BUTTON</button>
<!-- Button Examples: Contained, Outlined, Text and Unelevated Buttons -->
<button class="matter-button-contained">CONTAINED</button>
<button class="matter-button-outlined">OUTLINED</button>
<button class="matter-button-text">TEXT</button>
<button class="matter-button-unelevated">UNELEVATED</button>

It’s quite easy to change the color of any component, All you need to add define a specified class name.

<!-- Change the color of components -->
<!-- Classes: matter-primary, matter-secondary, matter-error, matter-warning, matter-success -->
<button class="matter-button-contained matter-secondary">BUTTON</button>
<!-- Change the color of text; Classes: matter-primary-text, matter-secondary-text, -->
<!-- matter-error-text, matter-warning-text, matter-success-text -->
<p class="matter-secondary-text">I am a paragraph</p>

Who Need this Kit?

Its design for people who work on:

  • Building Simple projects
  • Internal facing tools.
  • Framework-less apps.
  • Javascript-less apps.
  • Proof of Concept and demo projects.


v0.2.0 (03/27/2019)

  • Add Different color scheme (Primary, Secondary, Error, Warning, Success).
  • Add Link styling.
  • Add Typography (H1 – H6, overline, subtitles, and more).
  • Add: Unelevated Button (shadowless Contained Button).
  • Change: Buttons – Remove forced uppercase (96c9a5c).
  • Change: Components – Introduce intermediate CSS variables for theme colors (1cb7650).
  • Change: Switch – Use surface color as off-color of thumb.

You Might Be Interested In:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.