{"id":13417785,"url":"https://github.com/andreasbm/weightless","last_synced_at":"2025-03-31T04:04:07.597Z","repository":{"id":41765531,"uuid":"169870302","full_name":"andreasbm/weightless","owner":"andreasbm","description":"High-quality web components with a small footprint","archived":false,"fork":false,"pushed_at":"2024-09-12T08:40:46.000Z","size":16509,"stargazers_count":380,"open_issues_count":53,"forks_count":33,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-03-24T03:03:14.874Z","etag":null,"topics":["components","custom-elements","elements","lit-element","lit-html","lit-html-element","ui","ui-library","web-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andreasbm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-09T13:34:24.000Z","updated_at":"2025-02-27T07:01:31.000Z","dependencies_parsed_at":"2024-11-20T19:02:35.640Z","dependency_job_id":"63b8906a-0a12-4a48-a032-c07bfa0993a5","html_url":"https://github.com/andreasbm/weightless","commit_stats":{"total_commits":358,"total_committers":4,"mean_commits":89.5,"dds":"0.011173184357541888","last_synced_commit":"d236c67242d2197d7922b374a55cdbd2b592fa37"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fweightless","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fweightless/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fweightless/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fweightless/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andreasbm","download_url":"https://codeload.github.com/andreasbm/weightless/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246264995,"owners_count":20749575,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","custom-elements","elements","lit-element","lit-html","lit-html-element","ui","ui-library","web-components"],"created_at":"2024-07-30T22:00:52.626Z","updated_at":"2025-03-31T04:04:07.573Z","avatar_url":"https://github.com/andreasbm.png","language":"TypeScript","readme":"*This project has reached the end of its development. Feel free to browse the code.*\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003cimg src=\"https://raw.githubusercontent.com/andreasbm/elements/master/assets/brand/logo-text-dark.png\" alt=\"Logo\" width=\"400\" height=\"auto\" /\u003e\r\n\u003c/p\u003e\r\n\u003cp align=\"center\"\u003e\r\n\t\t\u003ca href=\"https://npmcharts.com/compare/weightless?minimal=true\"\u003e\u003cimg alt=\"Downloads per month\" src=\"https://img.shields.io/npm/dm/weightless.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://www.npmjs.com/package/weightless\"\u003e\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/weightless.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://david-dm.org/andreasbm/weightless\"\u003e\u003cimg alt=\"Dependencies\" src=\"https://img.shields.io/david/andreasbm/weightless.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://github.com/andreasbm/weightless/graphs/contributors\"\u003e\u003cimg alt=\"Contributors\" src=\"https://img.shields.io/github/contributors/andreasbm/weightless.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://www.webcomponents.org/element/weightless\"\u003e\u003cimg alt=\"Published on webcomponents.org\" src=\"https://img.shields.io/badge/webcomponents.org-published-blue.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\t\u003c/p\u003e\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003cb\u003eHigh-quality Web Components with a small footprint\u003c/b\u003e\u003c/br\u003e\r\n  \u003csub\u003eThank you so much for showing interest in this project! If you want to help us feed our Octocat you should definitely become a \u003ca href='https://github.com/andreasbm/weightless/stargazers' target='_blank'\u003estargazer\u003c/a\u003e. 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 \u003ca href=\"https://weightless.dev/elements\"\u003ehttps://weightless.dev/elements\u003c/a\u003e.\u003csub\u003e\r\n\u003c/p\u003e\r\n\r\n\u003cbr /\u003e\r\n\r\n* **High-quality:** Centered around the best practices.\r\n* **Testable:** Hundreds of test-cases makes sure the library is stable.\r\n* **Easy-to-use:** But with a simple and understandable API.\r\n* **Accessible:** All components has been build with accessibility in mind.\r\n* **Single-responsibility:** Each component does one thing really well. This makes them really easy to extend and compose.\r\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#table-of-contents)\r\n\r\n## ➤ Table of Contents\r\n\r\n* [➤ Demo](#-demo)\r\n* [➤ Installation](#-installation)\r\n* [➤ Elements](#-elements)\r\n* [➤ Roadmap](#-roadmap)\r\n* [➤ Contributing guide](#-contributing-guide)\r\n* [➤ Contributors](#-contributors)\r\n* [➤ License](#-license)\r\n\r\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#demo)\r\n\r\n## ➤ Demo\r\n\r\nGo [here](https://weightless.dev/elements) to try the demo.\r\n\r\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#installation)\r\n\r\n## ➤ Installation\r\n\r\n```\r\n$ npm i weightless\r\n```\r\n\r\nIf you want to get started super quickly you can use the CLI.\r\n\r\n```\r\n$ npm init web-config new my-project --lit\r\n```\r\n\r\nIf 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.\r\n\r\n```html\r\n\u003cscript src=\"https://unpkg.com/weightless/umd/weightless.min.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#elements)\r\n\r\n## ➤ Elements\r\n\r\n\r\n| Name             | Tag                   | Description                                      | Documentation                              | Demo                                             |\r\n|------------------|-----------------------|--------------------------------------------------|--------------------------------------------|--------------------------------------------------|\r\n| Backdrop         | `wl-backdrop`         | Dark layer to use behind overlayed elements.     | [Documentation](/src/lib/backdrop)         | [Demo](https://weightless.dev/elements/dialog)   |\r\n| Banner           | `wl-banner`           | Display a non-interruptive message and related optional actions. | [Documentation](/src/lib/banner)           | [Demo](https://weightless.dev/elements/banner)   |\r\n| Button           | `wl-button`           | Allow users to take actions, and make choices, with a single tap. | [Documentation](/src/lib/button)           | [Demo](https://weightless.dev/elements/button)   |\r\n| Card             | `wl-card`             | Group related content and action.                | [Documentation](/src/lib/card)             | [Demo](https://weightless.dev/elements/card)     |\r\n| Checkbox         | `wl-checkbox`         | Turn an option on or off.                        | [Documentation](/src/lib/checkbox)         | [Demo](https://weightless.dev/elements/checkbox) |\r\n| Dialog           | `wl-dialog`           | Highly interruptive messages.                    | [Documentation](/src/lib/dialog)           | [Demo](https://weightless.dev/elements/dialog)   |\r\n| Divider          | `wl-divider`          | Thin line that groups content in lists and layouts. | [Documentation](/src/lib/divider)          | [Demo](https://weightless.dev/elements/divider)  |\r\n| Expansion        | `wl-expansion`        | Provide an expandable details-summary view.      | [Documentation](/src/lib/expansion)        | [Demo](https://weightless.dev/elements/expansion) |\r\n| Icon             | `wl-icon`             | Symbols for common actions and items.            | [Documentation](/src/lib/icon)             | [Demo](https://weightless.dev/elements/icon)     |\r\n| Label            | `wl-label`            | Make form elements more accessible.              | [Documentation](/src/lib/label)            | [Demo](https://weightless.dev/elements/label)    |\r\n| List Item        | `wl-list-item`        | Display an item in a list.                       | [Documentation](/src/lib/list-item)        | [Demo](https://weightless.dev/elements/list-item) |\r\n| Nav              | `wl-nav`              | Provide access to destinations in your app.      | [Documentation](/src/lib/nav)              | [Demo](https://weightless.dev/elements/nav)      |\r\n| Popover          | `wl-popover`          | Contextual anchored elements                     | [Documentation](/src/lib/popover)          | [Demo](https://weightless.dev/elements/popover)  |\r\n| Popover Card     | `wl-popover-card`     | Give popovers a contextual flair.                | [Documentation](/src/lib/popover-card)     | [Demo](https://weightless.dev/elements/popover)  |\r\n| Progress Bar     | `wl-progress-bar`     | Fills a bar from 0% to 100%.                     | [Documentation](/src/lib/progress-bar)     | [Demo](https://weightless.dev/elements/progress-bar) |\r\n| Progress Spinner | `wl-progress-spinner` | Fills a circle from 0% to 100%.                  | [Documentation](/src/lib/progress-spinner) | [Demo](https://weightless.dev/elements/progress-spinner) |\r\n| Radio            | `wl-radio`            | Select one option from a set.                    | [Documentation](/src/lib/radio)            | [Demo](https://weightless.dev/elements/radio)    |\r\n| Ripple           | `wl-ripple`           | Indicate touch actions.                          | [Documentation](/src/lib/ripple)           | [Demo](https://weightless.dev/elements/ripple)   |\r\n| Select           | `wl-select`           | Select one or more values from a set of options. | [Documentation](/src/lib/select)           | [Demo](https://weightless.dev/elements/select)   |\r\n| Slider           | `wl-slider`           | Make selections from a range of values.          | [Documentation](/src/lib/slider)           | [Demo](https://weightless.dev/elements/slider)   |\r\n| Snackbar         | `wl-snackbar`         | Provide brief messages at the bottom of the screen. | [Documentation](/src/lib/snackbar)         | [Demo](https://weightless.dev/elements/snackbar) |\r\n| Switch           | `wl-switch`           | Turn an option on or off.                        | [Documentation](/src/lib/switch)           | [Demo](https://weightless.dev/elements/switch)   |\r\n| Tab              | `wl-tab`              | Organize navigation between groups of content.   | [Documentation](/src/lib/tab)              | [Demo](https://weightless.dev/elements/tabs)     |\r\n| Tab Group        | `wl-tab-group`        | Organize navigation between groups of content.   | [Documentation](/src/lib/tab-group)        | [Demo](https://weightless.dev/elements/tabs)     |\r\n| Text             | `wl-text`             | Group text into paragraphs.                      | [Documentation](/src/lib/text)             | [Demo](https://weightless.dev/elements/text)     |\r\n| Textarea         | `wl-textarea`         | Multiline text fields.                           | [Documentation](/src/lib/text)             | [Demo](https://weightless.dev/elements/text)     |\r\n| Textfield        | `wl-textfield`        | Singleline text fields.                          | [Documentation](/src/lib/textfield)        | [Demo](https://weightless.dev/elements/textfield) |\r\n| Title            | `wl-title`            | Indicate the start of a new section.             | [Documentation](/src/lib/title)            | [Demo](https://weightless.dev/elements/title)    |\r\n| Tooltip          | `wl-tooltip`          | Informative context related text.                | [Documentation](/src/lib/tooltip)          | [Demo](https://weightless.dev/elements/tooltip)  |\r\n\r\n\r\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#roadmap)\r\n\r\n## ➤ Roadmap\r\n\r\nThere'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.\r\n\r\n\r\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#contributing-guide)\r\n\r\n## ➤ Contributing guide\r\n\r\nYou are more than welcome to contribute to this repository! Below are some instructions on how to setup the project for development.\r\n\r\n1. Clone this repository by running `git clone https://github.com/andreasbm/weightless.git`.\r\n2. Run `npm i` to install all dependencies.\r\n3. 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`.\r\n4. Run tests with `npm run test`.\r\n5. Lint the files with `npm run lint`.\r\n6. Compile the documentation by running `npm run docs`.\r\n\r\nThe elements are written in [Typescript](https://www.typescriptlang.org/) and the stylesheets are written in [SASS](https://sass-lang.com/). All of the web components uses [lit-element](https://lit-element.polymer-project.org/).\r\n\r\nIf you want to know more about how you can help you should definitely check out the [CONTRIBUTING.md](/CONTRIBUTING.md) file. All contributors will be added to the contributors section below.\r\n\r\n\r\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#contributors)\r\n\r\n## ➤ Contributors\r\n\t\r\n\r\n| [\u003cimg alt=\"Andreas Mehlsen\" src=\"https://avatars1.githubusercontent.com/u/6267397?s=460\u0026v=4\" width=\"100\"\u003e](https://twitter.com/andreasmehlsen) | [\u003cimg alt=\"You?\" src=\"https://joeschmoe.io/api/v1/random\" width=\"100\"\u003e](https://github.com/andreasbm/weightless/blob/master/CONTRIBUTING.md) |\r\n|:--------------------------------------------------:|:--------------------------------------------------:|\r\n| [Andreas Mehlsen](https://twitter.com/andreasmehlsen) | [You?](https://github.com/andreasbm/weightless/blob/master/CONTRIBUTING.md) |\r\n\r\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#license)\r\n\r\n## ➤ License\r\n\t\r\nLicensed under [MIT](https://opensource.org/licenses/MIT).\r\n","funding_links":[],"categories":["LitElement Components","TypeScript","CSS/UI Templates"],"sub_categories":["Serious CSS Frameworks"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreasbm%2Fweightless","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandreasbm%2Fweightless","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreasbm%2Fweightless/lists"}