Providing accessible components with Web Components & Material You

Overview

tiny-material

Still on developing, DO NOT use for production environment

Run well on Google Chrome, Firefox, Chrome for Android, Microsoft Edge (Chromium), Opera for Android

Core tech:

  • Web Components (if you want to use polyfill, import by your self)
  • Shadow Root
  • Constructable StyleSheets (using polyfill, so now in all browser the styles are <style>)
  • CSS variable (run well on most browser)
  • :focus-visible (without polyfill)
  • Typescript (only for type check)
You might also like...

İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

 İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

🟡 instagram-clone This is a instagram clone. You can sign in, sign up, upload image, make comment 📷 ⚡ LIVE To check out the live demo of this app AB

Apr 20, 2022

A PhotoShot Plugin to get material you colors easily.

material-you 可以快速获取符合 material-you 配色的 PhotoShop 插件。 参考自 Material Theme Builder 安装 初次安装 从 release 中下载压缩包并解压。打开 Photoshop ,运行 文件-脚本-浏览 ,选择安装包中的 安装脚本.js

Jun 17, 2022

Beautiful and accessible drag and drop for lists with React

Beautiful and accessible drag and drop for lists with React

react-beautiful-dnd (rbd) Beautiful and accessible drag and drop for lists with React Play with this example if you want! Core characteristics Beautif

Jan 7, 2023

Accessible modal dialog component for React

react-modal Accessible modal dialog component for React.JS Table of Contents Installation API documentation Examples Demos Installation To install, yo

Jan 1, 2023

An accessible dropdown component for use in Ember apps.

ember-a11y-dropdown This is an accessible dropdown that you can use in your Ember app for a menu dropdown. I'm making it so people can stop using the

Feb 10, 2022

A very lightweight and flexible accessible modal dialog script.

A11y Dialog This is a lightweight (1.3Kb) yet flexible script to create accessible dialog windows. Documentation ↗ Demo on CodeSandbox ↗ Features: Clo

Jan 2, 2023

Accessible, unstyled, open-sourced, and fully functional react component library for building design systems

DORAI UI Accessible, unstyled, open-sourced and fully functional react component library for building design systems Documentation site coming soon St

Dec 30, 2022

A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Materi

Dec 30, 2022

Wall Covering Calculator and Material Procurement Portal

Wall Covering Calculator and Material Procurement Portal

Wall-Pro MPP --Wall Covering Calculator and Material Procurement Portal-- Table of Contents: Links Description UserStory DevelopmentTeam Installation

Jul 7, 2021
Comments
  • What style of demos/docs do you want?

    What style of demos/docs do you want?

    When I am writing demos/docs, I find that there are so many contents repeat, so I want to know your point - what style of demos/docs do you want?

    • The style like material-web-entity, mui, vuetify
    • The style of single page demos/docs.
    |----------|-----------------------|----------|
    |          |Header                 |Table of  |
    |Sidebar   |Content                |contents  |
    |          |                       |          |
    |----------|-----------------------|----------|
    
    /demos/
     - buttons.html
     - chips.html
     - index.html
     - ...
    

    1 or 2?

    (This issue has no Chinese because there are no Chinese IME in my computer now, sorry)

    opened by huge-pancake 0
Owner
HugePancake
a carbon-based organism :P
HugePancake
Material Design Web Components

Material Web IMPORTANT: Material Web is a work in progress and subject to major changes until 1.0 release. Material Web is Google’s UI toolkit for bui

Material Components 4.6k Dec 31, 2022
A component library based on Material Design 3 & Web Components

material-web-entity Material Web Entity A component library based on Material Design & Web Components Go to link to see what components this library s

HugePancake 5 Jun 3, 2022
⚡️ Simple, Modular & Accessible UI Components for your React Applications

Build Accessible React Apps with Speed ⚡️ Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to

Chakra UI 30.5k Jan 4, 2023
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️

A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list Examples available here: http://claude

Claudéric Demers 10.3k Jan 2, 2023
The CryptoVerse is a Cryptocurrency web application developed using Reactjs for providing the latest updates, value statistics, market cap, supply and news regarding the Cryptocurrency market.

CryptoVerse - A Crptocurrency Web Application Getting Started with Create React App This project was bootstrapped with Create React App. Available Scr

Eesha Srivastava 5 Oct 26, 2022
A set of React components implementing Google's Material Design specification with the power of CSS Modules

React Toolbox is a set of React components that implement Google's Material Design specification. It's powered by CSS Modules and harmoniously integra

React Toolbox 8.7k Dec 30, 2022
Further split the React Native code based on Metro build to improve performance, providing `Dll` and `Dynamic Imports` features

React-Native Code Splitting Further split the React Native code based on Metro build to improve performance, providing Dll and Dynamic Imports feature

Wuba 126 Dec 29, 2022
Recipe providing mobile app, User selects ingredients in pantry and is then provided recipes for those ingredients. App contains a signup/login, meal planner and grocery list pages.

Recipog Student Information Name Connor de Bruyn Username Destiro Assignment SWEN325 A2 Description “Recipog” is a recipe providing app that allows th

Connor de Bruyn 1 Dec 26, 2021
A npm package to increase the developer experience and consistency by providing a set of hooks that can be opted-in the development lifecycle.

@jeliasson/husky-hooks This npm package aims to increase the developer experience and consistency by providing a set of hooks that can be opted-in the

Johan Eliasson 8 Dec 6, 2022
Utilities library built on top of Next.js providing feature extensions and helpers for common patterns

nextjs-utilites This library provides many helpful utilities for use in Next.js projects. Prerequisites This project requires NodeJS (version 8 or lat

Snehil K 5 Sep 7, 2022