Awesome

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 ↗

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:

• @aybolit/core - components base classes with "normalized" styles.

• @aybolit/bootstrap - set of components inspired by Bootstrap framework.

• @aybolit/bulma - set of components inspired by Bulma CSS framework.

• @aybolit/material - set of components inspired by Material Design.

• @aybolit/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
• Polymer Project Slack @web-padawan
• or submit an issue