Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/web-padawan/aybolit

Lightweight web components library built with LitElement.
https://github.com/web-padawan/aybolit

bootstrap bulma custom-elements lit-element material web-components webcomponents

Last synced: 3 months ago
JSON representation

Lightweight web components library built with LitElement.

Host: GitHub
URL: https://github.com/web-padawan/aybolit
Owner: web-padawan
License: mit
Archived: true
Created: 2019-01-25T06:29:23.000Z (almost 6 years ago)
Default Branch: master
Last Pushed: 2022-04-19T16:07:58.000Z (over 2 years ago)
Last Synced: 2024-09-26T16:04:49.274Z (3 months ago)
Topics: bootstrap, bulma, custom-elements, lit-element, material, web-components, webcomponents
Language: JavaScript
Homepage: https://web-padawan.github.io/aybolit/
Size: 1.76 MB
Stars: 102
Watchers: 10
Forks: 15
Open Issues: 10
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Aybolit

Aybolit is a lightweight, standards-based, framework agnostic UI components library built with [LitElement](https://github.com/Polymer/lit-element).

> *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 ↗](https://web-padawan.github.io/aybolit/)

[![CircleCI](https://img.shields.io/circleci/project/github/web-padawan/aybolit.svg?style=flat-square)](https://circleci.com/gh/web-padawan/aybolit)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

## Overview

Aybolit is based on the modern web standards: [Custom Elements](https://caniuse.com/#feat=custom-elementsv1), [Shadow DOM](https://caniuse.com/#feat=shadowdomv1) and [CSS Custom Properties](https://caniuse.com/#feat=css-variables). 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:

- [`@aybolit/core`](https://github.com/web-padawan/aybolit/tree/master/packages/core) - components base classes with "normalized" styles.

- [`@aybolit/bootstrap`](https://github.com/web-padawan/aybolit/tree/master/packages/bootstrap) - set of components inspired by [Bootstrap](https://getbootstrap.com) framework.

- [`@aybolit/bulma`](https://github.com/web-padawan/aybolit/tree/master/packages/bulma) - set of components inspired by [Bulma](https://bulma.io) CSS framework.

- [`@aybolit/material`](https://github.com/web-padawan/aybolit/tree/master/packages/material) - set of components inspired by [Material Design](https://material.io).

- [`@aybolit/white-label`](https://github.com/web-padawan/aybolit/tree/master/packages/white-label) - set of components with bare minimum of styles.

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:

- Twitter [@serhiikulykov](https://twitter.com/serhiikulykov)
- Polymer Project Slack [@web-padawan](https://polymer.slack.com/team/U0XBXC79U/)
- or [submit an issue](https://github.com/web-padawan/aybolit/issues)