Pure CSS Material Components Library – Matter.css

Category: CSS & CSS3 , Frameworks , Recommended | April 26, 2019
Author: finnhvman
Views Total: 755
Official Page: Go to website
Last Update: April 26, 2019
License: MIT

Preview:

Pure CSS Material Components Library – Matter.css

Description:

Matter.css is a collection of Material Design inspired, CSS only components for modern web & mobile design.

Components included:

  • Button
  • Checkbox
  • Radio button
  • Toggle switch
  • Range slider
  • Progress bar
  • Text field
  • Tooltip
  • And more…

How to use it:

Download and include the Matter.css on the web page.

<link rel="stylesheet" href="matter.css">

The markup.

<a class="title" href="https://codepen.io/finnhvman/pen/MQyJxV" target="_top">Button - Contained</a>
<div><button class="pure-material-button-contained">Contained</button></div>
<div><button class="pure-material-button-contained" disabled>Contained</button></div>

<a class="title" href="https://codepen.io/finnhvman/pen/GYaWdV" target="_top">Button - Outlined</a>
<div><button class="pure-material-button-outlined">Outlined</button></div>
<div><button class="pure-material-button-outlined" disabled>Outlined</button></div>

<a class="title" href="https://codepen.io/finnhvman/pen/YeXwNY" target="_top">Button - Text</a>
<div><button class="pure-material-button-text">Text</button></div>
<div><button class="pure-material-button-text" disabled>Text</button></div>

<div class="checkboxes">
  <label class="pure-material-checkbox">
      <input type="checkbox">
      <span>Unchecked</span>
  </label>
  <label class="pure-material-checkbox">
      <input type="checkbox" checked>
      <span>Checked</span>
  </label>
  <label class="pure-material-checkbox">
      <input type="checkbox">
      <span>Indeterminate</span>
  </label>
</div>
<div class="checkboxes">
  <label class="pure-material-checkbox">
      <input type="checkbox" disabled>
      <span>Unchecked</span>
  </label>
  <label class="pure-material-checkbox">
      <input type="checkbox" checked disabled>
      <span>Checked</span>
  </label>
  <label class="pure-material-checkbox">
      <input type="checkbox" disabled>
      <span>Indeterminate</span>
  </label>
</div>

<div class="radios">
  <label class="pure-material-radio">
      <input type="radio" name="group-enabled">
      <span>Unchecked</span>
  </label>
  <label class="pure-material-radio">
      <input type="radio" name="group-enabled" checked>
      <span>Checked</span>
  </label>
</div>
<div class="radios">
  <label class="pure-material-radio">
      <input type="radio" name="group-disabled" disabled>
      <span>Unchecked</span>
  </label>
  <label class="pure-material-radio">
      <input type="radio" name="group-disabled" checked disabled>
      <span>Checked</span>
  </label>
</div>

<div class="switches">
  <label class="pure-material-switch">
      <input type="checkbox">
      <span>Off</span>
  </label>
  <br/>
  <label class="pure-material-switch">
      <input type="checkbox" checked>
      <span>On</span>
  </label>
</div>
<div class="switches">
  <label class="pure-material-switch">
      <input type="checkbox" disabled>
      <span>Off</span>
  </label>
  <br/>
  <label class="pure-material-switch">
      <input type="checkbox" checked disabled>
      <span>On</span>
  </label>
</div>

<div>
  <label class="pure-material-slider">
      <input type="range" min="0" max="100">
      <span>Slider</span>
  </label>
</div>
<div>
  <label class="pure-material-slider">
      <input type="range" min="0" max="100" disabled>
      <span>Slider</span>
  </label>
</div>

<div>
  <progress class="pure-material-progress-circular"></progress>
</div>

<div class="progresses">
  <progress class="pure-material-progress-linear" value="0" max="100"></progress>
  <progress class="pure-material-progress-linear"></progress>
</div>

<div class="textfields">
  <label class="pure-material-textfield-filled">
      <input placeholder=" ">
      <span>Empty</span>
  </label>
  <label class="pure-material-textfield-filled">
      <input placeholder=" " value="Some text">
      <span>Non-empty</span>
  </label>
  <label class="pure-material-textfield-filled">
      <textarea placeholder=" "></textarea>
      <span>Empty Textarea</span>
  </label>
  <label class="pure-material-textfield-filled">
      <textarea placeholder=" ">Some text</textarea>
      <span>Non-empty Textarea</span>
  </label>
</div>

Previews:

Matter.css Preview 1

Matter.css Preview 1

Matter.css Preview 2

Matter.css Preview 2

Changelog:

v0.2.2 (04/26/2019)

  • Fix box-sizing reset issues
  • Fix issue with colors

v0.2.0 (03/27/2019)

  • Add: Color System (Primary, Secondary, Error, Warning, Success)
  • Add: Link (style for anchor tag)
  • 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 Reply