Skip to content

Commit 7ae91b4

Browse files
Rajkumar-justcoderRajkumar-justcoder
authored
feat: readme.md, added contributing.md, code format, pr template (#113)
* Fix updated readme.md, added contributing.md * Feat: Updated pr template with more clarification * fix: requested changes
1 parent 2074665 commit 7ae91b4

File tree

6 files changed

+301
-113
lines changed

6 files changed

+301
-113
lines changed

Diff for: ‎.github/pull_request_template.md

+13-1
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
1-
## Have you read the Contribution Guidelines? If not, check [README.md](https://github.com/Design-and-Code/css-buttons#some-rules-to-contribute) file first.
1+
> **Note**
2+
> - We strictly follow the Contribution Guideline and expect contributors to follow it as well.
3+
> - If a lot of conflicts/changes are requested in the PR, please open a new PR with the requested changes (either you or we can close the PR).
4+
5+
6+
## Have you read the Contribution Guidelines? If not, check [CONTRIBUTING.md](https://github.com/Design-and-Code/css-buttons/blob/main/CONTRIBUTING.md) file first.
27

38
(Write your answer here.)
49

510
## Description
611

712
(Write your answer here.)
813

14+
## Class Naming Convention for your button
15+
- [ ] Does your html `button` element have class-name like this: `your_github_username-button-index` (example: `rajkumar-justcoder-button-1` ).
16+
917
## Checklist
1018

1119
- [ ] I've read the contribution guidelines.
@@ -16,3 +24,7 @@
1624
## Related Issues
1725

1826
Fixes Issue # (write number after `#`)
27+
28+
29+
## Screenshot
30+
( Add your button screenshot here.)

Diff for: ‎CONTRIBUTING.md

+184
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
# Contributing
2+
3+
Glad to see you want to contribute to this project!
4+
5+
> **Note**
6+
>
7+
> - We donot expect Modified CSS button of existing button.
8+
>
9+
> - Avoid duplicate contributions, please check if a button already exists before contributing.
10+
11+
## Contents
12+
13+
- [Setup this project](#setup-project)
14+
- [Rules to follow when contributing](#some-rules-to-follow-when-contributing)
15+
- [Add your button to this repo](#add-your-button-to-css-buttons)
16+
- [How to ask help?](#where-can-i-go-for-help)
17+
- [Report a bug/feature request](#report-a-bugrequest-a-feature)
18+
19+
---
20+
21+
## Setup Project
22+
23+
To start contributing, follow the below guidelines:
24+
25+
1. Fork [this](https://github.com/Design-and-Code/css-buttons) repository.
26+
27+
2. Clone your forked copy of the project.
28+
29+
```
30+
git clone https://github.com/<your_username>/css-buttons.git
31+
```
32+
33+
3. Navigate to the directory `css-buttons` .
34+
35+
```
36+
cd css-buttons
37+
```
38+
39+
4. Add a reference (remote) to the original repository.
40+
41+
```
42+
git remote add upstream https://github.com/Design-and-Code/css-buttons.git
43+
```
44+
45+
5. Check the remotes for this repository.
46+
47+
```
48+
git remote -v
49+
```
50+
51+
6. Always take a pull from the upstream repository to your main branch to keep it up to date with the main project (updated repository).
52+
53+
```
54+
git pull upstream main
55+
```
56+
57+
7. Create a new branch.
58+
59+
```
60+
git checkout -b <your_branch_name>
61+
```
62+
63+
# Some rules to follow when Contributing:
64+
65+
- Please follow naming convention for button classes. (Eg. yourname-btn-index aka rajkumar-btn-1)
66+
- Do not change default buttons maked with the ` button-def ` class.
67+
- Do not change any code in the `index.html` file except for button section.
68+
- Do not change any code in the `assets` folder.
69+
70+
71+
## Add your button to css-buttons
72+
73+
1. Add your HTML code in the [index.html](https://github.com/Design-and-Code/css-buttons/blob/main/index.html) file.
74+
2. Add your CSS code in the [buttons.css](https://github.com/Design-and-Code/css-buttons/blob/main/buttons/buttons.css) file.
75+
3. Make sure you do not change any other button's code.
76+
4. For naming css classes use the correct naming conventions - eg. yourname-btn-index or btn-yourname-index.
77+
5. When you open the PR, please include a full screenshot.
78+
6. See below demo code to know how to add your button.
79+
80+
#### Demo code
81+
```html
82+
<!-- your-github-username-btn-1 start -->
83+
<div class="button-container">
84+
<!-- add your buttons here, eg.-->
85+
<button class="{your-github-username-btn-index}">
86+
<span class="{your-github-username-btn-index}"> Example Button </span>
87+
</button>
88+
<div class="createdby-section">
89+
Created by
90+
<a href="{your-github-link}">{your-github-username}</a>
91+
</div>
92+
</div>
93+
<!-- your-github-username-btn-1 end -->
94+
```
95+
> So it will look like this
96+
```html
97+
<!-- Rajkumar-justcoder-btn-1 start -->
98+
<div class="button-container">
99+
<!-- add your buttons here, eg.-->
100+
<button class="rajkumar-justcoder-btn-1">
101+
<span class="rajkumar-justcoder-btn-1-span"> Example Button </span>
102+
</button>
103+
<div class="createdby-section">
104+
Created by
105+
<a href="link">Rajkumar-justcoder</a>
106+
</div>
107+
</div>
108+
<!-- Rajkumar-justcoder-btn-1 end -->
109+
110+
```
111+
7. Also if u use any tag like span or div etc then your should have class-name like this: `your_github_username-btn-index-span/text/div` (example: `rajkumar-justcoder-btn-1-span`) as u can see in above given demo code.
112+
8. If using keyframes/animation in css then keyframe name also should be like this: `your_github_username-btn-index-rotate` (example: `rajkumar-justcoder-btn-1-rotate`)
113+
114+
115+
## Push your changes and make a Pull Request
116+
117+
1. Track your changes ✔.
118+
119+
```
120+
git add .
121+
```
122+
123+
2. Commit your changes.
124+
125+
```
126+
git commit -m "Relevant message"
127+
```
128+
129+
3. Push the committed changes in your feature branch to your remote repo.
130+
131+
```
132+
git push -u origin <your_branch_name>
133+
```
134+
135+
4. To create a pull request, click on `Compare & pull requests`.
136+
137+
5. Add appropriate title and description to your pull request explaining your changes and efforts done.
138+
139+
6. Click on `Create pull request`.
140+
141+
7. Voilà! You have made a PR to css-buttons 💥. Wait for your submission to be accepted and your PR to be merged.
142+
143+
144+
## Where can I go for help?
145+
146+
If you need help, you can join our discord server.
147+
148+
<p>
149+
<a href="https://discord.gg/druweDMn3s">
150+
<img alt="Discord" src="https://img.shields.io/badge/Discord-7289DA?style=for-the-badge&logo=discord&logoColor=white">
151+
</a>
152+
</p>
153+
154+
## Report a bug/request a feature
155+
156+
If you find a security vulnerability, do NOT open an issue. [Email](mailto:[email protected]) us instead.
157+
158+
If you find yourself wishing for a feature that doesn't exist in css-buttons, you are probably not alone. Open an issue on our issues list on GitHub which describes
159+
the feature you would like to see, why you need it, and how it should work.
160+
161+
#### Follow these steps to report a bug/request a feature
162+
163+
- Head over to [issues](https://github.com/Design-and-Code/css-buttons/issues) tab.
164+
- Click on `New issue` in top right corner.
165+
- Add appropriate title and description to your issue.
166+
167+
168+
#### Things to keep in mind while reporting a bug
169+
170+
A good bug report shouldn't leave others needing to chase you up for more information.
171+
Please try to be as detailed as possible in your report.
172+
173+
- What is your environment?
174+
- What steps will reproduce the issue?
175+
- What browser(s) and OS experience the problem?
176+
- What would you expect to be the outcome?
177+
- Provide adequate screenshots/log for the bug.
178+
179+
All these details will help developers to fix any potential bugs.
180+
181+
#### Things to keep in mind while creating a feature request
182+
183+
Feature requests are welcome. But take a moment to find out whether your idea fits with the scope and aims of the project.
184+
It's up to you to make a strong case to convince the project's developers of the merits of this feature. Please provide as much detail and context as possible.

Diff for: ‎README.md

+7-20
Original file line numberDiff line numberDiff line change
@@ -16,26 +16,13 @@
1616
- Do not change any code in the `index.html` file except for button section.
1717
- Do not change any code in the `assets` folder.
1818

19-
# How to contribute by adding more buttons
20-
21-
1. Fork the repo and clone it.
22-
2. Add your HTML code in the [index.html](https://github.com/Design-and-Code/css-buttons/blob/main/index.html) file.
23-
3. Add your CSS code in the [buttons.css](https://github.com/Design-and-Code/css-buttons/blob/main/buttons/buttons.css) file.
24-
4. Make sure you do not change any other button's code.
25-
5. For naming css classes use the correct naming conventions - eg. yourname-btn-index or btn-yourname-index.
26-
6. When you open the PR, please include a full screenshot.
27-
28-
#### Demo code
29-
```html
30-
<div class="button-container">
31-
<!-- add your buttons here, eg.-->
32-
<button class="{yourname-button-index}"><span> Example Button </span></button>
33-
<div class="createdby-section">
34-
Created by
35-
<a href="{yourgithublink}">{YOURNAME}</a>
36-
</div>
37-
</div>
38-
```
19+
20+
## Contribution Guidelines 🏗
21+
22+
Want to add your inputs to the repo? We invite you to contribute.
23+
24+
Head to [CONTRIBUTING.md](./CONTRIBUTING.md) to start contributing.
25+
3926

4027
### Folder Structure
4128

Diff for: ‎assets/css/style.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
--forground-main-color: rgb(255 255 255 / 1);
1111
--background-main-color: rgb(0, 0, 0);
1212
--card-border-radius: 30px;
13-
--default-color:rgba(156, 163, 175);
13+
--default-color: rgba(156, 163, 175);
1414
--link-hover-color: rgb(129 120 255 / 1);
1515
--default-link-color: rgb(129 120 255 / 1);
1616
}
@@ -107,7 +107,7 @@ a {
107107

108108

109109
/* footer stat here */
110-
.footer-main{
110+
.footer-main {
111111
margin-top: 2rem;
112112
}
113113

@@ -206,7 +206,7 @@ a {
206206
.socials-span>a:hover {
207207
color: var(--link-hover-color);
208208
transform: scale(1.4);
209-
transition: all 0.3s ease-in-out;
209+
transition: all 0.3s ease-in-out;
210210
}
211211

212212
.socials-span>a:not(:first-child) {

0 commit comments

Comments
 (0)