GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → web-padawan → Aybolit

web-padawan / Aybolit

Licence: mit
Lightweight web components library built with LitElement.

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

bootstrapmaterialweb-componentswebcomponentsbulmacustom-elements

Projects that are alternatives of or similar to Aybolit

Blazorise
Blazorise is a component library built on top of Blazor with support for CSS frameworks like Bootstrap, Bulma, AntDesign, and Material.
Stars: ✭ 2,103 (+2236.67%)
Mutual labels:  material, bootstrap, bulma
modulor-html
Missing template engine for Web Components
Stars: ✭ 36 (-60%)
Mutual labels:  webcomponents, web-components, custom-elements
web-components
A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
Stars: ✭ 322 (+257.78%)
Mutual labels:  webcomponents, web-components, custom-elements
Omi
Front End Cross-Frameworks Framework - 前端跨框架跨平台框架
Stars: ✭ 12,153 (+13403.33%)
Mutual labels:  web-components, webcomponents, custom-elements
cwco
Powerful and Fast Web Component Library with a Simple API
Stars: ✭ 27 (-70%)
Mutual labels:  webcomponents, web-components, custom-elements
Smart Webcomponents
Web Components & Custom Elements for Professional Web Applications
Stars: ✭ 110 (+22.22%)
Mutual labels:  material, web-components, webcomponents
symbiote.js
Simple, light and very powerful library to create embedded components for any purpose, with a data flow management included.
Stars: ✭ 40 (-55.56%)
Mutual labels:  webcomponents, web-components, custom-elements
smart-webcomponents-community
Material & Bootstrap Web Components built with Smart
Stars: ✭ 30 (-66.67%)
Mutual labels:  webcomponents, 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 (-76.67%)
Mutual labels:  webcomponents, web-components, custom-elements
lit-components
Moved to https://github.com/vaadin/component-mixins
Stars: ✭ 59 (-34.44%)
Mutual labels:  webcomponents, web-components, custom-elements
Nutmeg
Build, test, and publish vanilla Web Components with a little spice
Stars: ✭ 111 (+23.33%)
Mutual labels:  web-components, webcomponents, custom-elements
anywhere-webcomponents
A UI work in progress based on custom elements (web components) for use in anywhere.
Stars: ✭ 17 (-81.11%)
Mutual labels:  webcomponents, web-components, custom-elements
Vanilla Hamburger
Animated hamburger menu icons for modern web apps (1.8 KB) 🍔
Stars: ✭ 110 (+22.22%)
Mutual labels:  web-components, webcomponents, custom-elements
Bootstrap Table
An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)
Stars: ✭ 11,068 (+12197.78%)
Mutual labels:  material, bootstrap, bulma
lego
🚀 Web-components made lightweight & Future-Proof.
Stars: ✭ 69 (-23.33%)
Mutual labels:  webcomponents, web-components, custom-elements
custom-elements-manifest
Custom Elements Manifest is a file format that describes custom elements in your project.
Stars: ✭ 81 (-10%)
Mutual labels:  webcomponents, web-components, custom-elements
Vanilla Colorful
A tiny color picker custom element for modern web apps (2.7 KB) 🎨
Stars: ✭ 467 (+418.89%)
Mutual labels:  web-components, webcomponents, custom-elements
Custom Elements Ts
Create native custom elements using Typescript
Stars: ✭ 52 (-42.22%)
Mutual labels:  web-components, custom-elements
Blazor.fast
A tiny wrapper around Fast and Fluent Web Components to integrate with Blazor and easily use the EditForm components
Stars: ✭ 23 (-74.44%)
Mutual labels:  web-components, webcomponents
Starter Kit
📦 Angular 11+ starter kit for enterprise-grade projects
Stars: ✭ 1,102 (+1124.44%)
Mutual labels:  material, bootstrap
View All Similar Projects ➔

Aybolit

Aybolit is a lightweight, standards-based, framework agnostic UI components library built with LitElement.

Aybolit is a fictional character from the children's poems by Korney Chukovsky. He is a traveling doctor who treats animals for free, regardless of their injuries. The name may be translated as "Ouch, [it] hurts!"

Live Demo ↗

CircleCI code style: prettier

Overview

Aybolit is based on the modern web standards: Custom Elements, Shadow DOM and CSS Custom Properties. Using these parts of the web platform allows Aybolit to easily solve several common problems which have been around for years:

  1. Proper style scoping and zero global CSS! With Aybolit you are safe to use any CSS class name in your project, and never get any side effects. Forget about the evil hacks like using !important to override 3rd party CSS specificity.

  2. Granular DOM structure. You no longer have to place HTML elements in the specific order to satisfy CSS selectors like input ~ label - these are now implementation detail. The resulting markup is cleaner, easier to read and maintain.

  3. Flexible theming API: custom CSS properties and calc() allow to dynamically change colors at any part of the cascade, and make it possible to auto-adjust level of contrast for elements like buttons and checkboxes.

The mission of Aybolit is to let developers stop reinventing the wheel, and ensure a painless developer experience. Aybolit starts with the basics and provides a few primitive UI components, laying the groundwork for a lot more in future.

Project Structure

Aybolit project is a monorepo and contains the following npm packages:

Check the README of each individual package for more details.

Supported Browsers

Chrome, Firefox 64+ and Safari 11+ are targeted browsers. They all support Custom Elements, Shadow DOM, custom CSS properties and ES modules, and do not need any polyfills.

Any up-to-date Chromium-based browsers, like Samsung Internet, Opera, Vivaldi, Brave, Yandex Browser and many others, are supported too. Microsoft Edge will hopefully join this group later this year.

Internet Explorer is not officially supported. It is generally possible to make web components work in IE11 using polyfills and Babel, but certain things will not work as expected to say the least.

Contact

If you have questions, feedback or anything to share related to the project, feel free to contact me via:

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