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