All Projects → finnhvman → Matter

finnhvman / Matter

Licence: mit
Material Design Components in Pure CSS. Materializing HTML at just one class per component 🍰

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Matter

Material Backdrop
A simple solution for implementing Backdrop pattern for Android
Stars: ✭ 221 (-75.11%)
Mutual labels:  library, material-design, material, material-components
Smartmaterialspinner
The powerful android spinner library for your application
Stars: ✭ 108 (-87.84%)
Mutual labels:  library, material-design, material
Material Admin
Free Material Admin Template
Stars: ✭ 219 (-75.34%)
Mutual labels:  material-design, material, material-components
Quasar
Quasar Framework - Build high-performance VueJS user interfaces in record time
Stars: ✭ 20,090 (+2162.39%)
Mutual labels:  material-design, material, material-components
Material
A lightweight Material Design library for Angular based on Google's Material Components for the Web.
Stars: ✭ 143 (-83.9%)
Mutual labels:  material-design, material, material-components
Materialdesign2
A beautiful app designed with Material Design 2 using Android X.
Stars: ✭ 170 (-80.86%)
Mutual labels:  material-design, material, material-components
Framework7
Full featured HTML framework for building iOS & Android apps
Stars: ✭ 16,560 (+1764.86%)
Mutual labels:  library, material-design, material
Smart Webcomponents
Web Components & Custom Elements for Professional Web Applications
Stars: ✭ 110 (-87.61%)
Mutual labels:  material-design, material, material-components
Material Components Ios
[In maintenance mode] Modular and customizable Material Design UI components for iOS
Stars: ✭ 4,484 (+404.95%)
Mutual labels:  material-design, material, material-components
Android Iconics
Android-Iconics - Use any icon font, or vector (.svg) as drawable in your application.
Stars: ✭ 4,916 (+453.6%)
Mutual labels:  material-design, material, material-components
Textfieldboxes
Material Design text field that comes in a box, based on (OLD) Google Material Design guidelines.
Stars: ✭ 760 (-14.41%)
Mutual labels:  library, material-design, material
Fluid
📖 Library for QtQuick apps with Material Design
Stars: ✭ 601 (-32.32%)
Mutual labels:  material-design, material, material-components
Ibackdrop
A library to simply use Backdrop in your project (make it easy). Read more ->
Stars: ✭ 137 (-84.57%)
Mutual labels:  material-design, material, material-components
React Md
React material design - An accessible React component library built from the Material Design guidelines in Sass
Stars: ✭ 2,284 (+157.21%)
Mutual labels:  material-design, material, material-components
Material Intro
A simple material design app intro with cool animations and a fluent API.
Stars: ✭ 1,718 (+93.47%)
Mutual labels:  material-design, material, material-components
Taptargetview
An implementation of tap targets from the Material Design guidelines for feature discovery.
Stars: ✭ 5,114 (+475.9%)
Mutual labels:  material-design, material, material-components
Material Design Lite
Material Design Components in HTML/CSS/JS
Stars: ✭ 31,931 (+3495.83%)
Mutual labels:  material-design, material, material-components
Cyanea
A theme engine for Android
Stars: ✭ 1,319 (+48.54%)
Mutual labels:  material-design, material, material-components
Svelte Materialify
A Material UI Design Component library for Svelte heavily inspired by vuetify.
Stars: ✭ 351 (-60.47%)
Mutual labels:  material-design, material, material-components
Angular Mdc Web
Angular wrapper for Material Design (Web) Components
Stars: ✭ 542 (-38.96%)
Mutual labels:  material-design, material, material-components

Matter M logo

Matter

Material Design Components in Pure CSS

Materializing HTML at just one class per component (ex-Pure CSS Material Components)

13 Matter Components

🎬 Get Started

  1. Get Matter in one of the following ways:

    Normal build from CDN (include this in <head>):

    <link href="https://res.cloudinary.com/finnhvman/raw/upload/matter/matter-0.2.2.css" rel="stylesheet">
    

    Minified build from CDN (include this in <head>):

    <link href="https://res.cloudinary.com/finnhvman/raw/upload/matter/matter-0.2.2.min.css" rel="stylesheet">
    

    Download a build from the assets of a release in Releases, and include it in your project

  2. Use the Markup and apply the Class of your choice:

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>

Colors

<!-- 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>

Links

<!-- Link Markup (does not override font properties); Class: matter-link -->
<a class="matter-link" href="https://github.com/finnhvman/matter">Link</a>

Progress Indicators

<!-- Progress Markup (indeterminate); Classes: matter-progress-linear, matter-progress-circular -->
<progress class="matter-progress-linear"></progress>

<!-- Progress Markup (determinate); Class: matter-progress-linear -->
<progress class="matter-progress-linear" value="50" max="100"></progress>

Selection Controls

<!-- Checkbox Markup; Class: matter-checkbox -->
<label class="matter-checkbox">
    <input type="checkbox">
    <span>Checkbox</span>
</label>

<!-- Radio Markup; Class: matter-radio -->
<label class="matter-radio">
    <input type="radio" name="group">
    <span>Radio</span>
</label>

<!-- Switch Markup; Class: matter-switch -->
<label class="matter-switch">
    <input type="checkbox" role="switch">
    <span>Switch</span>
</label>

Textfields

<!-- Textfield Markup with <input> (Keep the placeholder attribute as it is!); -->
<!-- Classes: matter-textfield-filled, matter-textfield-outlined, matter-textfield-standard -->
<label class="matter-textfield-filled">
    <input placeholder=" "/>
    <span>Textfield</span>
</label>

<!-- Textfield Markup with <textarea> (Keep the placeholder attribute as it is!); -->
<!-- Classes: matter-textfield-filled, matter-textfield-outlined, matter-textfield-standard -->
<label class="matter-textfield-filled">
    <textarea placeholder=" "></textarea>
    <span>Textfield</span>
</label>

Tooltips

<!-- Tooltip Markup; Classes: matter-tooltip, matter-tooltip-top -->
<span class="matter-tooltip"><span id="tooltip-id" aria-hidden="true">Tooltip</span></span>

<!-- Put as first child of originating component -->
<!-- Use unique id on inner span of tooltip, refer it with aria-describedby in originating component -->
<label class="matter-textfield-outlined">
    <span class="matter-tooltip"><span id="tooltip" aria-hidden="true">Tooltip</span></span>
    <input placeholder=" " aria-describedby="tooltip"/>
    <span>Outlined Textfield with Tooltip</span>
</label>

Typography

<!-- Typography Classes: matter-h1, ..., matter-h6, matter-subtitle1, matter-subtitle2, -->
<!-- matter-body1, matter-body2, matter-button, matter-caption, matter-overline -->
<p class="matter-body1">Your paragraph here</p>

Use standard HTML attributes like autofocus, disabled, required, etc. where applicable to further configure components.

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

📦 Components & Utilities

Implemented/Planned:

🌐 Browser Support

Chrome, Firefox, Safari, Edge, Samsung Internet
Targeted Browsers: Chrome, Firefox, Safari
Supported Browsers: Edge, Samsung Internet

Automated tests are executed in targeted browsers and manual testing is performed in supported browsers.

Matter components are well-covered with Visual Feature Tests (VFTs). Visual Feature Tests verify certain visual parts of components like: dominant color, shape of corners (rounded/sharp), types of edges (outlined or not), shadows, and more. VFTs are executed for every component in various states (like hover, focus, active, etc. and their permutations) in targeted browsers. VFTs reside in the .spec.js files of the components.

👋 Who Is This For?

People who work on:

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

Newcomers to web development who want to build nice UIs quick and easy.

This is not for complex apps and SPAs. Rather use the following libraries in case of larger projects:

🤔 Philosophy

The purpose of Matter is to provide the most easy-to-use but accurate implementation of Material Design Components.

Matter has probably the lowest entry-barrier among Material Design Component libraries. The only technical knowledge needed to use it is basic HTML5. It doesn't rely on JavaScript, it only needs one to three HTML elements and a CSS class per component to work. The markup of the components is semantic by design.

Matter is built with theming in mind. Its components can be customized by specifying certain colors and/or fonts. The granularity of customization is variable: components can be themed on global level, component level, component instance level, or on any level between.

💎 Matter is solid. All the components are tested thoroughly to ensure rock-solid quality across all targeted browsers.

💧 Matter is liquid. Components can be resized fluidly to match layout needs, otherwise they take up the size necessary.

🎈 Matter is gas. It's highly compressible so delivery can be performed in compact formats like gzip or brotli.

⚡️ Matter is plasma. It's just CSS relying almost exclusively on class selectors making it lightning fast.

💬 Contact

If you have questions, feedback or anything to share you can get in touch via:

🙏 Special Thanks To

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].