UI Web

A collection of UI web components that can be used in any web project.
IMPORTANT: This is an ESM only package.

Installation

npm install @coderundebug/ui-web

Introduction

JavaScript and web components have improved over the years to a point where the need for extra frameworks are now no longer needed. There are many UI component libraries available that are built with these frameworks. However, this collection of components has been built using only standard browser supported APIs. You don't need to use TypeScript, Sass, React, Angular, etc.

It also comes with a limited set of customizable CSS variables, allowing you to style the components and your site, with minimal fuss.

The main reason for this collection is to help you create sites without the large set of dependencies that typically come with current development processes. Instead of needing to master TypeScript, understand new framework design patterns, handle multiple build tools, and work your way through additional CSS related bloat, you just concentrate on the standards, HTML, CSS and JavaScript.

You can find more information on the main web site ui-web.com.

Examples

Below is a small selection of the type of web components you can find.

Inputs

User Name: Date of Birth: Color of Car: Best Pizza Topping:
Sausage
Pepperoni
Mushrooms
Black Olives
Bacon
Onions
Extra Cheese
Pineapple
Bell Pepper
Barbecue Chicken
Chicken
Ham
Anchovies
Pizza Margherita
Prosciutto
Spinach
Basil
Cheeseburger
Garlic Cheese
Pesto
Tomatoes
Beef
Number of Slices:
1
2
3
4
5
6
7
8

Tables (drag and drop)

Name
Energy
Caffeine
Caramel Frappuccing Light
100 calories
65mg
Soy Chai Tea Latte
180 calories
70mg
Iced Coffee with Classic Syrup
80 calories
90mg
Brewed Pike Place Coffee
5 calories
235mg
Nonfat Caramel Macchiato Hot or Iced
150 calories
75mg
Teavana Sweetened Iced Passion Tango Tea
60 calories
0mg
Nonfat Iced Green Tea Latte
120 calories
55mg
Iced Skinny Vanilla Latte
60 calories
75mg
Nonfat Caffe Mocha (hold the whip)
190 calories
95mg

Code

Another great example...

Press Me