DEV Community 👩‍💻👨‍💻

Serhii Kulykov
Serhii Kulykov

Posted on • Updated on

Announcing Aybolit: lightweight web components library built with LitElement

Yesterday, I released a 0.1.0 version of Aybolit, the pet project I've been working on lately. In two words, it is about writing web components and finding "the common denominator" between popular CSS frameworks.

The problems Aybolit aims to solve are: granular DOM structure with Custom Elements, scoped CSS thanks to Shadow DOM, and flexible theming API with custom CSS properties and calc(). It also leverages the benefit of Constructible Stylesheets landing in Chrome, as the support for it is already integrated into LitElelment.

The initial release 0.1.0 only includes 5 components: button, checkbox, progress, range and switch (more to come soon). At the same time, it provides Bootstrap, Bulma and Material versions for all of those, plus "White Label" variant with bare minimum of styles, easy to override.

I appreciate any feedback and would like to make Aybolit better with the help of community. It's almost 3 years now since I started making first steps with Polymer, and I put all my experience and enthusiasm into this project.

Check it live: https://web-padawan.github.io/aybolit/

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

Top comments (0)

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!