Naked web components
Published:
Updated:
Naked Web Components is a library of 'bare-bones' (hahahahahaha) components that focus on functionality and simplicity. 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
Tables. Sorted!
-
naked-table-stripe-sort
If a table has alternating table row colours, when it is filtered or sorted, the alternation can get messed up. As far as I know, we cannot fix this with CSS (yet) so this component listens for changes in the tbody trs and reapplies user specified classes to each visible row.
-
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>, <naked-table-stripe-sort> and <naked-table-sort> components. See the end of the page for licencing
Showing:
| Gabby Brown | 20-01-1970 | It's the: Atari |
| John Blue | 28-11-1950 | It's the: Apple |
| Nico Green | 28-06-1960 | It's the: Commodore |
| John Grey | 28-10-1314 | It's the: ZX Spectrum |
| Oleks Black | 20-08-1990 | It's the: Amstrad |
| Gabby Brown | 20-02-2000 | It's the: Apple |
| Oleks Blue | 17-04-1970 | It's the: ZX Spectrum |
| Nadine Black | 20-07-1980 | It's the: Commodore |
| Jane White | 20-05-2000 | It's the: ZX81 |
| Jordan Green | 28-07-1950 | It's the: Acorn |
| Nico Blue | 28-02-1980 | It's the: Amstrad |
| Jane Green | 17-04-1980 | It's the: Atari |
| Oleks Blue | 28-03-1950 | It's the: BBC Micro |
| Patrick Blue | 20-03-1930 | It's the: ZX Spectrum |
| Nico Green | 20-11-1980 | It's the: ZX Spectrum |
| Gabby Blue | 20-03-1940 | It's the: Commodore |
| Nico White | 20-03-1314 | It's the: ZX Spectrum |
| John Blue | 20-05-1980 | It's the: Acorn |
| Nico Brown | 17-07-1970 | It's the: Amstrad |
| Patrick Black | 20-12-1950 | It's the: Amstrad |
| Gabby Blue | 28-03-1940 | It's the: Apple |
| Nadine Blue | 17-12-1960 | It's the: ZX81 |
| Nico White | 17-01-1314 | It's the: Apple |
| David Blue | 17-06-1970 | It's the: Commodore |
| Nico Green | 20-03-1960 | It's the: Apple |
| Jordan White | 17-03-1314 | It's the: Atari |
| Nico Blue | 20-04-1940 | It's the: Commodore |
| Oleks Green | 28-06-1970 | It's the: Acorn |
| John Green | 20-01-1314 | It's the: ZX Spectrum |
| Patrick White | 17-07-2000 | It's the: Atari |
| Patrick Grey | 28-07-1314 | It's the: Apple |
| Jordan White | 20-12-1970 | It's the: Atari |
| Jordan Black | 28-12-1960 | It's the: Acorn |
| Nadine Green | 28-09-1970 | It's the: ZX81 |
| Oleks Blue | 17-10-1314 | It's the: ZX81 |
| Oleks Blue | 17-04-1970 | It's the: ZX81 |
| Jordan Brown | 20-05-1970 | It's the: ZX Spectrum |
| Patrick Green | 17-01-1970 | It's the: Atari |
| Jordan Black | 28-06-1970 | It's the: Apple |
| Patrick Black | 17-02-1990 | It's the: ZX81 |
| Jane Black | 20-09-1980 | It's the: Commodore |
| Gabby Grey | 20-10-1980 | It's the: Apple |
| Oleks Blue | 20-12-1980 | It's the: Atari |
| David Brown | 28-09-1970 | It's the: Commodore |
| Nadine Black | 17-09-2000 | It's the: Commodore |
| Nadine Blue | 17-02-1940 | It's the: Acorn |
| Jane Blue | 17-05-1970 | It's the: Acorn |
| Jordan Blue | 17-07-1980 | It's the: BBC Micro |
| Patrick Grey | 17-09-1940 | It's the: ZX81 |
| Jordan Black | 17-06-1970 | It's the: Apple |
| Gabby White | 20-07-1314 | It's the: ZX81 |
| Jane Blue | 17-03-1950 | It's the: Amstrad |
| Oleks White | 28-12-1960 | It's the: Amstrad |
| Jordan White | 28-11-1980 | It's the: Amstrad |
| Jane White | 20-09-1940 | It's the: Commodore |
| Nico Black | 17-11-1940 | It's the: BBC Micro |
| Nadine Brown | 28-05-1960 | It's the: Amstrad |
| Jane Grey | 17-12-1930 | It's the: ZX81 |
| Patrick White | 20-04-1314 | It's the: BBC Micro |
| Oleks Green | 28-08-1990 | It's the: Amstrad |
| Oleks Green | 28-11-2000 | It's the: Amstrad |
| Oleks Green | 28-12-1940 | It's the: Amstrad |
| John White | 28-05-1940 | It's the: BBC Micro |
| Nico Brown | 17-07-2000 | It's the: Amstrad |
| Jane Black | 17-05-1930 | It's the: Acorn |
| Nadine White | 28-09-1940 | It's the: ZX Spectrum |
| David Brown | 17-12-1950 | It's the: ZX81 |
| Nico Green | 28-04-1960 | It's the: Apple |
| David White | 28-03-1930 | It's the: Amstrad |
| Jane White | 17-10-1950 | It's the: ZX81 |
| Nico Black | 28-03-1960 | It's the: ZX81 |
| John Green | 28-10-1970 | It's the: Amstrad |
| Jane Black | 20-04-1950 | It's the: Amstrad |
| Gabby Blue | 28-05-1980 | It's the: Amstrad |
| Jordan Green | 28-06-1930 | It's the: Apple |
| Patrick White | 28-02-1960 | It's the: Atari |
| Gabby White | 17-10-2000 | It's the: Commodore |
| Oleks Black | 17-10-1960 | It's the: BBC Micro |
| Gabby Brown | 17-02-1314 | It's the: ZX81 |
| Gabby Black | 17-12-1980 | It's the: Apple |
| Gabby Brown | 17-10-1930 | It's the: Commodore |
| David Black | 17-06-1940 | It's the: BBC Micro |
| Jordan White | 17-10-1990 | It's the: Commodore |
| David Green | 17-11-1314 | It's the: Apple |
| Oleks Black | 20-10-1314 | It's the: Commodore |
| John White | 20-07-1980 | It's the: ZX81 |
| John White | 28-08-1970 | It's the: Acorn |
| Nadine White | 28-09-1970 | It's the: ZX81 |
| Patrick Green | 17-02-1980 | It's the: Apple |
| Nadine Brown | 20-06-1940 | It's the: Atari |
| Gabby Brown | 17-03-1930 | It's the: ZX Spectrum |
| John Brown | 17-04-1930 | It's the: ZX Spectrum |
| Jordan Blue | 20-12-1970 | It's the: Apple |
| Gabby Blue | 17-11-1314 | It's the: Atari |
| Oleks Blue | 20-04-1960 | It's the: BBC Micro |
| David Blue | 17-08-1314 | It's the: Commodore |
| Gabby Green | 28-06-1950 | It's the: Acorn |
| Jordan Blue | 28-09-1980 | It's the: Commodore |
| Oleks White | 17-06-1314 | It's the: Apple |
| Jordan White | 17-07-2000 | It's the: Amstrad |
| Jordan Brown | 28-07-2000 | It's the: Amstrad |
| Jordan Grey | 20-12-1314 | It's the: ZX Spectrum |
| Oleks Brown | 17-03-1970 | It's the: Atari |
| Gabby White | 17-05-1950 | It's the: Apple |
| Oleks Blue | 20-06-1314 | It's the: Commodore |
| Jordan Brown | 20-04-1930 | It's the: Acorn |
| Jane Black | 28-08-1970 | It's the: Acorn |
| Patrick White | 28-06-1950 | It's the: ZX Spectrum |
| David Blue | 28-08-1980 | It's the: Apple |
| Jane Black | 28-02-1930 | It's the: Amstrad |
| David Black | 28-08-1960 | It's the: ZX Spectrum |
| Oleks White | 28-02-1940 | It's the: Amstrad |
| Nico Green | 28-02-1930 | It's the: ZX81 |
| Patrick Green | 28-04-1940 | It's the: ZX Spectrum |
| Jane Blue | 20-07-1990 | It's the: Apple |
| John White | 20-10-1990 | It's the: ZX Spectrum |
| John Black | 28-10-1960 | It's the: Commodore |
| Gabby Green | 17-03-1980 | It's the: ZX81 |
| Nadine Green | 28-10-1960 | It's the: Amstrad |
| Patrick Green | 17-02-1960 | It's the: Atari |
| Patrick Brown | 17-05-1314 | It's the: Commodore |
| Patrick Brown | 20-06-1980 | It's the: Atari |
| David White | 28-10-1314 | It's the: Atari |
| Nico Grey | 17-04-1990 | It's the: BBC Micro |
| David Brown | 17-12-1990 | It's the: Apple |
| Jane Green | 17-08-1950 | It's the: Amstrad |
| John Black | 20-07-1960 | It's the: Commodore |
| Jordan Blue | 28-11-1940 | It's the: Amstrad |
| David Green | 17-12-1980 | It's the: Acorn |
| Nadine Brown | 28-01-1950 | It's the: BBC Micro |
| Jane Green | 20-09-1990 | It's the: BBC Micro |
| Gabby White | 20-02-1940 | It's the: Atari |
| David Grey | 17-02-1990 | It's the: ZX81 |
| Nico Grey | 17-11-2000 | It's the: ZX Spectrum |
| David Blue | 20-10-1980 | It's the: ZX81 |
| Jordan Grey | 28-03-1314 | It's the: ZX81 |
| Nadine Black | 17-05-1930 | It's the: Amstrad |
| Gabby Brown | 28-08-1980 | It's the: BBC Micro |
| David Blue | 20-02-1950 | It's the: Acorn |
| Gabby Blue | 28-06-1950 | It's the: ZX81 |
| John Brown | 28-06-1930 | It's the: Apple |
| Jane White | 17-06-1930 | It's the: Atari |
| Gabby Blue | 17-05-1990 | It's the: Commodore |
| David Black | 17-04-1970 | It's the: ZX81 |
| John Blue | 17-07-1950 | It's the: Amstrad |
| Nadine White | 20-07-1990 | It's the: ZX81 |
| Jordan Green | 20-11-1990 | It's the: Apple |
| Nadine Green | 17-01-1950 | It's the: Acorn |
| David White | 28-07-1950 | It's the: Atari |
| David Black | 20-11-1960 | It's the: Amstrad |
| John Green | 20-03-1314 | It's the: Atari |
| Gabby Blue | 28-09-2000 | It's the: Acorn |
| Jane Grey | 17-10-1950 | It's the: Atari |
| John White | 17-12-2000 | It's the: BBC Micro |
| John Brown | 17-02-1314 | It's the: Apple |
| Oleks Blue | 28-05-1950 | It's the: BBC Micro |
| Nico White | 20-10-1990 | It's the: Amstrad |
| Jordan Blue | 17-01-2000 | It's the: Atari |
| John Blue | 20-03-1960 | It's the: Atari |
| Patrick Brown | 28-11-1314 | It's the: Atari |
| John Brown | 20-05-1930 | It's the: Atari |
| Patrick White | 20-12-2000 | It's the: Apple |
| Nico Blue | 17-12-1970 | It's the: Acorn |
| John Blue | 28-04-1930 | It's the: Apple |
| Jane Brown | 20-07-1950 | It's the: Apple |
| Nico Grey | 28-09-1940 | It's the: ZX Spectrum |
| John Green | 20-10-1930 | It's the: Amstrad |
| Jane Blue | 17-04-1990 | It's the: ZX Spectrum |
| Nico White | 28-02-2000 | It's the: Apple |
| Nadine White | 17-06-1990 | It's the: Atari |
| Gabby Brown | 17-04-1930 | It's the: BBC Micro |
| Nico Brown | 28-03-1940 | It's the: Apple |
| Jordan Blue | 20-05-1950 | It's the: BBC Micro |
| Jane White | 28-01-1940 | It's the: Apple |
| Nadine Brown | 17-05-1990 | It's the: ZX Spectrum |
| Patrick White | 20-09-1314 | It's the: Commodore |
| Oleks White | 20-03-1990 | It's the: ZX Spectrum |
| David White | 20-01-2000 | It's the: ZX Spectrum |
| Gabby Black | 17-03-2000 | It's the: Commodore |
| David Brown | 17-09-1980 | It's the: Acorn |
| Jane White | 20-05-1980 | It's the: ZX Spectrum |
| Gabby Green | 17-10-1930 | It's the: Atari |
| Jane Black | 20-08-2000 | It's the: Acorn |
| Jane White | 28-11-2000 | It's the: Commodore |
| Jane Black | 28-07-1990 | It's the: Atari |
| Patrick Brown | 17-06-1980 | It's the: Apple |
| Jordan Grey | 28-09-1950 | It's the: ZX81 |
| Nico Brown | 28-02-1990 | It's the: Commodore |
| Jane White | 17-05-1314 | It's the: Acorn |
| Nadine Grey | 20-12-2000 | It's the: ZX81 |
| David Grey | 28-03-1970 | It's the: Amstrad |
| Nadine Blue | 17-02-1930 | It's the: BBC Micro |
| Oleks Grey | 17-04-1990 | It's the: Apple |
| Nadine Blue | 28-04-2000 | It's the: Atari |
| Patrick Green | 17-05-1990 | It's the: ZX81 |
| Jordan Grey | 20-05-1980 | It's the: Commodore |
| Jordan Grey | 28-03-2000 | It's the: Atari |
| Oleks Blue | 17-03-1960 | It's the: ZX Spectrum |
| Nadine Grey | 28-06-1980 | It's the: ZX Spectrum |
| Nadine Brown | 17-07-1980 | It's the: ZX Spectrum |
| Oleks Black | 28-06-1940 | It's the: BBC Micro |
| David Blue | 28-05-1940 | It's the: Atari |
| John White | 20-02-1970 | It's the: Amstrad |
| Nico Blue | 17-08-1940 | It's the: Atari |
| Jane White | 17-08-1930 | It's the: Amstrad |
| Nico Blue | 17-09-1960 | It's the: ZX Spectrum |
| Jane Grey | 28-06-1960 | It's the: Acorn |
| Nico Brown | 28-01-1980 | It's the: Acorn |
| Gabby Green | 28-02-1960 | It's the: Atari |
| Gabby Black | 28-12-1314 | It's the: Commodore |
| Oleks Grey | 20-02-1950 | It's the: Atari |
| Patrick Grey | 20-02-1314 | It's the: Apple |
| Jordan Green | 20-01-1930 | It's the: Apple |
| Patrick Green | 17-04-1980 | It's the: ZX81 |
| David Green | 20-01-1990 | It's the: Atari |
| David Green | 28-04-1960 | It's the: Apple |
| Gabby White | 28-02-1980 | It's the: Atari |
| Patrick Blue | 20-03-1970 | It's the: Apple |
| Jordan Green | 20-05-1940 | It's the: Amstrad |
| Jane Black | 20-05-1950 | It's the: BBC Micro |
| John Black | 20-10-1950 | It's the: ZX Spectrum |
| Nico White | 20-09-2000 | It's the: ZX81 |
| Gabby Green | 28-07-1950 | It's the: BBC Micro |
| John Brown | 17-01-1980 | It's the: Atari |
| David Blue | 28-01-1950 | It's the: ZX81 |
| David Brown | 17-03-1930 | It's the: Amstrad |
| Jane White | 28-01-2000 | It's the: BBC Micro |
| Nadine Grey | 28-07-1970 | It's the: BBC Micro |
| Nadine Green | 28-03-1970 | It's the: BBC Micro |
| John Brown | 17-08-1980 | It's the: Amstrad |
| Jane Blue | 28-02-1930 | It's the: ZX81 |
| Jordan Grey | 17-04-1980 | It's the: Apple |
| Patrick Black | 17-04-1930 | It's the: Acorn |
| Nadine Black | 17-04-1960 | It's the: Amstrad |
| Nadine Green | 20-07-1950 | It's the: Commodore |
| Nico Brown | 28-03-1990 | It's the: BBC Micro |
| Jordan Grey | 28-04-1314 | It's the: Atari |
| Nico Green | 28-10-2000 | It's the: Amstrad |
| David Brown | 28-08-1940 | It's the: Apple |
| Nadine Grey | 20-11-1990 | It's the: ZX Spectrum |
| Jordan White | 17-04-1314 | It's the: Commodore |
| David Black | 28-09-1950 | It's the: Acorn |
| John Grey | 17-04-1990 | It's the: BBC Micro |
| John White | 17-04-1950 | It's the: Apple |
| Jane White | 20-01-1990 | It's the: Commodore |
| Gabby Black | 20-04-1970 | It's the: Commodore |
| Patrick Blue | 28-08-2000 | It's the: Acorn |
| Patrick Green | 17-02-1950 | It's the: Amstrad |
| Jordan Grey | 28-12-1990 | It's the: BBC Micro |
| John Green | 28-12-1970 | It's the: Commodore |
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)