Web essentials

Customizable UI components with minimal markup & (so far) no JS inside

See the Github repo for more details on the approach and the source code.

`--highlight-background`	palegreen cornflowerblue gold hotpink palevioletred royalblue orchid lightslategray darkorange mediumpurple
`font-size`	10 px 12 px 13 px 14 px 16 px 18 px 20 px

listbox

Cherry Plum Apple Lime Coconut

דובדבן שזיף תפוח ליים קוקוס

Group 1 Cherry Plum Apple Group 2 Lime Coconut

button

Lorem

Lorem File

Lorem

Div

Span Label Link

Lorem

Lorem File

Lorem

Div

Span Label Link

checkbox

Lorem Cherry Plum Apple Lime

radiobutton

Lorem Cherry Plum Apple Lime

toggle

Single Cherry Plum Lime

Multiple Cherry Plum Lime

select

Lorem

Cherry Plum Apple Lime Coconut

Cherry Plum Apple Lime Coconut Cherry Plum Apple Lime Coconut

Lorem

Cherry Plum Apple Lime Coconut Cherry Plum Apple Lime Coconut

דובדבן שזיף תפוח ליים קוקוס דובדבן שזיף תפוח ליים קוקוס

link

Lorem Link Link Span Label

Div

File

radiogroup

Lorem

Cherry Plum Lime

Lorem

Cherry Plum Lime

textinput

Lorem

Lorem

Lorem

textarea

caption, tip

Lorem ipsum	Pellentesque auctor sapien
Lorem ipsum	Aenean habitant senectus

tablist

Cherry
Plum
Lime
Apple
Coconut

Cherry • Plum • Lime • Apple • Coconut

menubar

Cherry
Plum
Lime
Apple
Coconut

Cherry • Plum • Lime • Apple • Coconut

status

Lorem Please wait... Loading...

tooltip

Pellentesque auctor neque nec sapien ipsum, porta auctor quis.

dialog

Show dialog

Lorem ipsum!

Pellentesque auctor neque nec sapien ipsum, porta auctor quis. Aenean habitant senectus et netus et malesuada fames egestas.

Cancel OK

messagebox

Lorem ipsum!

Pellentesque auctor neque nec sapien ipsum, porta auctor quis. Aenean habitant senectus et netus et malesuada fames egestas.

Cancel OK

glyph

Lorem ipsum em Cap ex

axtk MMXX