Lightweight web components library built with LitElement.

Last update: Dec 21, 2022

Overview

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:

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.
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.
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

Comments

Why custom scripts and not webpack for building styles?

Currently the npm run watch takes at least 1 second with minimal setup and only on package. So my questions is why custom scripts runner?

yarn run v1.12.3
$ ./scripts/build-styling.sh
Processing packages/core/scss/switch-base.scss
Processing packages/core/scss/button-base.scss
Processing packages/core/scss/range-base.scss
Processing packages/core/scss/progress-base.scss
Processing packages/core/scss/checkbox-base.scss
Done in 1.18s.

watcher build complete!

help wanted

opened by chanar 15

Performance issue fix

Found out that the performance issue was caused by looping through files in the bash scripts. Instead, the files from the provided path will be looped inside js.

Also, changed watch script to compile the changed file directly.

opened by chanar 11
Restructured packages and using different sass-render
Quick overview of changes I have done:

No usage of scripts folder, instead using https://www.npmjs.com/package/wc-sass-render

Moved package//scss contents to package//src/components/styles

Added webpack config from your lit-components folder

Demo folder for running components in html

Added new commands

"bootstrap": "lerna bootstrap", "start:watch": "sass-render ./packages/*/src/components/styles/*.scss -w -t sass-template.tmpl", "start:dev": "webpack-dev-server --open", "start:storybook": "start-storybook -p 6006", "start": "npm-run-all --parallel start:*"

Removed picka (I was unable to npm run dist as pack was not recognized even after globally installing it. Didn't have any instructions either).

Compilations are now super fast, support running in dev sever and builds.

So first install wc-sass-render globally yarn global add wc-sass-render and then npm run bootstrap
opened by chanar 9
Autoprefixer

Heya. With https://github.com/postcss/autoprefixer I wonder if a PostCSS build stack would make sense to strive towards, after all.

@web-padawan do you have any objections to Autoprefixer in general?

What about PostCSS? (while still keeping dart-sass central, as currently is, at least for now)

opened by lkraav 5
Including scss mixins

With aybolit setup, where should I include scss mixins/variables that are being used throughout multiple packages?

Before I used sass-resources-loader in webpack to load the mixins to all scss included.

opened by chanar 3
Using different file and setup structure for packages
Currently, the lit components are compiled with storybook webpack configuration. In case I would like to run webpack-serve from the current lit element project (that I will bring over to packages/my-lit-project), where should I do it? Do you recommend creating custom commands to root level package.json? Also what about production builds. Would you build them in /dist/package/package-name/bundle.js or /packages/package-name/dist/?

Do you have specific recommendations to follow on package file structure. For example my project currently looks something like this like this:

/src/components/component-name.js /src/components/component-name.scss /src/theme/vaadin/vaadin-button.js /src/theme/vaadin/vaadin-button.scss /src/redux/ /templates/file.html (that put together initial component setups) webpack-configs.js netlify.toml babel.config.js
opened by chanar 3
chore: remove orphan webpack.common.js, fixup 01df30c

When bennyp asked on Polymer Slack "Do you have another webpack config at play?" https://polymer.slack.com/archives/C03PF4L4L/p1573397539207100?thread_ts=1573317952.153300&cid=C03PF4L4L

opened by lkraav 2
docs: prevent flash of unstyled content (FOUC)
https://developers.google.com/web/fundamentals/web-components/customelements#prestyle presents a solid strategy that works.

In reality, it seem like 2 rules are needed, for something like a layout component:

vaadin-app-layout:not(:defined) { /* Pre-style, give layout, replicate app-drawer's eventual styles, etc. */ display: block; height: 100vh; opacity: 0; } vaadin-app-layout:defined { transition: opacity 0.1s ease-in-out; }

Even though the example given is for vaadin-app-layout, it's a generic web component upgrade issue, which I didn't know until I experienced it and researched. So wondering if we could add a Documentation note here about it, and present this solution option.

Any better options that you know of, @web-padawan?
opened by lkraav 2
chore(deps-dev): bump karma from 4.1.0 to 6.3.14
Bumps karma from 4.1.0 to 6.3.14.

Release notes

Sourced from karma's releases.

v6.3.14

6.3.14 (2022-02-05)

Bug Fixes

remove string template from client code (91d5acd)

warn when singleRun and autoWatch are false (69cfc76)

security: remove XSS vulnerability in returnUrl query param (839578c)

v6.3.13

6.3.13 (2022-01-31)

Bug Fixes

deps: bump log4js to resolve security issue (5bf2df3), closes #3751

v6.3.12

6.3.12 (2022-01-24)

Bug Fixes

remove depreciation warning from log4js (41bed33)

v6.3.11

6.3.11 (2022-01-13)

Bug Fixes

deps: pin colors package to 1.4.0 due to security vulnerability (a5219c5)

v6.3.10

6.3.10 (2022-01-08)

Bug Fixes

logger: create parent folders if they are missing (0d24bd9), closes #3734

v6.3.9

6.3.9 (2021-11-16)

Bug Fixes

restartOnFileChange option not restarting the test run (92ffe60), closes #27 #3724

... (truncated)

Changelog

Sourced from karma's changelog.

6.3.14 (2022-02-05)

Bug Fixes

remove string template from client code (91d5acd)

warn when singleRun and autoWatch are false (69cfc76)

security: remove XSS vulnerability in returnUrl query param (839578c)

6.3.13 (2022-01-31)

Bug Fixes

deps: bump log4js to resolve security issue (5bf2df3), closes #3751

6.3.12 (2022-01-24)

Bug Fixes

remove depreciation warning from log4js (41bed33)

6.3.11 (2022-01-13)

Bug Fixes

deps: pin colors package to 1.4.0 due to security vulnerability (a5219c5)

6.3.10 (2022-01-08)

Bug Fixes

logger: create parent folders if they are missing (0d24bd9), closes #3734

6.3.9 (2021-11-16)

Bug Fixes

restartOnFileChange option not restarting the test run (92ffe60), closes #27 #3724

6.3.8 (2021-11-07)

Bug Fixes

reporter: warning if stack trace contains generated code invocation (4f23b14)

... (truncated)

Commits

c97e562 chore(release): 6.3.14 [skip ci]

91d5acd fix: remove string template from client code

69cfc76 fix: warn when singleRun and autoWatch are false

839578c fix(security): remove XSS vulnerability in returnUrl query param

db53785 chore(release): 6.3.13 [skip ci]

5bf2df3 fix(deps): bump log4js to resolve security issue

36ad678 chore(release): 6.3.12 [skip ci]

41bed33 fix: remove depreciation warning from log4js

c985155 docs: create security.md

c96f0c5 chore(release): 6.3.11 [skip ci]

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
chore: make `build-styling` cross-platform compatible

Apparently Windows can only successfully build with escaped or no double-quotes.

Linux fails to build with no double-quotes, so only given option remains.

opened by lkraav 1
Add eclint to check files against EditorConfig
See https://github.com/jedmao/eclint

This is how we could use it:

"lint-staged": { "*": [ "eclint fix", "git add" ],
tools
opened by web-padawan 1
chore(deps-dev): bump karma from 4.1.0 to 6.3.16
Bumps karma from 4.1.0 to 6.3.16.

Release notes

Sourced from karma's releases.

v6.3.16

6.3.16 (2022-02-10)

Bug Fixes

security: mitigate the "Open Redirect Vulnerability" (ff7edbb)

v6.3.15

6.3.15 (2022-02-05)

Bug Fixes

helper: make mkdirIfNotExists helper resilient to concurrent calls (d9dade2), closes karma-runner/karma-coverage#434

v6.3.14

6.3.14 (2022-02-05)

Bug Fixes

remove string template from client code (91d5acd)

warn when singleRun and autoWatch are false (69cfc76)

security: remove XSS vulnerability in returnUrl query param (839578c)

v6.3.13

6.3.13 (2022-01-31)

Bug Fixes

deps: bump log4js to resolve security issue (5bf2df3), closes #3751

v6.3.12

6.3.12 (2022-01-24)

Bug Fixes

remove depreciation warning from log4js (41bed33)

v6.3.11

6.3.11 (2022-01-13)

Bug Fixes

deps: pin colors package to 1.4.0 due to security vulnerability (a5219c5)

... (truncated)

Changelog

Sourced from karma's changelog.

6.3.16 (2022-02-10)

Bug Fixes

security: mitigate the "Open Redirect Vulnerability" (ff7edbb)

6.3.15 (2022-02-05)

Bug Fixes

helper: make mkdirIfNotExists helper resilient to concurrent calls (d9dade2), closes karma-runner/karma-coverage#434

6.3.14 (2022-02-05)

Bug Fixes

remove string template from client code (91d5acd)

warn when singleRun and autoWatch are false (69cfc76)

security: remove XSS vulnerability in returnUrl query param (839578c)

6.3.13 (2022-01-31)

Bug Fixes

deps: bump log4js to resolve security issue (5bf2df3), closes #3751

6.3.12 (2022-01-24)

Bug Fixes

remove depreciation warning from log4js (41bed33)

6.3.11 (2022-01-13)

Bug Fixes

deps: pin colors package to 1.4.0 due to security vulnerability (a5219c5)

6.3.10 (2022-01-08)

Bug Fixes

logger: create parent folders if they are missing (0d24bd9), closes #3734

... (truncated)

Commits

ab4b328 chore(release): 6.3.16 [skip ci]

ff7edbb fix(security): mitigate the "Open Redirect Vulnerability"

c1befa0 chore(release): 6.3.15 [skip ci]

d9dade2 fix(helper): make mkdirIfNotExists helper resilient to concurrent calls

653c762 ci: prevent duplicate CI tasks on creating a PR

c97e562 chore(release): 6.3.14 [skip ci]

91d5acd fix: remove string template from client code

69cfc76 fix: warn when singleRun and autoWatch are false

839578c fix(security): remove XSS vulnerability in returnUrl query param

db53785 chore(release): 6.3.13 [skip ci]

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Tabs component
This is an "epic" for tabs.

[ ] base class

[ ] bootstrap. See https://getbootstrap.com/docs/4.3/components/navs/#tabs

[ ] bulma. See https://bulma.io/documentation/components/tabs/

[ ] material. See https://material-ui.com/components/tabs/

[ ] white-label
opened by web-padawan 0
Tooltip component
This is an "epic" for tooltip.

[ ] base class

[ ] bootstrap. See https://getbootstrap.com/docs/4.3/components/tooltips/

[ ] bulma. See https://wikiki.github.io/components/steps/

[ ] material. See https://wikiki.github.io/elements/tooltip/

[ ] white-label
opened by web-padawan 0
Stepper component
This is an "epic" for stepper.

[ ] base class

[ ] bootstrap. See https://github.com/Johann-S/bs-stepper

[ ] bulma. See https://wikiki.github.io/components/steps/

[ ] material. See https://material-ui.com/components/steppers/

[ ] white-label
opened by web-padawan 0
docs(core): how and when to use delegate-focus-mixin.js

https://github.com/web-padawan/aybolit/blob/116c91840792132bece7f784a364f707537d6d9f/packages/core/src/mixins/delegate-focus-mixin.js

Some @aybolit/core components are using it, but a few are not. What is the decision criteria?

https://github.com/Polymer/lit-element/issues/586 may be related on upstream end?
docs

opened by lkraav 3

Owner

Serhii Kulykov

JavaScript developer. Building Web Components at @vaadin, previously watermills in desert at @OWOX

GitHub https://web-padawan.github.io/aybolit/

A-Frame Element is a simple library for building fast, lightweight web components for 3D development

aframe-element is a library inspired from the very nice library Polymer lit to map A-Frame AR / VR / 3D elements on typescript classes like Angular/React/Lit.

6 May 31, 2022

`raaghu-mfe` is an opensource micro front end framework built on top of `raaghu-elements`, Bootstrap 5 and Storybook offering highly customizable UI components and built-in pages

`raaghu-mfe` is an opensource micro front end framework built on top of `raaghu-elements`, Bootstrap 5 and Storybook offering highly customizable UI components and built-in pages. Raaghu mfe can be used as a base to build complex components and UI layouts whilst maintaining a high level of reusability,flexibility with ease of maintenance.

160 Dec 30, 2022

EggyJS is a Javascript micro Library for simple, lightweight toast popups focused on being dependency-less, lightweight, quick and efficient.

EggyJS EggyJS is a Javascript micro Library for simple, lightweight toast popups. The goal of this library was to create something that meets the foll

10 Jan 8, 2023

Lightweight reusable Web3 UI components for dapps.

Web3UIKit ??‍♂️ Beautiful and lightweight UI components for web3 developers. This UI library will speed up your dapp development no matter which chain

1.3k Dec 26, 2022

Macaron is an open-source design tool to visually create Web Components, which can be used in most Web frameworks, or in vanilla HTML/JavaScript

334 Dec 29, 2022

AppRun is a JavaScript library for developing high-performance and reliable web applications using the elm inspired architecture, events and components.

AppRun AppRun is a JavaScript library for building reliable, high-performance web applications using the Elm-inspired architecture, events, and compon

1.1k Dec 20, 2022

A native, pure and exquisite web components library which can be used anywhere.

What Is This ? This is a project on pure web components merely using native HTML、CSS and JavaScript technologies. It has features below: based on web

14 Nov 16, 2022

Lightweight (zero dependencies) library for enabling cross document web messaging on top of the MessageChannel API.

4 Jul 15, 2022

A simple, lightweight, clean and small library for creating guided product tours for your web app.

Tourguide.js Simple, lightweight library for creating guided tours for your web, apps and more. A tour guide is a person who provides assistance, info

277 Dec 12, 2022

In this project, I built a simple HTML list of To-Do tasks. This simple web page was built using Webpack, creating everything from a JavaScript index file that imported all the modules and assets

To Do List In this project, I built a simple HTML list of To-Do tasks. This simple web page was built using Webpack, creating everything from a JavaSc

10 Mar 31, 2022

In this project, I built a simple HTML list of To Do tasks. The list is styled according to the specifications listed later in this lesson. This simple web page is built using webpack and served by a webpack dev server.

Awesome books:JavaScript Using Modules In this project, I built a simple HTML list of To Do tasks. The list is styled according to the specifications

10 Nov 25, 2022

Bookstore app built using React, Redux, and Styled Components

Bookstore Bookstore is an app that allows you to display a list of added books, add new book and remove a book. It is built using React, Redux, and St

11 Dec 12, 2022

Chakra UI Animations is a dependancy which offers you pre-built animations for your Chakra UI components.

Chakra UI Animations Chakra UI Animations is a dependancy which offers you pre-built animations for your Chakra UI components. Installation yarn add @

9 Nov 19, 2022

📬 Lightweight Typescript-first framework built on top of Express

?? abstain Lightweight Typescript-first framework built on top of Express [WIP] ?? api // index.ts import { Application } from '@pinkcig/abstain'; imp

5 May 26, 2022

This is a full-stack exercise tracker web application built using the MERN (MongoDB, ExpressJS, ReactJS, NodeJS) stack. You can easily track your exercises with this Full-Stack Web Application.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

2 Dec 25, 2021

Progressive Web App (PWA) built in Node.js & Express that automatically reloads/refreshes your browser, web page, and app when developing.

Expresso ☕️ Checks for changes in your source and automatically reloads your browser, or web page, and app window. Makes development easier. Report Bu

3 Oct 6, 2022

Lightweight web components library built with LitElement.

Related tags

Overview

Aybolit

Overview

Project Structure

Supported Browsers

Contact

Comments

v6.3.14

6.3.14 (2022-02-05)

Bug Fixes

v6.3.13

6.3.13 (2022-01-31)

Bug Fixes

v6.3.12

6.3.12 (2022-01-24)

Bug Fixes

v6.3.11

6.3.11 (2022-01-13)

Bug Fixes

v6.3.10

6.3.10 (2022-01-08)

Bug Fixes

v6.3.9

6.3.9 (2021-11-16)

Bug Fixes

6.3.14 (2022-02-05)

Bug Fixes

6.3.13 (2022-01-31)

Bug Fixes

6.3.12 (2022-01-24)

Bug Fixes

6.3.11 (2022-01-13)

Bug Fixes

6.3.10 (2022-01-08)

Bug Fixes

6.3.9 (2021-11-16)

Bug Fixes

6.3.8 (2021-11-07)

Bug Fixes

v6.3.16

6.3.16 (2022-02-10)

Bug Fixes

v6.3.15

6.3.15 (2022-02-05)

Bug Fixes

v6.3.14

6.3.14 (2022-02-05)

Bug Fixes

v6.3.13

6.3.13 (2022-01-31)

Bug Fixes

v6.3.12

6.3.12 (2022-01-24)

Bug Fixes

v6.3.11

6.3.11 (2022-01-13)

Bug Fixes

6.3.16 (2022-02-10)

Bug Fixes

6.3.15 (2022-02-05)

Bug Fixes

6.3.14 (2022-02-05)

Bug Fixes

6.3.13 (2022-01-31)

Bug Fixes

6.3.12 (2022-01-24)

Bug Fixes

6.3.11 (2022-01-13)

Bug Fixes

6.3.10 (2022-01-08)

Bug Fixes

Owner

Serhii Kulykov

A-Frame Element is a simple library for building fast, lightweight web components for 3D development

`raaghu-mfe` is an opensource micro front end framework built on top of `raaghu-elements`, Bootstrap 5 and Storybook offering highly customizable UI components and built-in pages

EggyJS is a Javascript micro Library for simple, lightweight toast popups focused on being dependency-less, lightweight, quick and efficient.

Lightweight reusable Web3 UI components for dapps.

Macaron is an open-source design tool to visually create Web Components, which can be used in most Web frameworks, or in vanilla HTML/JavaScript