A collection of native web components built on top of web standards with a focus on:
- ๐น Accessibility ๐ Easy to use ๐จ Easy to style
Inspired by https://github.com/thepassle/generic-components
This project started out as
Breeze Components
, then it was renamed toCucumber Components
on Sep 4, 2023. Logo was designed by me withInkscape
based on cucumber icons ideas from https://www.flaticon.com/free-icons/cucumber, logo font isInput Mono
. Reason for renaming is writingcc-button
is a bit easier thanbreeze-button
.
Why build a Web Components collection when there are many battle-tested Web Components collections already?
- A project to dive deep into web accessibility.
- Helps develop a mindset from both component author and component consumer.
- A learning experience and an opportunity to gain a deeper understanding of web components best practices.
- It's fun as you're writing HTML/CSS/JavaScript!
- Vanilla Web Components can take you all the way if you're just building components collection to be consumed by other projects.
- A better way to play around web components specs and trying out new ideas.
- Provide a low barrier for entry, making it easier for developers to contribute to component collections.
- Minimize the bundled size of each component.
- "The beauty of zero-dependencies!" (#UseThePlatform).
git clone https://github.com/heybran/cucumber-components.git
Web Components dev dependencies
npm install
Docs dependencies
cd docs && npm install
Structure:
โโ password-field
โโโ password-field.css
โโโ password-field.html
โโโ password-field.js
4. Add new component to DOCS ./docs/src/components/demo/ComponentPreview.svelte
. This is to import the components codes to render them on the documentation.
const components = [
'button',
'icon',
'option',
'select',
'spinner',
'switch',
'text-field',
'textarea',
'tooltip',
'form-layout',
'password-field',
// new component folder name here
];
5. Create new component documentation page at ./docs/src/pages/components/new-component.md
. (If new component folder name is 'new-component').
e.g.
export const SIDEBAR = [
{ text: "Alert", link: "/components/alert" },
{ text: "Button", link: "/components/button" },
{ text: "Tooltip", link: "/components/tooltip" },
{ text: "Text Field", link: "/components/text-field" },
{ text: "Select", link: "/components/select" },
{ text: "Switch", link: "/components/switch" },
{ text: "Textarea", link: "/components/textarea" },
{ text: "Spinner", link: "/components/spinner" },
// new component item here
];
At the moment, all testing are done manually on the components you add to the documentation page.
cd docs && npm run dev