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 [v1.0.0]
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 [v2.0.0]
Sort your tables!
-
naked-table-stripe-sort [v1.0.0]
If a table has alternating table row colours, when it is filtered, 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 [v2.0.0]
Filter things within a container. Could be a table, could be something else - oooh the mystery oooohh!
-
naked-x-of-x [v1.0.0]
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:
| Nico White | 17-06-2000 | It's the: Atari |
| David Green | 28-05-1990 | It's the: Acorn |
| Jordan Green | 17-05-1980 | It's the: ZX Spectrum |
| David White | 28-02-1940 | It's the: BBC Micro |
| Nadine Grey | 28-05-1980 | It's the: Apple |
| Jane Grey | 20-02-1960 | It's the: Acorn |
| Jordan Blue | 28-04-2000 | It's the: Amstrad |
| Nadine White | 20-06-2000 | It's the: ZX81 |
| Nico Brown | 28-10-1314 | It's the: BBC Micro |
| Oleks Brown | 20-04-1950 | It's the: Commodore |
| Nico Grey | 17-04-1980 | It's the: Amstrad |
| Gabby Green | 17-07-1970 | It's the: ZX81 |
| Nico Blue | 20-04-1930 | It's the: Acorn |
| David Black | 20-07-1930 | It's the: BBC Micro |
| Oleks Grey | 20-01-2000 | It's the: Amstrad |
| Nico Green | 20-02-1980 | It's the: ZX Spectrum |
| Oleks Blue | 17-12-1970 | It's the: ZX81 |
| John Grey | 20-04-2000 | It's the: ZX81 |
| Jane Grey | 20-03-1930 | It's the: Apple |
| John Blue | 17-03-2000 | It's the: BBC Micro |
| Patrick Black | 28-11-1930 | It's the: Amstrad |
| Oleks Black | 28-01-1960 | It's the: Apple |
| David White | 17-04-1960 | It's the: BBC Micro |
| Nico Grey | 28-11-1940 | It's the: Amstrad |
| John Grey | 28-10-1990 | It's the: Acorn |
| Oleks Grey | 28-05-1314 | It's the: BBC Micro |
| Nico Black | 28-07-1960 | It's the: Acorn |
| John Black | 20-01-1930 | It's the: Amstrad |
| Nico Green | 20-08-1980 | It's the: ZX81 |
| Jane Blue | 28-01-1980 | It's the: Apple |
| Jordan Green | 20-03-1940 | It's the: Amstrad |
| Patrick Green | 17-09-1314 | It's the: Commodore |
| Oleks Brown | 17-09-1314 | It's the: ZX Spectrum |
| John Blue | 20-02-1940 | It's the: Atari |
| John Black | 28-06-1960 | It's the: ZX81 |
| Patrick Brown | 17-07-1930 | It's the: Commodore |
| Nico White | 28-01-1960 | It's the: Acorn |
| David Green | 28-07-1970 | It's the: BBC Micro |
| Gabby Black | 28-11-1970 | It's the: BBC Micro |
| David Black | 20-10-1950 | It's the: Amstrad |
| Gabby Grey | 20-10-1980 | It's the: Apple |
| John Blue | 17-08-1950 | It's the: Apple |
| John Black | 20-07-2000 | It's the: ZX Spectrum |
| Gabby Blue | 20-11-1980 | It's the: Commodore |
| Oleks Grey | 17-06-1990 | It's the: Commodore |
| David White | 20-11-1990 | It's the: Acorn |
| Patrick Grey | 20-10-1940 | It's the: BBC Micro |
| Jane Grey | 28-10-1930 | It's the: BBC Micro |
| Jordan Brown | 28-05-1940 | It's the: ZX Spectrum |
| John Blue | 17-07-1940 | It's the: BBC Micro |
| Nico Black | 20-11-1960 | It's the: Acorn |
| Patrick Black | 28-08-1950 | It's the: Commodore |
| Nadine Green | 20-07-1970 | It's the: Apple |
| Jane Green | 28-09-1990 | It's the: Atari |
| Nadine Grey | 20-09-1314 | It's the: ZX Spectrum |
| John Grey | 20-12-1960 | It's the: Commodore |
| Jane Blue | 28-07-1940 | It's the: BBC Micro |
| Jane Grey | 28-07-1950 | It's the: Commodore |
| David White | 20-07-1970 | It's the: ZX81 |
| Patrick Black | 17-09-1940 | It's the: Commodore |
| Patrick Black | 17-07-1314 | It's the: ZX Spectrum |
| Oleks Blue | 28-02-1990 | It's the: Acorn |
| Nadine Blue | 20-11-1940 | It's the: BBC Micro |
| Patrick Green | 17-07-1960 | It's the: ZX Spectrum |
| Jordan Green | 17-02-1940 | It's the: BBC Micro |
| Patrick White | 28-08-1970 | It's the: ZX Spectrum |
| Jordan Brown | 28-10-1980 | It's the: ZX Spectrum |
| Jordan White | 17-10-1930 | It's the: ZX Spectrum |
| David Blue | 20-08-2000 | It's the: Apple |
| John Blue | 20-07-1970 | It's the: ZX Spectrum |
| Gabby Grey | 17-06-1930 | It's the: Atari |
| Jane Black | 17-02-1960 | It's the: Commodore |
| Jordan Green | 28-03-1990 | It's the: BBC Micro |
| John Blue | 20-07-1930 | It's the: Atari |
| John White | 20-07-1314 | It's the: Atari |
| Gabby Black | 20-01-1990 | It's the: Apple |
| Oleks Grey | 20-03-2000 | It's the: Acorn |
| Nico White | 17-10-1960 | It's the: Commodore |
| John Brown | 28-02-1980 | It's the: ZX Spectrum |
| Nico White | 17-05-1940 | It's the: Amstrad |
| Patrick Green | 28-11-1314 | It's the: ZX81 |
| Jordan Blue | 20-08-1970 | It's the: ZX81 |
| Patrick Brown | 17-04-1980 | It's the: Apple |
| Jane Green | 17-05-1980 | It's the: ZX81 |
| Oleks Grey | 17-03-1990 | It's the: Commodore |
| David Green | 20-06-1930 | It's the: Amstrad |
| Nico Grey | 17-07-1930 | It's the: Commodore |
| Nadine Black | 28-03-1950 | It's the: Commodore |
| Nadine Grey | 17-03-1970 | It's the: Amstrad |
| Jordan White | 28-11-1940 | It's the: BBC Micro |
| Jane Black | 20-09-2000 | It's the: ZX Spectrum |
| Jane White | 20-05-1960 | It's the: Acorn |
| Nico Brown | 28-10-1970 | It's the: ZX Spectrum |
| David Brown | 28-11-1950 | It's the: ZX81 |
| Nadine Grey | 17-10-1930 | It's the: ZX Spectrum |
| Jane Grey | 17-03-1990 | It's the: ZX81 |
| Gabby Black | 28-10-2000 | It's the: Amstrad |
| Patrick Black | 20-01-1990 | It's the: Atari |
| David Grey | 20-11-1960 | It's the: Amstrad |
| Jane Brown | 20-06-1980 | It's the: Apple |
| David Blue | 28-12-1970 | It's the: ZX81 |
| Oleks Grey | 17-07-1970 | It's the: Apple |
| Patrick Green | 28-12-1990 | It's the: Apple |
| Nico White | 17-10-1930 | It's the: BBC Micro |
| Nadine White | 20-07-1314 | It's the: Amstrad |
| Jordan Black | 28-07-1940 | It's the: Commodore |
| Oleks Black | 17-08-1950 | It's the: Acorn |
| Jane Black | 17-12-1930 | It's the: Acorn |
| Nico White | 20-11-1930 | It's the: Acorn |
| Oleks Green | 20-05-1970 | It's the: BBC Micro |
| Oleks Black | 28-03-1930 | It's the: Amstrad |
| Patrick Green | 20-12-1990 | It's the: Amstrad |
| Jordan Grey | 20-07-2000 | It's the: BBC Micro |
| John Blue | 28-10-1314 | It's the: ZX81 |
| Patrick White | 28-07-1970 | It's the: ZX Spectrum |
| Nico Black | 28-07-1940 | It's the: Commodore |
| Patrick White | 20-10-1990 | It's the: Commodore |
| Nico Brown | 17-04-1990 | It's the: Acorn |
| Patrick Blue | 17-02-1930 | It's the: Atari |
| Jane Blue | 17-04-1314 | It's the: BBC Micro |
| David Brown | 28-05-2000 | It's the: ZX81 |
| Jordan Blue | 17-12-1960 | It's the: BBC Micro |
| Jordan Grey | 20-02-1930 | It's the: Amstrad |
| Jane Grey | 17-12-1940 | It's the: Atari |
| Patrick Black | 28-12-1930 | It's the: Amstrad |
| Jordan Green | 20-11-1960 | It's the: Commodore |
| Nadine Blue | 20-09-1930 | It's the: ZX Spectrum |
| Nico Grey | 20-12-1314 | It's the: Commodore |
| Oleks White | 17-11-1990 | It's the: ZX81 |
| Nadine Blue | 20-10-1930 | It's the: Amstrad |
| Jane Blue | 20-04-1970 | It's the: Commodore |
| Patrick Blue | 28-01-1990 | It's the: Atari |
| Jordan Black | 28-12-1960 | It's the: Commodore |
| Nadine Blue | 20-02-1930 | It's the: Apple |
| John Grey | 20-01-2000 | It's the: Commodore |
| Jane Grey | 20-05-1930 | It's the: Atari |
| Patrick Grey | 28-04-1990 | It's the: BBC Micro |
| Jane Green | 20-01-1930 | It's the: Apple |
| Nico White | 17-06-1980 | It's the: Atari |
| Gabby Black | 20-02-2000 | It's the: BBC Micro |
| Gabby Black | 28-08-1314 | It's the: BBC Micro |
| Jane Blue | 20-08-1950 | It's the: ZX81 |
| David Blue | 28-04-1990 | It's the: Atari |
| Nico Grey | 20-05-1940 | It's the: Acorn |
| David White | 20-11-1930 | It's the: ZX Spectrum |
| Nadine Green | 17-09-1950 | It's the: BBC Micro |
| Nico Blue | 20-02-1980 | It's the: Apple |
| Jane Green | 20-07-1990 | It's the: Acorn |
| Nadine Brown | 28-01-1930 | It's the: Apple |
| Oleks Green | 17-09-1970 | It's the: BBC Micro |
| Patrick Black | 28-04-1960 | It's the: Atari |
| Gabby Green | 20-02-1960 | It's the: Atari |
| Jane Blue | 20-01-1970 | It's the: Amstrad |
| Jane Black | 28-06-1980 | It's the: BBC Micro |
| Patrick White | 17-09-1960 | It's the: ZX81 |
| Jordan Green | 20-08-1990 | It's the: ZX81 |
| Gabby Grey | 20-11-1930 | It's the: Apple |
| Oleks Black | 20-03-1960 | It's the: Commodore |
| Jordan Black | 28-10-1980 | It's the: Apple |
| Gabby Brown | 17-11-1940 | It's the: Atari |
| Nico Brown | 20-08-1970 | It's the: Commodore |
| Jordan Green | 20-06-1314 | It's the: Atari |
| Patrick Black | 28-08-1314 | It's the: Atari |
| Jordan Brown | 28-03-1950 | It's the: BBC Micro |
| Oleks White | 20-02-2000 | It's the: Atari |
| Jordan Blue | 17-09-1314 | It's the: Acorn |
| Jane White | 20-10-1940 | It's the: ZX81 |
| John Grey | 17-04-1970 | It's the: ZX81 |
| Jordan Black | 20-12-1960 | It's the: Apple |
| Jane Black | 17-06-1940 | It's the: ZX Spectrum |
| Nico Blue | 20-06-1980 | It's the: Commodore |
| John Green | 28-10-1970 | It's the: BBC Micro |
| Jane Brown | 28-03-1950 | It's the: ZX Spectrum |
| Nico Grey | 28-09-1940 | It's the: Atari |
| Patrick Brown | 17-12-1990 | It's the: Acorn |
| Nico Grey | 17-02-2000 | It's the: BBC Micro |
| Oleks Blue | 20-10-1940 | It's the: ZX81 |
| John Grey | 17-04-1990 | It's the: Atari |
| David Blue | 17-02-1930 | It's the: ZX Spectrum |
| Jordan White | 28-12-2000 | It's the: BBC Micro |
| John White | 28-07-1960 | It's the: ZX Spectrum |
| John Grey | 28-04-1990 | It's the: Amstrad |
| John Blue | 17-05-1950 | It's the: Commodore |
| Jane Green | 28-07-1930 | It's the: BBC Micro |
| Nico Brown | 28-06-2000 | It's the: ZX81 |
| Nadine Green | 28-09-1980 | It's the: Amstrad |
| Jordan Blue | 17-02-1970 | It's the: BBC Micro |
| Patrick Green | 20-09-1970 | It's the: Acorn |
| Gabby Grey | 28-08-1960 | It's the: Commodore |
| Oleks Blue | 20-07-1930 | It's the: ZX Spectrum |
| David Blue | 28-10-1980 | It's the: Commodore |
| Nico White | 17-12-1950 | It's the: Commodore |
| Jordan Green | 17-12-1990 | It's the: Amstrad |
| Nico Black | 17-04-1970 | It's the: Amstrad |
| Nico Black | 17-10-1990 | It's the: Amstrad |
| Oleks Brown | 17-06-1314 | It's the: Apple |
| John Black | 17-04-1940 | It's the: Atari |
| Oleks Brown | 20-04-1940 | It's the: Apple |
| Oleks Blue | 20-07-1990 | It's the: Acorn |
| Oleks Grey | 28-02-1930 | It's the: Amstrad |
| David Black | 28-06-1970 | It's the: Apple |
| Jane Blue | 17-09-1314 | It's the: BBC Micro |
| John Green | 28-03-2000 | It's the: Acorn |
| David White | 17-01-1930 | It's the: Commodore |
| Jane Blue | 17-09-1950 | It's the: ZX Spectrum |
| Jane Brown | 20-12-2000 | It's the: Commodore |
| David White | 28-06-1960 | It's the: ZX Spectrum |
| Oleks Grey | 28-02-1950 | It's the: BBC Micro |
| Patrick Black | 28-03-1930 | It's the: Atari |
| Patrick Green | 20-01-1930 | It's the: Acorn |
| Gabby White | 20-05-1980 | It's the: Apple |
| John Green | 28-01-1970 | It's the: Atari |
| Patrick White | 28-11-1930 | It's the: Acorn |
| Patrick Grey | 28-05-1930 | It's the: ZX Spectrum |
| Nadine Brown | 20-09-1930 | It's the: Acorn |
| Nadine White | 28-09-1950 | It's the: ZX81 |
| Patrick Blue | 28-03-1930 | It's the: Apple |
| Patrick Brown | 20-10-2000 | It's the: Commodore |
| David Green | 28-06-1970 | It's the: Commodore |
| Nadine Brown | 28-12-1980 | It's the: Acorn |
| Oleks Grey | 20-11-2000 | It's the: ZX Spectrum |
| Jane Blue | 28-10-1314 | It's the: Amstrad |
| Jordan Blue | 20-03-1930 | It's the: Commodore |
| Nadine Green | 17-10-1960 | It's the: Apple |
| Nico Green | 20-01-1990 | It's the: Apple |
| Oleks Green | 17-03-1960 | It's the: Acorn |
| Gabby Black | 17-09-2000 | It's the: Commodore |
| Jane Grey | 20-10-1990 | It's the: Amstrad |
| Gabby Black | 17-07-1970 | It's the: ZX Spectrum |
| Oleks Green | 20-02-1960 | It's the: ZX81 |
| Nadine Grey | 20-07-1970 | It's the: BBC Micro |
| Jordan Blue | 28-08-1960 | It's the: Atari |
| Gabby Brown | 20-10-1980 | It's the: Amstrad |
| John Green | 20-02-1990 | It's the: ZX Spectrum |
| Patrick Grey | 28-04-1960 | It's the: ZX Spectrum |
| Jane Brown | 20-06-1960 | It's the: Atari |
| John White | 20-08-1960 | It's the: Amstrad |
| Jordan Grey | 17-11-1930 | It's the: Amstrad |
| Jane Brown | 28-01-1990 | It's the: Amstrad |
| Gabby Black | 17-05-1930 | It's the: ZX81 |
| Oleks Brown | 28-05-1960 | It's the: Commodore |
| Nadine Grey | 17-01-1940 | It's the: BBC Micro |
| David Blue | 20-12-2000 | It's the: Apple |
| Gabby White | 28-12-1930 | It's the: ZX81 |
| Oleks Black | 17-08-2000 | It's the: ZX81 |
| John Brown | 20-10-1940 | It's the: ZX81 |
| Jane Blue | 20-04-1960 | It's the: Commodore |
| Gabby Blue | 17-12-1314 | It's the: Acorn |
| Oleks Grey | 28-08-1950 | It's the: Apple |
| Gabby Blue | 20-02-1314 | It's the: ZX81 |
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)