All Projects → andreasbm → Weightless

andreasbm / Weightless

Licence: mit
High-quality web components with a small footprint

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Weightless

cwco
Powerful and Fast Web Component Library with a Simple API
Stars: ✭ 27 (-90.49%)
Mutual labels:  components, web-components, custom-elements
bui
‹b› Web components for creating applications – built by Blackstone Publishing using lit-html and lit-element
Stars: ✭ 29 (-89.79%)
Mutual labels:  web-components, custom-elements, ui-library
anywhere-webcomponents
A UI work in progress based on custom elements (web components) for use in anywhere.
Stars: ✭ 17 (-94.01%)
Mutual labels:  components, web-components, custom-elements
vue-custom-element
Vue Custom Element - Web Components' Custom Elements for Vue.js
Stars: ✭ 1,886 (+564.08%)
Mutual labels:  web-components, custom-elements
Switzerland
🇨🇭Switzerland takes a functional approach to Web Components by applying middleware to your components. Supports Redux, attribute mutations, CSS variables, React-esque setState/state, etc… out-of-the-box, along with Shadow DOM for style encapsulation and Custom Elements for interoperability.
Stars: ✭ 261 (-8.1%)
Mutual labels:  components, custom-elements
typing-effect-element
A custom element that shows text as if it were being typed
Stars: ✭ 81 (-71.48%)
Mutual labels:  web-components, custom-elements
nativeweb
🤳 Tiny library for simple web components. [1kB]
Stars: ✭ 93 (-67.25%)
Mutual labels:  components, web-components
ascii-image
Web Component that displays an image as ASCII art
Stars: ✭ 15 (-94.72%)
Mutual labels:  web-components, custom-elements
custom-element-boilerplate
Boilerplate for creating a custom element.
Stars: ✭ 137 (-51.76%)
Mutual labels:  web-components, custom-elements
custom-elements-manifest
Custom Elements Manifest is a file format that describes custom elements in your project.
Stars: ✭ 81 (-71.48%)
Mutual labels:  web-components, custom-elements
svelte-webcomponents
A ready-to-use project template to build custom elements (web components) with Svelte 3 with support and examples for web components, jest, sass, nested components with props, eslinting, stylelinting, Github actions, propagating custom events from shadow-DOM to real-DOM etc.
Stars: ✭ 22 (-92.25%)
Mutual labels:  web-components, custom-elements
toggle-icon
toggle-icon is a custom element created with Polymer. It provides an extremely powerful and customizable switch that looks like a paper-icon-button.
Stars: ✭ 21 (-92.61%)
Mutual labels:  web-components, custom-elements
fast-blazor
Blazor component library for FluentUI. Microsoft's official lightweight wrapper around the FluentUI Web Components for use with .NET 6.0 Blazor applications
Stars: ✭ 928 (+226.76%)
Mutual labels:  components, web-components
zephjs
ZephJS is an easy, understandable, and ultra-light framework for defining and using Web Components.
Stars: ✭ 46 (-83.8%)
Mutual labels:  components, web-components
react-vant
React mobile UI Components base on Vant
Stars: ✭ 627 (+120.77%)
Mutual labels:  components, ui-library
elements
Lovingly crafted ui components based on web components. Works well with all Frameworks - including Angular, React and Vue.
Stars: ✭ 42 (-85.21%)
Mutual labels:  components, web-components
storify
Instagram/Whatsapp stories clone built on Web Components and Web Animations API. 🔥
Stars: ✭ 64 (-77.46%)
Mutual labels:  web-components, custom-elements
taroify
Taroify 是移动端组件库 Vant 的 Taro 版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。
Stars: ✭ 420 (+47.89%)
Mutual labels:  components, ui-library
inclusive-elements
Accessible, lightweight, unstyled implementations of common UI controls.
Stars: ✭ 17 (-94.01%)
Mutual labels:  web-components, custom-elements
uce-template
A Vue 3 inspired Custom Elements toolless alternative.
Stars: ✭ 96 (-66.2%)
Mutual labels:  components, web-components

Logo

Downloads per month NPM Version Dependencies Contributors Published on webcomponents.org

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

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?
Andreas Mehlsen You?

-----------------------------------------------------

➤ License

Licensed under MIT.

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].