Skip to content
Lightweight web components library built with LitElement.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci chore(ci): add worfklow to check generated dist Mar 23, 2019
packages feat(core): add item-mixin Jun 3, 2019
scripts chore: improve sass-render and watch scripts (#18) Apr 10, 2019
test test: setup visual tests, add bootstrap test suite Mar 20, 2019
.editorconfig chore: setup eclint to check .editorconfig (#34) May 27, 2019
.eslintrc chore: improve sass-render and watch scripts (#18) Apr 10, 2019
.gitignore test: setup visual tests, add bootstrap test suite Mar 20, 2019
.prettierrc chore: setup eslint and prettier Feb 1, 2019
.stylelintrc chore: disable stylelint operator newline check Feb 28, 2019
LICENSE chore: setup project with lerna, add styling build script Jan 25, 2019
README.md chore(readme): add circleci and prettier badges Mar 14, 2019
babel.config.js test: setup visual tests, add bootstrap test suite Mar 20, 2019
docker-compose.yml test: setup visual tests, add bootstrap test suite Mar 20, 2019
karma.conf.js
lerna.json v0.1.0 Mar 12, 2019
package.json chore: simplify eclint script files glob May 30, 2019
yarn.lock chore: setup eclint to check .editorconfig (#34) May 27, 2019

README.md

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:

You can’t perform that action at this time.