Giter VIP home page Giter VIP logo

generic-components's Introduction

generic-components

A collection of generic web components with a focus on:

  • ๐Ÿšน Accessibility
  • ๐Ÿ— Easy to use
  • ๐ŸŽจ Easy to style

Goal

The goal of this project is to create a common library of generic web components, that are accessible, framework agnostic, easy to style, and easy to consume.

All components in these repo extend from HTMLElement and dont use any libraries or framework.

You can think of these components like using a native <button> element, you get all the functionality, and accessibility, keyboard navigation, etc., for free, you just have to style the button to your liking.

You can use these components to build an app, or compose them and build your own components with them.

Usage

Via NPM

Components can be installed via NPM:

npm i --save @generic-components/components

And imported in your code via ES imports:

import '@generic-components/components/switch.js';

Via CDN

Alternatively you can load the components from a CDN and drop them in your HTML file as a script tag

<script src="https://unpkg.com/@generic-components/components@latest/switch.js" type="module"></script>
<generic-switch></generic-switch>

Collection

Component Demo Spec Status
generic-accordion demo WAI-ARIA Practices โœ…
generic-alert demo WAI-ARIA Practices โœ…
generic-dialog demo WAI-ARIA Practices โœ…
generic-disclosure demo WAI-ARIA Practices โœ…
generic-listbox demo WAI-ARIA Practices โœ…
generic-radio demo WAI-ARIA Practices โœ…
generic-skiplink demo WebAIM โœ…
generic-spinner demo โœ…
generic-switch demo WAI-ARIA Practices โœ…
generic-tabs demo WAI-ARIA Practices โœ…
generic-visually-hidden demo WebAIM โœ…

generic-components's People

Contributors

thepassle avatar dependabot[bot] avatar davatron5000 avatar danny-andrews avatar lamplightdev avatar jorgecasar avatar kimblim avatar malvoz avatar trystan2k avatar dakmor avatar lgk-bsw avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.