loading...

Announcing Aybolit: lightweight web components library built with LitElement

webpadawan profile image Serhii Kulykov Updated on ・1 min read

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

Posted on by:

webpadawan profile

Serhii Kulykov

@webpadawan

JavaScript developer and open source enthusiast, building Web Components at Vaadin (previously at OWOX).

Discussion

pic
Editor guide