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:
| John Brown | 20-03-1930 | It's the: Apple |
| Oleks Green | 20-08-2000 | It's the: ZX81 |
| David Grey | 20-10-2000 | It's the: Acorn |
| Nadine Green | 28-05-1930 | It's the: Acorn |
| Gabby Green | 28-11-1314 | It's the: Commodore |
| David Blue | 28-06-1930 | It's the: ZX Spectrum |
| Gabby White | 28-01-1970 | It's the: Atari |
| Gabby Black | 28-03-1960 | It's the: Amstrad |
| John Green | 28-11-1940 | It's the: Atari |
| David Black | 28-07-1980 | It's the: Acorn |
| Gabby Grey | 20-08-1960 | It's the: Commodore |
| Gabby Black | 17-12-1960 | It's the: BBC Micro |
| Gabby Green | 20-08-1990 | It's the: ZX81 |
| Jordan Blue | 17-08-1980 | It's the: Commodore |
| Nico Blue | 28-10-1980 | It's the: Apple |
| John Brown | 28-07-1930 | It's the: ZX81 |
| Jane Green | 20-04-1990 | It's the: Apple |
| Oleks Blue | 28-03-1960 | It's the: Apple |
| Nadine Black | 17-11-1970 | It's the: BBC Micro |
| David Grey | 20-10-1990 | It's the: Atari |
| Nadine White | 28-08-1990 | It's the: BBC Micro |
| Gabby Black | 20-07-2000 | It's the: Amstrad |
| Jane Green | 20-11-2000 | It's the: Amstrad |
| Nadine Blue | 20-09-1950 | It's the: ZX Spectrum |
| Jane Blue | 17-06-1950 | It's the: BBC Micro |
| Nico Brown | 28-04-1930 | It's the: Commodore |
| Patrick Green | 17-03-1960 | It's the: BBC Micro |
| David Blue | 17-06-1930 | It's the: ZX81 |
| Nadine Brown | 17-05-1970 | It's the: ZX81 |
| David Grey | 28-10-1980 | It's the: Atari |
| Patrick White | 28-01-1950 | It's the: ZX81 |
| Jordan Green | 20-08-1960 | It's the: Apple |
| David Brown | 20-01-1980 | It's the: Acorn |
| Patrick White | 20-02-1970 | It's the: ZX Spectrum |
| David Black | 20-02-1960 | It's the: Apple |
| Gabby Brown | 17-07-2000 | It's the: Commodore |
| Oleks Black | 28-08-1970 | It's the: Apple |
| Jane Black | 17-12-1930 | It's the: Amstrad |
| Oleks Grey | 20-01-1990 | It's the: Commodore |
| Oleks Green | 17-07-1950 | It's the: Amstrad |
| Jordan Grey | 20-07-1930 | It's the: ZX81 |
| Oleks Black | 20-07-1940 | It's the: Commodore |
| Nadine Grey | 28-02-1970 | It's the: BBC Micro |
| Nico Green | 17-02-1930 | It's the: Atari |
| Jordan Brown | 28-08-1960 | It's the: Atari |
| Nadine Brown | 20-04-1960 | It's the: ZX81 |
| John Grey | 20-03-1990 | It's the: Commodore |
| John Green | 20-08-1980 | It's the: BBC Micro |
| Patrick Black | 28-02-1990 | It's the: Apple |
| Jane Green | 28-06-1960 | It's the: ZX81 |
| Nico Grey | 17-04-1980 | It's the: Amstrad |
| David Blue | 28-01-1940 | It's the: Acorn |
| John White | 28-07-1970 | It's the: Atari |
| Nadine Blue | 17-09-1314 | It's the: Atari |
| Patrick Brown | 28-12-1930 | It's the: Amstrad |
| Gabby Green | 20-04-1930 | It's the: ZX81 |
| Gabby White | 20-03-2000 | It's the: Commodore |
| John Blue | 28-04-1930 | It's the: Apple |
| Patrick Brown | 20-12-1314 | It's the: ZX81 |
| Gabby Grey | 28-03-2000 | It's the: ZX Spectrum |
| Jane Black | 20-06-1980 | It's the: Amstrad |
| Nico Blue | 17-04-1950 | It's the: Acorn |
| David Brown | 28-11-1314 | It's the: BBC Micro |
| Jordan Green | 28-06-1930 | It's the: ZX Spectrum |
| Jordan Grey | 20-06-1950 | It's the: Atari |
| Gabby Brown | 17-06-1960 | It's the: Atari |
| John Brown | 28-01-1990 | It's the: Apple |
| Jane Black | 20-10-1960 | It's the: BBC Micro |
| Patrick Green | 17-07-1930 | It's the: Apple |
| Nadine Grey | 20-08-1970 | It's the: Apple |
| Patrick Grey | 17-09-1950 | It's the: ZX Spectrum |
| Jordan Green | 20-12-1940 | It's the: Commodore |
| David Brown | 20-02-1930 | It's the: ZX Spectrum |
| David White | 28-09-1960 | It's the: Commodore |
| Jordan Grey | 28-03-1950 | It's the: BBC Micro |
| Nico Grey | 17-10-1950 | It's the: ZX Spectrum |
| Oleks Black | 20-07-1314 | It's the: Acorn |
| Oleks Black | 17-02-1950 | It's the: BBC Micro |
| David Green | 17-05-1990 | It's the: BBC Micro |
| Nadine Brown | 28-05-1950 | It's the: Amstrad |
| Jane Grey | 28-09-1940 | It's the: BBC Micro |
| Jane Green | 20-01-1314 | It's the: Acorn |
| Nico Brown | 17-11-2000 | It's the: Amstrad |
| Nadine Grey | 20-06-1950 | It's the: BBC Micro |
| Nico Black | 20-01-1980 | It's the: Amstrad |
| Nadine White | 28-06-1950 | It's the: Commodore |
| Gabby White | 20-05-1950 | It's the: Apple |
| Nico Grey | 20-03-1990 | It's the: ZX Spectrum |
| John Grey | 17-01-1940 | It's the: ZX81 |
| Jordan Blue | 20-03-1950 | It's the: Acorn |
| David Green | 20-03-1950 | It's the: BBC Micro |
| David Grey | 28-03-1930 | It's the: Commodore |
| Nadine Black | 28-05-1314 | It's the: Atari |
| Nadine Blue | 28-05-1970 | It's the: ZX Spectrum |
| Nadine Blue | 17-11-1980 | It's the: Atari |
| John Blue | 28-02-1930 | It's the: Apple |
| Jane Grey | 17-01-1980 | It's the: Amstrad |
| Oleks Green | 17-09-1314 | It's the: Apple |
| Jordan Brown | 17-02-1990 | It's the: Amstrad |
| John White | 17-04-1980 | It's the: Acorn |
| David Black | 17-08-1960 | It's the: Apple |
| Nico Brown | 20-09-1990 | It's the: Atari |
| Nico White | 28-06-1930 | It's the: ZX81 |
| Gabby Grey | 20-02-1970 | It's the: Commodore |
| Jane Grey | 17-12-1314 | It's the: ZX Spectrum |
| Jordan Grey | 20-11-1930 | It's the: Acorn |
| Nico Green | 28-02-1950 | It's the: Acorn |
| Jordan Black | 20-02-1314 | It's the: Atari |
| Jordan Brown | 20-06-1314 | It's the: ZX Spectrum |
| Oleks White | 17-12-1960 | It's the: Amstrad |
| Oleks White | 17-01-1990 | It's the: Amstrad |
| John White | 28-08-1950 | It's the: BBC Micro |
| Gabby Grey | 28-04-1980 | It's the: Amstrad |
| Jordan Black | 17-11-1960 | It's the: ZX Spectrum |
| Nico Grey | 17-03-1980 | It's the: Apple |
| Oleks Green | 20-04-1950 | It's the: Apple |
| Nadine Brown | 20-07-1960 | It's the: Acorn |
| Nadine Green | 17-10-1970 | It's the: ZX Spectrum |
| Nico Brown | 17-04-1940 | It's the: BBC Micro |
| Jane Green | 17-01-1970 | It's the: Acorn |
| Nico White | 20-08-1990 | It's the: Apple |
| Patrick Grey | 20-12-1980 | It's the: Commodore |
| Oleks Green | 28-10-1960 | It's the: ZX Spectrum |
| Jordan Blue | 28-03-1960 | It's the: Atari |
| Patrick Brown | 20-07-1930 | It's the: ZX81 |
| David Grey | 28-06-1970 | It's the: ZX Spectrum |
| Patrick Green | 28-02-1940 | It's the: ZX81 |
| John Blue | 17-08-1960 | It's the: BBC Micro |
| John Blue | 20-07-1930 | It's the: Commodore |
| Patrick Brown | 28-01-2000 | It's the: ZX Spectrum |
| Jane Blue | 20-11-1314 | It's the: Commodore |
| John Grey | 20-01-1940 | It's the: ZX Spectrum |
| Oleks Blue | 20-02-1980 | It's the: Apple |
| Nico Green | 17-09-1930 | It's the: ZX Spectrum |
| Nico Blue | 20-08-1980 | It's the: Atari |
| Patrick Blue | 28-01-1980 | It's the: Commodore |
| Gabby Blue | 20-08-1980 | It's the: ZX Spectrum |
| Jane Brown | 20-03-1970 | It's the: Amstrad |
| Gabby Brown | 28-02-1980 | It's the: BBC Micro |
| David White | 20-01-1940 | It's the: Apple |
| John Blue | 28-09-2000 | It's the: Atari |
| Gabby Brown | 17-01-1950 | It's the: Atari |
| Jordan Brown | 28-03-1940 | It's the: Apple |
| Gabby Green | 28-08-1960 | It's the: Commodore |
| Jane Grey | 20-12-1314 | It's the: Acorn |
| Jordan Blue | 28-02-1930 | It's the: BBC Micro |
| Jane Brown | 17-10-1960 | It's the: Atari |
| John Black | 28-01-2000 | It's the: Apple |
| Gabby Black | 20-01-1950 | It's the: Commodore |
| Jane White | 20-08-1960 | It's the: Amstrad |
| Gabby Green | 28-01-2000 | It's the: Atari |
| Gabby Green | 28-03-1940 | It's the: Commodore |
| Jane Grey | 20-02-1950 | It's the: Acorn |
| Gabby Grey | 20-09-1960 | It's the: Apple |
| Nico Blue | 20-09-1980 | It's the: BBC Micro |
| Gabby Black | 28-05-1980 | It's the: Commodore |
| John Blue | 20-02-1990 | It's the: Apple |
| Gabby White | 28-11-1960 | It's the: Apple |
| Patrick Black | 17-11-1940 | It's the: Atari |
| Nico White | 28-08-1960 | It's the: ZX81 |
| David Green | 17-04-1960 | It's the: Acorn |
| Patrick White | 17-03-1930 | It's the: ZX Spectrum |
| Nico Black | 28-02-1960 | It's the: ZX81 |
| Nico Brown | 17-02-1950 | It's the: BBC Micro |
| Patrick White | 17-01-2000 | It's the: Commodore |
| Gabby Black | 17-01-1940 | It's the: Acorn |
| Nadine White | 28-04-1960 | It's the: Atari |
| Gabby White | 20-04-2000 | It's the: Amstrad |
| Jane Green | 28-05-1314 | It's the: ZX Spectrum |
| Nico White | 17-06-1970 | It's the: ZX81 |
| Gabby Blue | 17-07-2000 | It's the: Atari |
| Jordan Brown | 17-02-1990 | It's the: Acorn |
| Gabby Blue | 28-01-1960 | It's the: Apple |
| David White | 20-11-1930 | It's the: Acorn |
| Nico Green | 17-06-1930 | It's the: Atari |
| Jane Blue | 28-08-1314 | It's the: BBC Micro |
| Jane Grey | 17-11-1990 | It's the: Acorn |
| Oleks Brown | 17-06-2000 | It's the: ZX81 |
| John Grey | 28-07-1990 | It's the: Apple |
| Gabby Grey | 20-06-2000 | It's the: Amstrad |
| Nico Black | 28-02-1314 | It's the: Amstrad |
| Nadine Blue | 28-09-1314 | It's the: Acorn |
| Oleks Grey | 20-04-1990 | It's the: Commodore |
| Jane Black | 20-04-1314 | It's the: BBC Micro |
| Nico Blue | 17-01-1940 | It's the: Commodore |
| Nadine Black | 28-06-2000 | It's the: Atari |
| David Grey | 20-08-1980 | It's the: BBC Micro |
| Nadine Blue | 28-03-2000 | It's the: ZX81 |
| David Blue | 17-09-2000 | It's the: Atari |
| Nico Grey | 17-03-1314 | It's the: Commodore |
| David Brown | 28-11-1930 | It's the: Atari |
| David Black | 17-09-1940 | It's the: BBC Micro |
| Jane White | 17-06-1960 | It's the: BBC Micro |
| Patrick Brown | 28-05-1930 | It's the: Apple |
| Nadine Brown | 17-11-1990 | It's the: Atari |
| Gabby Black | 28-08-1970 | It's the: Amstrad |
| John Black | 28-12-1960 | It's the: ZX Spectrum |
| David White | 17-01-1314 | It's the: Acorn |
| Oleks White | 17-10-1970 | It's the: Commodore |
| Jane Blue | 17-04-1960 | It's the: Atari |
| Patrick Blue | 17-09-1930 | It's the: Acorn |
| John White | 20-10-2000 | It's the: Commodore |
| David Blue | 28-09-2000 | It's the: Amstrad |
| Gabby Black | 20-05-1314 | It's the: Acorn |
| Oleks Blue | 17-07-1960 | It's the: Acorn |
| Gabby White | 28-08-1990 | It's the: BBC Micro |
| David Grey | 28-11-1930 | It's the: ZX81 |
| Oleks Blue | 17-01-1970 | It's the: ZX81 |
| John Brown | 17-05-1990 | It's the: Commodore |
| Gabby White | 20-08-1950 | It's the: Amstrad |
| Jane Brown | 17-03-1314 | It's the: Acorn |
| Gabby Black | 20-06-1930 | It's the: Commodore |
| Patrick Blue | 17-12-1930 | It's the: Acorn |
| John White | 20-12-1940 | It's the: Commodore |
| David White | 17-06-1940 | It's the: Atari |
| David Blue | 20-10-1314 | It's the: ZX Spectrum |
| Gabby Blue | 20-05-1970 | It's the: Atari |
| Jane Brown | 17-09-1970 | It's the: ZX81 |
| Jane Grey | 17-11-1930 | It's the: ZX Spectrum |
| John White | 28-08-1970 | It's the: BBC Micro |
| Nico Green | 20-03-1314 | It's the: Apple |
| Gabby Green | 20-01-1950 | It's the: Amstrad |
| Nico Grey | 28-04-1930 | It's the: Apple |
| Nadine Green | 28-06-1960 | It's the: ZX Spectrum |
| Patrick White | 20-01-1980 | It's the: BBC Micro |
| Nadine Black | 28-09-1960 | It's the: ZX81 |
| Nadine White | 17-05-1970 | It's the: ZX81 |
| Nico Black | 28-02-1970 | It's the: ZX Spectrum |
| Nadine Blue | 20-11-1960 | It's the: Apple |
| Gabby Green | 17-07-1990 | It's the: BBC Micro |
| Patrick White | 20-04-1980 | It's the: Commodore |
| Jane Green | 28-04-1960 | It's the: ZX81 |
| David Black | 28-10-1960 | It's the: Amstrad |
| David Black | 20-07-1970 | It's the: ZX Spectrum |
| Nico Brown | 20-06-1980 | It's the: Acorn |
| Jane Blue | 28-12-1940 | It's the: Acorn |
| Oleks Green | 20-09-1980 | It's the: ZX Spectrum |
| Jordan Grey | 20-08-1930 | It's the: Amstrad |
| Nadine Grey | 17-11-1960 | It's the: Atari |
| John Grey | 17-10-1960 | It's the: Apple |
| Jane Green | 17-11-1960 | It's the: Acorn |
| John Grey | 20-01-1980 | It's the: Acorn |
| Nico Green | 20-12-1960 | It's the: Amstrad |
| Oleks Grey | 20-07-2000 | It's the: ZX81 |
| Nico White | 20-04-2000 | It's the: Commodore |
| Jordan White | 20-01-1314 | It's the: Acorn |
| Jordan Grey | 20-01-1940 | It's the: Apple |
| David Black | 20-04-1930 | It's the: Acorn |
| David Black | 28-05-1960 | It's the: BBC Micro |
| Oleks Black | 20-06-2000 | It's the: BBC Micro |
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)