A collection of simple web components (e.g., buttons, forms, carousels) that beginners can improve or create new components for.
Open Source Web Components is a community-driven project aimed at providing a library of reusable, customizable web components - aimed at fostering contributions through pull requests. Our goal is to create a learning environment for beginners while also building a valuable resource for developers of all skill levels.
- Basic knowledge of HTML, CSS, and JavaScript
- A modern web browser that supports Web Components (most up-to-date browsers do)
-
Clone the repository:
git clone https://github.com/JohnDev19/open-source-web-components.git
-
Navigate to the project directory:
cd open-source-web-components
-
Open the
index.html
file in your browser to see the component showcase.
To add new web components to the project, follow these steps:
-
Copy the
template.html
file from the root directory:cp template.html components/your-component-name.html
-
Rename
your-component-name.html
to a unique name that describes your component. -
Add your HTML, CSS, and JavaScript for the new component within this file. Ensure your CSS and JavaScript are directly included in the template file for ease of use.
-
If your component uses images, add them to the appropriate directory within
assets
(e.g.,assets/buttons/buttons-img
for button images) and reference them appropriately in your HTML.
We welcome contributions from developers of all skill levels! Here's how you can contribute:
- Fork the repository
- Create a new branch (
git checkout -b feature/new-component
) - Make your changes
- Commit your changes (
git commit -am 'Add a new component'
) - Push to the branch (
git push origin feature/new-component
) - Create a new Pull Request
For more detailed instructions, please see our CONTRIBUTING.md file.
- Improve existing components
- Add new features to components
- Create new components
- Improve documentation
- Fix bugs
- Add tests
We are committed to providing a welcoming and inclusive experience for everyone. Please read our Code of Conduct before participating in our community.
This project is licensed under the MIT License - see the LICENSE file for details.