https://github.com/johndev19/open-source-web-components
Open Source Web Components is a community-driven project aimed at providing a library of reusable, customizable web components - contributions through pull requests.
https://github.com/johndev19/open-source-web-components
contribute contribution first-commit first-contributions pull-request web-development
Last synced: 3 months ago
JSON representation
Open Source Web Components is a community-driven project aimed at providing a library of reusable, customizable web components - contributions through pull requests.
- Host: GitHub
- URL: https://github.com/johndev19/open-source-web-components
- Owner: JohnDev19
- License: mit
- Created: 2024-07-13T23:19:28.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-05T11:14:38.000Z (about 1 year ago)
- Last Synced: 2025-01-30T06:27:33.685Z (8 months ago)
- Topics: contribute, contribution, first-commit, first-contributions, pull-request, web-development
- Language: HTML
- Homepage: https://oswebcomponents.vercel.app/
- Size: 2.57 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
## Translation
[
](https://github.com/JohnDev19/Open-Source-Web-Components/blob/main/README.md) [
](https://github.com/JohnDev19/Open-Source-Web-Components/blob/main/translations/Filipino.md)
-------------
# Open Source Web Components
A collection of simple web components (e.g., buttons, forms, carousels) that beginners can improve or create new components for.
## Table of Contents
- [Introduction](#introduction)
- [Getting Started](#getting-started)
- [Contributing](#contributing)
- [Code of Conduct](#code-of-conduct)
- [License](#license)
## Introduction
Open Source Web Components is a community-driven project aimed at providing a library of reusable, customizable web components - contributions through pull requests. Our goal is to create a learning environment for beginners while also building a resource for developers of all skill levels.
## Getting Started
### Prerequisites
- Basic knowledge of HTML, CSS, and JavaScript
- A modern web browser that supports Web Components (most up-to-date browsers do)
### Installation
1. Clone the repository:
```sh
git clone https://github.com/JohnDev19/open-source-web-components.git
```
2. Navigate to the project directory:
```sh
cd open-source-web-components
```
3. Open the `index.html` file in your browser to see the component showcase.
### Adding New Web Components
To add new web components to the project, follow these steps:
1. Copy the `template.html` file from the root directory:
```sh
cp template.html components/your-component-name.html
```
2. Rename `your-component-name.html` to a unique name that describes your component.
3. 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.
4. 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.
## Contributing
We welcome contributions from developers of all skill levels! Here's how you can contribute:
1. Fork the repository
2. Create a new branch (`git checkout -b feature/new-component`)
3. Make your changes
4. Commit your changes (`git commit -am 'Add a new component'`)
5. Push to the branch (`git push origin feature/new-component`)
6. Create a new Pull Request
For more detailed instructions, please see our [CONTRIBUTING.md](CONTRIBUTING.md) file.
### Ideas for Contributions
- Improve existing components
- Add new features to components
- Create new components
- Improve documentation
- Fix bugs
- Add tests
## Code of Conduct
We are committed to providing a welcoming and inclusive experience for everyone. Please read our [Code of Conduct](CODE_OF_CONDUCT.md) before participating in our community.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.