Skip to content

Commit e4e22e5

Browse files
aayush105aayush105
authored
Merge pull request #256 from muditkashyap/issue/repository-structure-and-code-formatting-254
Basic structure completed and button 2 variants ready
2 parents efe3657 + 5cd115e commit e4e22e5

File tree

3 files changed

+221
-0
lines changed

3 files changed

+221
-0
lines changed

‎V2/assets/css/base.css

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
/*
2+
base.css
3+
Author: Mudit Kashyap (GitHub: @muditkashyap - https://github.com/muditkashyap)
4+
Description: This is the base stylesheet.
5+
It provides foundational styles, color variables, and basic typography settings.
6+
Contact: If you have questions or suggestions regarding this CSS code, please feel free to create an issue or discussion on the project's GitHub repository.
7+
*/
8+
9+
10+
11+
:root {
12+
--primary-color: #007bff;
13+
--secondary-color: #6c757d;
14+
--success-color: #28a745;
15+
--danger-color: #dc3545;
16+
--warning-color: #ffc107;
17+
--info-color: #17a2b8;
18+
--light-color: #f8f9fa;
19+
--dark-color: #343a40;
20+
}
21+
22+
/* Typography */
23+
body {
24+
font-family: Arial, sans-serif;
25+
font-size: 16px;
26+
line-height: 1.6;
27+
}
28+
29+
h1, h2, h3, h4, h5, h6 {
30+
font-weight: bold;
31+
}
32+
33+
p {
34+
margin-bottom: 1rem;
35+
}
36+
37+
/* Basic Styles */
38+
body {
39+
background-color: var(--light-color);
40+
color: #333;
41+
}
42+
43+
header {
44+
background-color: var(--primary-color);
45+
color: #fff;
46+
text-align: center;
47+
padding: 10px;
48+
}
49+
50+
nav {
51+
background-color: var(--dark-color);
52+
color: #fff;
53+
text-align: center;
54+
padding: 10px;
55+
}
56+
57+
main {
58+
margin: 20px;
59+
padding: 20px;
60+
background-color: #fff;
61+
border: 1px solid #ccc;
62+
border-radius: 5px;
63+
}
64+
65+
aside {
66+
background-color: var(--light-color);
67+
padding: 10px;
68+
}
69+
70+
footer {
71+
background-color: var(--dark-color);
72+
color: #fff;
73+
text-align: center;
74+
padding: 10px;
75+
}

‎V2/assets/css/buttons.css

+132
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
/* Base Button Styles */
2+
.button {
3+
display: inline-block;
4+
padding: 10px 20px;
5+
border: none;
6+
border-radius: 4px;
7+
text-align: center;
8+
text-decoration: none;
9+
cursor: pointer;
10+
transition: background-color 0.3s, color 0.3s;
11+
font-weight: bold;
12+
}
13+
14+
/* Primary Button */
15+
.button-primary {
16+
background-color: var(--primary-color);
17+
color: #fff;
18+
}
19+
.button-hover-primary:hover{
20+
background-color: var(--primary-color);
21+
color:#fff;
22+
transition: background-color 0.3s, color 0.3s;
23+
}
24+
25+
/* Secondary Button */
26+
.button-secondary {
27+
background-color: var(--secondary-color);
28+
color: #fff;
29+
}
30+
.button-hover-secondary:hover{
31+
background-color: var(--secondary-color);
32+
color: #fff;
33+
transition: background-color 0.3s, color 0.3s;
34+
}
35+
36+
37+
/* Success Button */
38+
.button-success {
39+
background-color: var(--success-color);
40+
color: #fff;
41+
}
42+
.button-hover-success:hover {
43+
background-color: var(--success-color);
44+
color: #fff;
45+
transition: background-color 0.3s, color 0.3s;
46+
}
47+
48+
/* Danger Button */
49+
.button-danger {
50+
background-color: var(--danger-color);
51+
color: #fff;
52+
}
53+
.button-hover-danger:hover {
54+
background-color: var(--danger-color);
55+
color: #fff;
56+
transition: background-color 0.3s, color 0.3s;
57+
}
58+
59+
/* Warning Button */
60+
.button-warning {
61+
background-color: var(--warning-color);
62+
color: #fff;
63+
}
64+
.button-hover-warning:hover {
65+
background-color: var(--warning-color);
66+
color: #fff;
67+
transition: background-color 0.3s, color 0.3s;
68+
}
69+
70+
/* Info Button */
71+
.button-info {
72+
background-color: var(--info-color);
73+
color: #fff;
74+
}
75+
.button-hover-info:hover{
76+
background-color: var(--info-color);
77+
color: #fff;
78+
transition: background-color 0.3s, color 0.3s;
79+
}
80+
81+
/* Light Button */
82+
.button-light {
83+
background-color: var(--light-color);
84+
color: #333;
85+
}
86+
.button-hover-light:hover {
87+
background-color: var(--light-color);
88+
color: #333;
89+
transition: background-color 0.3s, color 0.3s;
90+
}
91+
92+
/* Dark Button */
93+
.button-dark {
94+
background-color: var(--dark-color);
95+
color: #fff;
96+
}
97+
.button-hover-dark:hover{
98+
background-color: var(--dark-color);
99+
color: #fff;
100+
transition: background-color 0.3s, color 0.3s;
101+
}
102+
103+
104+
/* Guidelines for Variants:
105+
- To create a new button variant, follow these steps:
106+
1. Define a class for the new variant, e.g., .button-new-variant.
107+
2. Use background-color and color properties, maintaining the color format.
108+
3. Ensure that the .button class's base styles are inherited for consistency.
109+
4. Provide a brief description in a comment for the new variant.
110+
*/
111+
112+
/* Example of a Custom Button Variant:
113+
.button-custom-variant {
114+
background-color: var(--primary-color); /* Maintain the color format
115+
color: #fff;
116+
Add any additional styles for the custom variant
117+
}
118+
*/
119+
120+
121+
/* Rounded Button */
122+
.button-rounded{
123+
border-radius: 20px;
124+
}
125+
126+
/* Neon Button */
127+
.button-neon {
128+
background-color: #00ffec;
129+
color: #000;
130+
text-shadow: 0 0 5px rgba(0, 255, 236, 0.5);
131+
box-shadow: 0 0 10px rgba(0, 255, 236, 0.5);
132+
}

‎V2/examples/butons.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
<link rel="stylesheet" href="../assets/css/base.css">
8+
<link rel="stylesheet" href="../assets/css/buttons.css">
9+
</head>
10+
<body>
11+
12+
<button class="button button-rounded button-primary button-hover-danger">Click Here</button>
13+
</body>
14+
</html>

0 commit comments

Comments
 (0)