kjantzer / bui Goto Github PK

‹B› Web components, classes, and utilities for creating single-page PWAs – built with Lit by Blackstone Publishing

JavaScript 86.09% HTML 12.20% Less 1.65% Shell 0.02% Dockerfile 0.04%

custom-elements lit-html lit-element lit-html-element web-components javascript ui-framework ui-components ui-library design-system

bui's Introduction

Blackstone UI (BUI)

Web components for creating interfaces - built with Lit by Blackstone Publishing

🎉 Features

📱 Progressive scaling from desktop to mobile devices
🌗 Dark/Light Mode
🎨 Color Themes
🧑‍💻 Modern async/await style structure
🛠 Customizable with css vars and "parts"
🔗 Extensible and interoperable with other frameworks
⚓️ URL route management

ℹ️ Overview

The stable release of v1 web components with the addition of lit make for an incredible framework for writing user interface components.

Shadow DOM, CSS custom properties, and css "parts" makes encapsulation easy yet still customizable.

BUI is a library of low level custom elements, full featured "presenters", useful utility functions, application router, code extension "helpers", node.js server classes (for creating RESTful APIs), and more.

Import and use a select few components or use most of it to create a full featured application.

⭐️ The demo/documention is an example of what can be built with BUI and a good resource for reading more about what the library offers.

⬇️ Installation

BUI is actively developed on a daily basis by Blackstone Publishing. It is used in multiple internal application production environments. New features, changes, and bug fixes occur weekly - however, it may be slower to reach this public repo.

Although BUI is available as an npm package, the library is updated too frequently to publish consistent versions.

Installing the latest is recommended:

npm install https://github.com/kjantzer/bui.git --save

We will attempt to document major breaking changes in the changelog. If you find any bugs/issues, please report or submit a PR.

🚀 Getting Started

Cloning and runing the demo/docs locally on your computer would be a good place to start. From there you can see how the various components work together to create an application.

Install parcel globally if you don't already have it installed

$ npm install -g parcel-bundler

Install the dependencies, then start the demo app

$ git clone https://github.com/kjantzer/bui.git
$ cd bui
$ npm install
$ npm start

You should then be able to view the demo at:
http://localhost:1234

🚨 Notice

Since BUI is actively developed nearly every day and done so by a small team, the documentation likely won't be 100% up to date. You may need to reference the physical code to discover some options/settings.

No software is bug free, but the latest commit of BUI should be fairly stable as it is used in a production environment at Blackstone.

bui's People

Stargazers

Watchers

Forkers

krlosg damnedscholar andyvanee kapseliboi

bui's Issues

Browser autofill will not fill more than one input

The browser will autofill a set of native inputs (say for an address) but if custom elements are used, only the focused input will autofill. This is a limitation of the browser and not BUI

See: https://bugs.chromium.org/p/chromium/issues/detail?id=649162
and: WICG/webcomponents#572

Easier grid control

Hey 😄
I was wondering, why b-grid has only the statically configured columns values (1-8, 1,2 1,2,2...) and not a dynamic value?
I guess this could be achieved nicely with a style tag computed within the template.

Form label animation shake in webkit / safari

In safari, there’s a shake in the form label when the input gains focus:

Compared to Chrome (where it doesnt happen):

Beautiful lib of web-components! I’m very new to lit, but if there’s any way I can help troubleshoot, please let me know 😄

What is the license of BUI

Hi, your work seems fine, but what is the license ? (sorry if it's there but I missed it !).

JS.ORG CLEANUP

Hello, it seems a js.org subdomain that was requested to target this repository no longer works.
The subdomain requested was bui.js.org and had the target of kjantzer.github.io/bui.
It produced the following failures when tested as part of the cleanup:

HTTP: Failed with status code '404 Not Found'
HTTPS: Failed with status code '404 Not Found'

To keep the js.org subdomain you should add a page with reasonable content within a month so the subdomain passes the validation.
Failure to rectify the issues will result in the requested subdomain being removed from JS.ORGs DNS and the list of active subdomains.

If you are wanting to keep the js.org subdomain and have added reasonable content, YOU MUST reply to the main cleanup issue with the response format detailed at the top to keep the requested subdomain.

🤖 Beep boop. I am a robot and performed this action automatically as part of the js.org cleanup process. If you have an issue, please contact the js.org maintainers.

i noticed that when i inspect something like dialog.js: https://unpkg.com/browse/[email protected]/presenters/dialog/dialog.js

i find imports like these:

import Popover from '../popover'
import makeBtn from './make-btn'

however when a modern browser attempts to import a file which has imports like these, it will fail

to fix the issue and make the library more compatible with cutting-edge workflows, please add the .js extensions, like so

import Popover from '../popover.js'
import makeBtn from './make-btn.js'

traditional bundler tooling like rollup will ignore/tolerate the .js extensions
typescript itself also ignores/tolerates the .js extensions
webnative browser imports require the .js extensions
therefore, to best serve everybody, it's best to include the .js extensions across the board

note, you don't add the extensions to bare-specifiers like "lit-element" -- to be clear:

// correct to omit extension
import {LitElement} from "lit-element"

// correct to use extension
import {UpdatingElement} from "lit-element/lib/updating-element.js"

cheers, looking forward to using and evangelising these components wherever i can!

👋😎 chase