codewithkyle / brixi-ui Goto Github PK
View Code? Open in Web Editor NEWA sleek & slender design system built on web components.
Home Page: https://ui.brixi.dev
License: MIT License
A sleek & slender design system built on web components.
Home Page: https://ui.brixi.dev
License: MIT License
We should offer an XD file that contains all the colours, components, and icons.
Add a radio group component.
Add a -round
option to the -image
class.
Model
export class ColorComponent extends HTMLElement{
private input:HTMLInputElement;
private label:HTMLLabelElement;
private textInput:HTMLInputElement;
constructor(){
super();
this.input = this.querySelector(`input[type="color"]`);
this.label = this.querySelector("label");
this.textInput = this.querySelector(`input[type="text"]`);
}
private handleColor:EventListener = () => {
this.label.style.backgroundColor = this.input.value;
this.textInput.value = this.input.value;
}
private handleTextColor:EventListener = () => {
const value = `${this.textInput.value.replace("#", "")}`;
this.input.value = `#${value}`;
this.label.style.backgroundColor = `#${value}`;
}
private focusInput:EventListener = () => {
this.textInput.value = this.textInput.value.replace("#", "");
}
private blurInput:EventListener = () => {
this.textInput.value = `#${this.textInput.value.replace("#", "")}`;
this.input.value = this.textInput.value;
this.label.style.backgroundColor = this.textInput.value;
}
connectedCallback(){
this.input.addEventListener("change", this.handleColor);
this.textInput.addEventListener("input", this.handleTextColor);
this.textInput.addEventListener("focus", this.focusInput);
this.textInput.addEventListener("blur", this.blurInput);
}
}
View
<color-component>
<label class="sample" for="custom-background-color"></label>
<input @change=${e => this.updateColor(e.currentTarget.value)} id="custom-background-color" type="color" />
<div style="width:100%;flex:1;">
<label class="label" for="custom-color-hex">Background Color</label>
<input @blur=${e => this.updateColor(e.currentTarget.value)} type="text" value="#000000" id="custom-color-hex">
</div>
</color-component>
Stylesheet
color-component{
position: relative;
display: flex;
flex-flow: row nowrap;
align-items: center;
width: 100%;
input[type="color"]{
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.sample{
width: 55px;
height: 55px;
border-radius: 0.25rem;
display: inline-block;
box-shadow: inset 0 0 3px rgba(0,0,0,0.15);
background-color: #000;
cursor: pointer;
margin-right: 1rem;
}
.label{
display: block;
width: 100%;
font-size: var(--font-xs);
font-weight: var(--font-medium);
color: var(--grey-800);
margin-bottom: 0.25rem;
}
input[type="text"]{
height: 36px;
line-height: 36px;
padding: 0 0.5rem;
background-color: var(--grey-100);
border: 1px solid var(--grey-300);
border-radius: 0.25rem;
color: var(--grey-900);
transition: all 150ms var(--ease-in-out);
width: 100%;
display: block;
&::placeholder {
color: var(--grey-700);
}
&:hover {
border-color: var(--primary-400);
}
&:focus {
border-color: var(--primary-400);
box-shadow: 0 0 0 5px var(--primary-100);
background-color: var(--white);
}
}
}
We should provide a base component that handles internal application moveable windows.
Create a skeleton frame class:
.skeleton{
display: block;
position: relative;
border-radius: 0.25rem;
overflow: hidden;
background-color: var(--grey-200);
&.-image{
&::before{
content: "";
display: block;
width: 100%;
padding-bottom: 75%;
}
}
&.-heading{
height: 36px;
}
&.-copy{
height: 24px;
}
&.-button{
height: 36px;
width: 96px;
}
&::after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, transparent, var(--grey-300), transparent);
animation: skeleton 900ms linear infinite;
}
}
@keyframes skeleton{
from{
transform: translateX(-200%);
}
to{
transform: translateX(100%);
}
}
Add a URL input component.
Update Inputs and Selects to support icons:
<input-wrapper>
<i style="pointer-events:none;">
<svg/>
</i>
<input />
</input-wrapper>
Add a pin input component.
Provide developers with the ability to generate <form>
elements where the onSubmit
callback returns the JSON or FormData based on the inputs. Currently developers have to query the input components themselves and it's kinda clunky. It would also be helpful if the submit button could transition to a sending state and the developer needs to call a function such as pass()
or fail()
to end the submitting state. Fail could also take an array of strings that we could render as an error alert component.
Refer to https://gerireid.com/forms.html#notifications for additional details.
This component should be updated to use lit-html.
import {html, render} from 'https://unpkg.com/lit-html?module';
Data tables should support these features:
Add a checkbox group component.
All CSS required for a component should be injected into each pages <head>
while the actual components files are bundled with the zip.
We should also provide a CSS version of the SCSS file in the download.
We should remove the modal maker dependency and in turn create our own modal base class along with a few generic modals such as passive and confirm.
Add a help modal that includes the following:
We should figure out how to create a configurable global API controller. Ideally we would allow developers to configure (optional) default headers, GET params, and Body objects along with setting the API's URL (defaults to origin).
Style basic order and unordered lists.
Currently mobile is basically useless because the navigation menu takes up to much space.
Add a basic carousel component that uses the Web Animations API. The component should be easy to extend allowing developers to create custom transitions when a render()
function is called.
Also add a dark/light theme lightswitch.
Create a button component that displays a loading state when activated. Support the following states:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.