Naked web components
Published:
Naked Web Components is a library of 'bare-bones' (hahahahahaha) components that focus on functionality. They are not pretty!
Naked web components have no theming and the minimal amount of styling to get them working. They are a blank slate for you to add styles to. I try to make them HTML first where possible, and unobtrusive if javascript doesn't load.
I test accessibility using NVDA, but I'm sure that aspect can be improved, so any suggestions are welcome.
I include a simple CSS file with most of the components to dress it up, and little to make it less skeletal 😬.
The components
Each component inlcudes a demo page with an example. Run them locally using a server (I recommend Eleventy Dev Server). Curernt components:
-
naked-sticky-overflow
I'm very proud of the name of this one! Adding scrolling to an element can save your layout but elements with
position: stickywill fail. This component lets sticky work with a scrolling solution. It will progressively enhance an existing overflow. -
naked-table-sort
Sort your tables!
-
naked-filter
Filter things within a container. Could be a table, could be something else - oooh the mystery oooohh!
-
naked-x-of-x
Nothing to do with the hellsite! Count the number of visible things from a total of things. Catchy language, I know.
Credits
Thank you to David Darnes for his excellent starter template that got me going with components. David Bushell wrote a great article that made my components more robust: Anatomy of a Web Component. Finally a big thanks to Chris Ferdinandi at https://gomakethings.com/ for allowing me to use his licences from the amazing KelpUI.
The demo
This demo uses the <naked-x-of-x>, <naked-filter>, <naked-sticky-overflow> and <naked-table-sort> components. See the end of the page for licencing
Showing:
| Nadine Blue | 20-05-1930 | It's the: BBC Micro |
| Jordan Grey | 17-04-1960 | It's the: Commodore |
| Nico Blue | 28-04-1980 | It's the: ZX Spectrum |
| Jordan Green | 17-03-1930 | It's the: Atari |
| Nico Green | 20-07-1970 | It's the: Amstrad |
| John Brown | 17-11-1314 | It's the: ZX81 |
| Jordan White | 28-06-1930 | It's the: Atari |
| Nico Grey | 17-04-1980 | It's the: ZX Spectrum |
| Patrick Brown | 28-05-1970 | It's the: ZX Spectrum |
| Patrick Blue | 20-04-1930 | It's the: Amstrad |
| Gabby Black | 28-04-1930 | It's the: Amstrad |
| Oleks Blue | 28-05-1930 | It's the: BBC Micro |
| Jordan White | 28-10-1314 | It's the: ZX81 |
| John Black | 17-01-1940 | It's the: Amstrad |
| Nadine Blue | 20-05-1970 | It's the: BBC Micro |
| Patrick Brown | 20-01-1950 | It's the: ZX Spectrum |
| Nadine Green | 20-12-1950 | It's the: Apple |
| Jane Grey | 17-05-1950 | It's the: Commodore |
| Jordan Brown | 17-01-1314 | It's the: Amstrad |
| Gabby Brown | 17-02-1930 | It's the: Commodore |
| David Green | 17-03-1970 | It's the: Apple |
| Jane Green | 17-10-2000 | It's the: Acorn |
| Nico Grey | 17-12-1990 | It's the: Apple |
| Jane Brown | 17-09-1970 | It's the: ZX81 |
| David Blue | 28-07-1980 | It's the: ZX81 |
| David White | 17-06-1950 | It's the: Amstrad |
| John Grey | 20-12-1960 | It's the: ZX81 |
| Patrick Blue | 17-10-1950 | It's the: ZX Spectrum |
| John Green | 28-11-1980 | It's the: Amstrad |
| Jane Grey | 17-10-1950 | It's the: Apple |
| David Blue | 17-06-1970 | It's the: Apple |
| Gabby Grey | 28-04-1950 | It's the: ZX Spectrum |
| Gabby White | 20-04-1314 | It's the: ZX Spectrum |
| Patrick Green | 20-12-1990 | It's the: Commodore |
| David Black | 17-01-1980 | It's the: Apple |
| Nico Black | 28-09-1940 | It's the: Acorn |
| Jordan Green | 17-03-1990 | It's the: Atari |
| Patrick Grey | 17-08-1940 | It's the: Atari |
| David Brown | 17-04-1314 | It's the: BBC Micro |
| Nico Green | 28-09-1940 | It's the: Amstrad |
| Oleks Black | 20-12-2000 | It's the: Commodore |
| David Brown | 20-03-1980 | It's the: BBC Micro |
| Nico Brown | 17-03-1980 | It's the: BBC Micro |
| John Black | 20-01-1980 | It's the: Atari |
| Jane White | 28-12-1990 | It's the: Apple |
| David Blue | 17-06-1940 | It's the: Amstrad |
| Nico Blue | 20-09-1990 | It's the: Commodore |
| John Blue | 17-05-2000 | It's the: Commodore |
| Jane Grey | 17-06-2000 | It's the: Amstrad |
| Nico White | 28-01-1960 | It's the: Acorn |
| Patrick Brown | 17-07-1990 | It's the: ZX Spectrum |
| Nadine Black | 28-02-1940 | It's the: Commodore |
| Jane Grey | 28-07-1930 | It's the: Atari |
| Nico Black | 20-06-1990 | It's the: Atari |
| Jane Green | 28-12-1970 | It's the: Commodore |
| Nadine Grey | 28-10-1970 | It's the: Commodore |
| David Grey | 20-08-1930 | It's the: BBC Micro |
| David Black | 17-02-1950 | It's the: Amstrad |
| Nico White | 17-10-1950 | It's the: Apple |
| Oleks Brown | 17-01-2000 | It's the: Commodore |
| Jordan Grey | 28-04-1950 | It's the: ZX81 |
| Jane Black | 28-11-1960 | It's the: BBC Micro |
| Nico Green | 28-09-1314 | It's the: Commodore |
| Patrick Blue | 17-05-1980 | It's the: ZX81 |
| Oleks White | 20-11-1930 | It's the: Atari |
| Gabby Grey | 20-05-1970 | It's the: ZX Spectrum |
| Gabby Brown | 17-07-1970 | It's the: Amstrad |
| David White | 17-08-1940 | It's the: ZX Spectrum |
| David Brown | 28-01-1930 | It's the: Commodore |
| Patrick Brown | 17-10-1950 | It's the: Acorn |
| Oleks Green | 20-05-1314 | It's the: Atari |
| Jordan White | 17-01-1940 | It's the: ZX Spectrum |
| Jordan White | 28-03-1314 | It's the: BBC Micro |
| Gabby White | 20-07-1960 | It's the: Acorn |
| John White | 28-05-1314 | It's the: ZX Spectrum |
| Patrick Brown | 20-08-1940 | It's the: Amstrad |
| Gabby Blue | 20-12-1950 | It's the: Amstrad |
| Oleks Brown | 17-11-1980 | It's the: Atari |
| David White | 20-04-1990 | It's the: Apple |
| Jordan Black | 17-09-1930 | It's the: BBC Micro |
| Patrick Black | 20-11-1980 | It's the: Commodore |
| Oleks Blue | 28-12-2000 | It's the: Commodore |
| Nico Grey | 17-07-1960 | It's the: Atari |
| Oleks Black | 20-05-1930 | It's the: ZX Spectrum |
| Gabby Brown | 17-11-1970 | It's the: Atari |
| Patrick White | 20-10-1960 | It's the: Commodore |
| Nadine Brown | 28-06-1970 | It's the: BBC Micro |
| David Green | 28-10-1940 | It's the: Acorn |
| Oleks Blue | 20-12-2000 | It's the: Commodore |
| Jane Blue | 28-03-1314 | It's the: BBC Micro |
| John Blue | 28-03-1940 | It's the: ZX81 |
| David White | 20-06-1960 | It's the: ZX81 |
| Patrick White | 28-01-1960 | It's the: BBC Micro |
| Jordan White | 17-03-1990 | It's the: Commodore |
| Nico Green | 17-11-1940 | It's the: Atari |
| Jane Blue | 28-02-1990 | It's the: Acorn |
| Oleks Green | 17-03-1950 | It's the: ZX Spectrum |
| Oleks Black | 20-08-1314 | It's the: BBC Micro |
| Jane Blue | 17-06-1940 | It's the: Amstrad |
| Nico Grey | 28-04-1314 | It's the: BBC Micro |
| Patrick White | 17-09-1930 | It's the: BBC Micro |
| John Blue | 17-05-1930 | It's the: Amstrad |
| Oleks Blue | 28-12-1930 | It's the: Atari |
| Jane Black | 17-03-1950 | It's the: ZX Spectrum |
| Gabby Blue | 20-10-1314 | It's the: ZX Spectrum |
| Jane Green | 28-08-1940 | It's the: ZX81 |
| Nadine Grey | 28-11-1980 | It's the: Atari |
| John Blue | 28-06-1314 | It's the: BBC Micro |
| Oleks Grey | 28-04-1970 | It's the: BBC Micro |
| Nico White | 17-10-1950 | It's the: Amstrad |
| Oleks Green | 17-09-1980 | It's the: Atari |
| Gabby White | 28-03-1960 | It's the: ZX81 |
| Jordan White | 28-06-1314 | It's the: ZX Spectrum |
| John Blue | 20-02-1314 | It's the: ZX Spectrum |
| Jane White | 17-08-1960 | It's the: ZX Spectrum |
| Nadine Green | 20-08-1940 | It's the: ZX Spectrum |
| John Brown | 28-05-1940 | It's the: ZX81 |
| Nico Black | 17-10-1970 | It's the: Atari |
| Jordan Blue | 28-04-1314 | It's the: BBC Micro |
| David Brown | 20-01-1970 | It's the: ZX Spectrum |
| Nadine Blue | 28-07-1960 | It's the: ZX81 |
| John Black | 28-10-1980 | It's the: Amstrad |
| John White | 17-09-2000 | It's the: Acorn |
| Nadine Black | 28-12-1950 | It's the: Amstrad |
| Nico Green | 17-12-1930 | It's the: ZX Spectrum |
| Gabby Black | 20-09-2000 | It's the: ZX81 |
| Gabby Grey | 28-05-1930 | It's the: ZX Spectrum |
| Gabby Grey | 28-11-1314 | It's the: Atari |
| Oleks Brown | 17-06-1314 | It's the: Amstrad |
| David Brown | 20-11-1960 | It's the: Amstrad |
| Nico Black | 17-02-1960 | It's the: BBC Micro |
| Gabby Green | 28-10-1950 | It's the: Acorn |
| Jane Green | 28-10-1930 | It's the: ZX81 |
| Patrick Green | 28-01-1980 | It's the: Apple |
| Jane Blue | 17-06-1930 | It's the: BBC Micro |
| Jordan Brown | 17-01-2000 | It's the: Amstrad |
| Nico White | 17-12-1940 | It's the: Commodore |
| Oleks Green | 28-11-1980 | It's the: Acorn |
| Patrick Black | 28-01-1970 | It's the: Apple |
| Gabby Blue | 28-11-1980 | It's the: Amstrad |
| Jane White | 17-11-1940 | It's the: ZX Spectrum |
| Nadine Green | 28-02-1970 | It's the: Acorn |
| Nico Green | 17-08-1990 | It's the: ZX Spectrum |
| Gabby Green | 20-05-1940 | It's the: Apple |
| Jane Brown | 20-05-1930 | It's the: ZX Spectrum |
| Patrick Blue | 28-01-1960 | It's the: BBC Micro |
| Patrick Black | 20-01-2000 | It's the: Acorn |
| Oleks Brown | 28-06-1930 | It's the: Atari |
| David Black | 28-02-1960 | It's the: Apple |
| Nico Brown | 20-04-1950 | It's the: Apple |
| Gabby Black | 20-04-1970 | It's the: ZX Spectrum |
| Nadine Green | 28-05-1940 | It's the: ZX Spectrum |
| Jane Green | 17-02-1970 | It's the: ZX81 |
| Nadine Green | 20-06-1950 | It's the: ZX Spectrum |
| John White | 28-03-1960 | It's the: Commodore |
| Nico Black | 20-02-1980 | It's the: Apple |
| Nico Blue | 28-11-1930 | It's the: Acorn |
| John Black | 28-05-1990 | It's the: ZX Spectrum |
| Nadine Grey | 20-01-1314 | It's the: Atari |
| Jane Grey | 28-08-1980 | It's the: ZX81 |
| Jane Brown | 17-03-2000 | It's the: Commodore |
| John Green | 28-08-1960 | It's the: BBC Micro |
| Nadine Grey | 17-04-1930 | It's the: Amstrad |
| Jane White | 28-06-1940 | It's the: ZX Spectrum |
| Jane White | 17-11-1930 | It's the: Commodore |
| Gabby Grey | 20-10-1960 | It's the: BBC Micro |
| Oleks Grey | 28-04-1990 | It's the: BBC Micro |
| Nico Brown | 17-11-1960 | It's the: Acorn |
| Patrick Green | 20-09-1990 | It's the: Amstrad |
| Oleks Black | 17-04-1970 | It's the: Apple |
| Patrick White | 28-03-1970 | It's the: Acorn |
| Oleks Grey | 28-10-1990 | It's the: Commodore |
| David Green | 20-07-1970 | It's the: Commodore |
| Oleks Blue | 17-12-1970 | It's the: Commodore |
| John White | 17-07-1960 | It's the: ZX81 |
| Patrick Green | 28-12-1314 | It's the: ZX81 |
| Jane Grey | 17-12-1960 | It's the: ZX Spectrum |
| Jordan Green | 20-07-1314 | It's the: ZX81 |
| Patrick Blue | 28-08-1960 | It's the: Commodore |
| John Grey | 28-11-1980 | It's the: ZX Spectrum |
| Patrick Grey | 20-09-1940 | It's the: BBC Micro |
| John Green | 20-12-1980 | It's the: BBC Micro |
| John Green | 20-06-1990 | It's the: Acorn |
| Oleks Blue | 28-05-1950 | It's the: Apple |
| Nico Black | 28-05-1960 | It's the: ZX81 |
| Nico White | 20-04-1980 | It's the: Commodore |
| Jane White | 20-11-1950 | It's the: ZX81 |
| Patrick Brown | 28-09-1950 | It's the: ZX Spectrum |
| Jane White | 28-10-1940 | It's the: Commodore |
| Jane Blue | 28-07-2000 | It's the: Apple |
| John Brown | 20-12-2000 | It's the: Apple |
| Patrick White | 28-08-1970 | It's the: Amstrad |
| David Brown | 20-03-2000 | It's the: Acorn |
| Nadine Grey | 28-02-1970 | It's the: BBC Micro |
| Patrick Blue | 20-02-1980 | It's the: BBC Micro |
| Nico Green | 17-05-1980 | It's the: Amstrad |
| Nadine Blue | 28-12-1314 | It's the: BBC Micro |
| Nadine White | 20-03-1930 | It's the: Atari |
| David Black | 28-12-1970 | It's the: Amstrad |
| Nadine Green | 20-03-1940 | It's the: ZX81 |
| Nico Brown | 20-01-1970 | It's the: ZX Spectrum |
| Nadine White | 20-09-1990 | It's the: Acorn |
| David Black | 28-01-1980 | It's the: ZX Spectrum |
| David Black | 20-02-1930 | It's the: ZX81 |
| David Blue | 28-07-1960 | It's the: ZX Spectrum |
| Gabby Green | 28-08-1314 | It's the: Amstrad |
| Jane Black | 17-06-1314 | It's the: ZX Spectrum |
| Jordan Brown | 20-10-1980 | It's the: ZX Spectrum |
| Patrick Brown | 17-03-1980 | It's the: Atari |
| Patrick Grey | 28-10-1314 | It's the: Amstrad |
| Jordan Black | 17-07-1960 | It's the: Amstrad |
| Jordan Blue | 17-03-1970 | It's the: Amstrad |
| Jane Black | 20-12-1940 | It's the: Amstrad |
| Jordan Blue | 17-04-1950 | It's the: Apple |
| Gabby Green | 28-11-1980 | It's the: Amstrad |
| David Blue | 28-08-2000 | It's the: Commodore |
| Patrick Blue | 20-03-1980 | It's the: ZX81 |
| Nico Blue | 28-04-1990 | It's the: BBC Micro |
| Oleks Grey | 17-02-1990 | It's the: ZX81 |
| Patrick Black | 20-06-1940 | It's the: BBC Micro |
| Nadine Green | 28-05-1314 | It's the: Atari |
| Patrick Brown | 20-08-1960 | It's the: Apple |
| John Black | 17-05-1314 | It's the: Amstrad |
| Nadine Black | 28-08-1970 | It's the: ZX81 |
| Oleks Green | 20-10-2000 | It's the: Acorn |
| Jordan White | 20-12-1940 | It's the: Amstrad |
| Jane Blue | 28-03-1940 | It's the: ZX81 |
| Gabby Green | 17-02-1980 | It's the: Apple |
| Nadine Blue | 17-06-1990 | It's the: Commodore |
| Oleks Brown | 28-05-1940 | It's the: Commodore |
| Jane Blue | 20-07-1940 | It's the: Amstrad |
| Gabby Black | 28-05-1940 | It's the: Amstrad |
| David Grey | 20-03-1950 | It's the: Commodore |
| Nico Brown | 28-12-1940 | It's the: ZX Spectrum |
| Patrick Brown | 20-08-1970 | It's the: BBC Micro |
| Nico Grey | 17-06-1980 | It's the: Acorn |
| Gabby Black | 28-07-1314 | It's the: ZX Spectrum |
| Patrick White | 20-01-1314 | It's the: BBC Micro |
| Patrick White | 28-11-1950 | It's the: ZX Spectrum |
| Nadine Brown | 17-04-1990 | It's the: Apple |
| Patrick White | 17-11-2000 | It's the: Acorn |
| Patrick Brown | 20-11-1980 | It's the: Atari |
| Gabby Green | 28-06-1960 | It's the: Acorn |
| Nadine White | 28-05-2000 | It's the: BBC Micro |
| David White | 28-11-1314 | It's the: BBC Micro |
| David Green | 20-01-1950 | It's the: ZX Spectrum |
| John Green | 28-04-1950 | It's the: Apple |
| David Blue | 28-08-1314 | It's the: ZX Spectrum |
| John Grey | 28-09-1990 | It's the: Commodore |
| Oleks White | 28-02-1930 | It's the: Apple |
Licencing
Naked Web Components are licenced under the excellent Kelp Commons Licence by Chris Ferdinandi (original) which is copyright Go Make Things, LLC.
If you are interested in licencing the library for commercial use, this can be done under the licences taken from the same source:
- Pro licence (£20 per project)
- Enterprise licence (£200 per project)