44

GitHub - finnhvman/matter: Material Components in Pure CSS

 5 years ago
source link: https://github.com/finnhvman/matter
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

README.md

Matter M logo

Matter

Material Components in Pure CSS

This project is work in progress, I am open-sourcing Pure CSS Material Components.

13 Matter Components

? Get Started

Configurable builds, CDN support, and more are coming soon! Right now the process is manual:

  1. Download matter.css from dist folder. (For experimenting you can also use it from CDN, not production grade: https://res.cloudinary.com/finnhvman/raw/upload/v1548351517/matter/matter-experimental-3.css)
  2. Include it in your project or build pipeline
  3. Apply the class of your choice:
<!-- Contained Button -->
<button class="matter-button-contained">Button</button>

<!-- Outlined Button -->
<button class="matter-button-outlined">Button</button>

<!-- Text Button -->
<button class="matter-button-text">Button</button>


<!-- Filled Textfield (keep the placeholder attribute as it is) -->
<label class="matter-textfield-filled">
    <input placeholder=" "/>
    <span>Textfield</span>
</label>

<!-- Filled Textfield (textarea) (keep the placeholder attribute as it is) -->
<label class="matter-textfield-filled">
    <textarea placeholder=" "></textarea>
    <span>Textfield</span>
</label>

<!-- etc. -->


<!-- Tooltip (use a div to wrap component) -->
<div class="matter-tooltip" aria-label="Tooltip">
    <button class="matter-button-text">Button</button>
</div>

Click the link of a component below to find more examples of its usage in the .spec.html file!

? Components

Implemented/Planned:

? Contact

If you have questions, feedback or anything to share related to the project, then you can contact me via:


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK