andreasbm / weightless

High-quality web components with a small footprint

High-quality Web Components with a small footprint
_{Thank you so much for showing interest in this project! If you want to help us feed our Octocat you should definitely become a stargazer. These web components are built to be used. They are lightweight, have a simple API and are easy to extend and compose. Go here to see a demo https://weightless.dev/elements.}

• High-quality: Centered around the best practices.
• Testable: Hundreds of test-cases makes sure the library is stable.
• Easy-to-use: But with a simple and understandable API.
• Accessible: All components has been build with accessibility in mind.
• Single-responsibility: Each component does one thing really well. This makes them really easy to extend and compose.

➤ Table of Contents

• ➤ Demo
• ➤ Installation
• ➤ Elements
• ➤ Roadmap
• ➤ Contributing guide
• ➤ Contributors
• ➤ License

➤ Demo

Go here to try the demo.

➤ Installation

$ npm i weightless

If you want to get started super quickly you can use the CLI.

$ npm init web-config new my-project --lit

If you prefer to use the umd bundle you can import https://unpkg.com/weightless/umd/weightless.min.js. Keep in mind that this imports all elements, so it is recommended that you only use it for test purposes.

<script src="https://unpkg.com/weightless/umd/weightless.min.js"></script>

➤ Elements

Name	Tag	Description	Documentation	Demo
Backdrop	wl-backdrop	Dark layer to use behind overlayed elements.	Documentation	Demo
Banner	wl-banner	Display a non-interruptive message and related optional actions.	Documentation	Demo
Button	wl-button	Allow users to take actions, and make choices, with a single tap.	Documentation	Demo
Card	wl-card	Group related content and action.	Documentation	Demo
Checkbox	wl-checkbox	Turn an option on or off.	Documentation	Demo
Dialog	wl-dialog	Highly interruptive messages.	Documentation	Demo
Divider	wl-divider	Thin line that groups content in lists and layouts.	Documentation	Demo
Expansion	wl-expansion	Provide an expandable details-summary view.	Documentation	Demo
Icon	wl-icon	Symbols for common actions and items.	Documentation	Demo
Label	wl-label	Make form elements more accessible.	Documentation	Demo
List Item	wl-list-item	Display an item in a list.	Documentation	Demo
Nav	wl-nav	Provide access to destinations in your app.	Documentation	Demo
Popover	wl-popover	Contextual anchored elements	Documentation	Demo
Popover Card	wl-popover-card	Give popovers a contextual flair.	Documentation	Demo
Progress Bar	wl-progress-bar	Fills a bar from 0% to 100%.	Documentation	Demo
Progress Spinner	wl-progress-spinner	Fills a circle from 0% to 100%.	Documentation	Demo
Radio	wl-radio	Select one option from a set.	Documentation	Demo
Ripple	wl-ripple	Indicate touch actions.	Documentation	Demo
Select	wl-select	Select one or more values from a set of options.	Documentation	Demo
Slider	wl-slider	Make selections from a range of values.	Documentation	Demo
Snackbar	wl-snackbar	Provide brief messages at the bottom of the screen.	Documentation	Demo
Switch	wl-switch	Turn an option on or off.	Documentation	Demo
Tab	wl-tab	Organize navigation between groups of content.	Documentation	Demo
Tab Group	wl-tab-group	Organize navigation between groups of content.	Documentation	Demo
Text	wl-text	Group text into paragraphs.	Documentation	Demo
Textarea	wl-textarea	Multiline text fields.	Documentation	Demo
Textfield	wl-textfield	Singleline text fields.	Documentation	Demo
Title	wl-title	Indicate the start of a new section.	Documentation	Demo
Tooltip	wl-tooltip	Informative context related text.	Documentation	Demo

➤ Roadmap

There's lots of exciting things on the roadmap. Until v1.0.0 you can expect the API to be fairly stable but refactoring might still happen and break the backwards compatibility. You are very welcome to use the library, create pull requests or add issues.

➤ Contributing guide

You are more than welcome to contribute to this repository! Below are some instructions on how to setup the project for development.

1. Clone this repository by running git clone https://github.com/andreasbm/weightless.git.
2. Run npm i to install all dependencies.
3. Spin up the development server with npm run s. The browser should automatically be opened at the correct url. If not, you can open your browser and go to http://localhost:1350.
4. Run tests with npm run test.
5. Lint the files with npm run lint.
6. Compile the documentation by running npm run docs.

The elements are written in Typescript and the stylesheets are written in SASS. All of the web components uses lit-element.

If you want to know more about how you can help you should definitely check out the CONTRIBUTING.md file. All contributors will be added to the contributors section below.

➤ Contributors

Andreas Mehlsen	You?

➤ License

Licensed under MIT.