HTML/CSS/JS Web Components

Overview

The goal of this project is to help the beginners with their contributions in Open Source. We aim to achieve this collaboratively, so feel free to contribute in any way you want, just make sure to follow the contribution guidelines. Provide a simple web component like input, title, heading, paragraphs, bottons, image, animation, responsive components, lists, tables, spans, etc.

Implementations ⚙

NOTE: Please attach a screenshot of the template/website/project you are providing.

Quick Start

Follow these steps below to get started with open-source contribution:

• Download Git

  1. Go to this page here and download Git for you device.

• Setup GitHub

  1. Create a GitHub account.

  2. Go to the Issue tab of this repository and find a issue which you can resolve and comment down I want to work in this issue. Please assign me!

  3. Now wait for the assignment of that issue to you. (This will depend on first-come first-server basis). You can also create your own issue and you will be assigned to it as soon as possible.

  4. Fork this repository by clicking on the Fork button at top right of this project's page. After this you will get a repository in your profile with name <YOUR_GITHUB_USERNAME>/web-templates

  5. Clone the forked repository you got by executing this command in terminal (Command Prompt for window users).

     git clone https://github.com/<YOUR_GITHUB_USERNAME>/templates.git
     

     replace <YOUR_GITHUB_USERNAME> with your GitHub's user name and press enter. And you may also be prompted to enter you github's username and password, enter those data and cloning will start. The above step will make a copy of this project in your local device.

  6. Make changes as per required by the issue you are assigned. 7. Run this command to see what changed in the project.

     git status
     

  7. Execute this command to save the changes in that branch.

     git add .
     

  8. Commit the changes (This will make a record that you have changed something in the project).

     git commit -m "what you changed goes here"
     

  9. Run this command to push the code to your forked repository.

     git push
     

     Now upto this point you have downloaded the project, made changed and pushed them to the forked repository. Now the pushed code is in your profile make sure it goes to the main repository. For that create a PR by clicking the Open Pull Request. Whenever you makes changes one more section got shown in the forked repository which says Contribute above the project files list. Click on that and you will see the Open Pull Request.

Hurray! You made your first open-source contribution. Congratulations! Keep It Up!

Code Format

1. Whatever you are implementing let say Button. Create a new folder named Button inside Components/Light Mode.
2. If it is in light mode do the above step index Components/Light Mode/Button folder else Components/Dark Mode/Button folder
3. Add html file - index.html(required), in this folder. Rest you can add more css, js, html files as per your requirements.
4. If your are adding a new website template like a utility website. Then add the whole project under Projects/Light Mode/<Your Project name>/<Your Project's Files>.
5. Same applies for this if the website is in light mode add your code files inside Projects/Light Mode/<Your Project name>/<Your Project's Files> else Projects/Dark Mode/<Your Project name>/<Your Project's Files>.

Implemented Components

✔️ - Done ❌ - Pending (Not Implemented)

Components	Dark Mode	Light Mode
Alert	❌	❌
Autocomplete	❌	❌
Avatars	❌	❌
Badges	❌	❌
Backdrop	❌	❌
Box	❌	❌
Button	❌	❌
Button Group	❌	❌
Checkbox	❌	❌
Chip	❌	❌
Corner Dialog	❌	❌
Dialog	❌	❌
Divider	❌	❌
Filepicker	❌	❌
Form Field	❌	❌
List	❌	❌
Menu	❌	❌
Pagination	❌	❌
Popover	❌	❌
Positioner	❌	❌
Progress	❌	❌
Radio	❌	❌
Rating	❌	❌
Search Input/Box	❌	❌
Select	❌	❌
Select Menu	❌	❌
Side Sheet	❌	❌
Slider	❌	❌
Spinner	❌	❌
Switch	❌	❌
Tab	❌	❌
Table	❌	❌
Tag Input	❌	❌
Text Input	❌	❌
Textarea	❌	❌
Toast	❌	❌
Tolltip	❌	❌

---

Directory Tree 👇🏻

Directory Tree

.
|-- CODE_OF_CONDUCT.md
|-- Components
|   |-- Components.md
|   |-- Dark\ Mode
|   |   `-- Dark\ Mode.md
|   `-- Light\ Mode
|       `-- Light\ Mode.md
|-- LICENSE
|-- Projects
|   |-- Dark\ Mode
|   |   `-- Dark\ Mode.md
|   |-- Light\ Mode
|   |   `-- Light\ Mode.md
|   `-- Projects.md
`-- README.md