Skip to content

Commit 70e6fb6

Browse files
FakeAlekFakeAlek
committed
Update
1 parent aca1be0 commit 70e6fb6

7 files changed

Lines changed: 132 additions & 22 deletions

File tree

‎README.md‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
# gunesCSS
22
<img src="https://i.ibb.co/mC9qWsBC/GunesCSS.png" width = 150 alt="logo" align="right"/>
33

4-
**Version: 1.1.0 Beta**
5-
64
**gunesCSS** is a modular CSS library featuring utility classes, customizable components, and lightweight animations. It's ideal for rapid frontend prototyping or as a foundation for your own CSS framework.
75

86
## ✨ Features
97

8+
### 🧾 Base Elements (`main.css`)
9+
- Consistent styling for:
10+
- **Text** (sizes, colors, outline)
11+
- **Links**
12+
- **Inputs**
13+
1014
### 🧩 Utilities
1115
- **Colors** (`colors.css`): `--blue`, `--green-light`, `--white-smoke`
1216
- **Spacing** (`spacing.css`): `.m10`, `.p50`, `.mx`, `px`
@@ -17,17 +21,14 @@
1721
- `.bounce`, `.bounceInf`
1822
- `.float1`, `.float2`
1923
- `.rainbow`
20-
- `.float`
2124

2225
### 🖱️ Button Styles (`buttons.css`)
2326
- `.BTN3d`, `.BTNglow`, `.BTNglass`, `.BTNpulse`
2427
- Includes hover and active effects
2528

26-
### 🧾 Base Elements (`main.css`)
27-
- Consistent styling for:
28-
- **Text** (sizes, colors, outline)
29-
- **Links**
30-
- **Inputs**
29+
### 🃏 Card Styles (`card.css`)
30+
- `.CARD`, `.CARDglow`, `.BTNglass`, `.CARDpulse`
31+
- Includes active effects
3132

3233
---
3334

@@ -44,6 +45,7 @@
4445

4546
<!-- Components -->
4647
<link rel="stylesheet" href="./components/button.css" />
48+
<link rel="stylesheet" href="./components/card.css" />
4749

4850
<!-- Animations -->
4951
<link rel="stylesheet" href="./animations/fade.css" />
@@ -55,6 +57,4 @@
5557
**OR**
5658

5759
```css
58-
@import url('../animations/fade.css');
59-
60-
@import url('../folder/data.css');
60+
@import url('../folder/data.css');

‎components/button.css‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
@import url('../utilities/color.css');
21
@import url('../css/main.css');
32

43
/* Colors can be adapted yourself! */
54

5+
* {
6+
font-family: var(--font-base);
7+
}
8+
69
/* ----3d Button---- */
710
.BTN3d {
8-
font-family: var(--font-base);
911
display: inline-block;
1012
margin: 0 8px;
1113
padding: 10px 16px;
@@ -27,7 +29,6 @@
2729
/* ----Glow Button---- */
2830

2931
.BTNglow {
30-
font-family: var(--font-base);
3132
color: var(--white);
3233
background-color: var(--red-fire-engine);
3334
box-shadow: 0px 0px 20px var(--red-fire-engine);
@@ -48,7 +49,6 @@
4849

4950
/* ----Glass Button---- */
5051
.BTNglass {
51-
font-family: var(--font-base);
5252
color: var(--white);
5353
padding: 10px;
5454
background: rgba(255, 255, 255, 0.2);
@@ -62,7 +62,6 @@
6262

6363
/* Pulse Button from Uiverse.io by niat786 */
6464
.BTNpulse {
65-
font-family: var(--font-base);
6665
border: none;
6766
color: #fff;
6867
background-image: linear-gradient(30deg, #0400ff, #4ce3f7);
@@ -82,7 +81,7 @@
8281

8382
@keyframes pulse512 {
8483
0% {
85-
box-shadow: 0 0 0 0 #05bada66;
84+
box-shadow: 0 0 0 0 var(--blue-air-force);
8685
}
8786

8887
70% {

‎components/card.css‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
@import url('../css/main.css');
2+
3+
* {
4+
font-family: var(--font-base);
5+
}
6+
7+
/* ----Easy---- */
8+
.CARD {
9+
text-align: left;
10+
color: var(--white);
11+
background-color: rgba(0, 0, 0, 0.5);
12+
border-radius: 5px;
13+
padding: 50px;
14+
margin: 5px 0 5px 0;
15+
line-height: 1.5;
16+
}
17+
18+
.CARD.center {
19+
text-align: center;
20+
}
21+
22+
.CARD.right {
23+
text-align: right;
24+
}
25+
26+
/* ----Glow Button---- */
27+
.CARDglow {
28+
color: var(--white);
29+
background-color: var(--red-fire-engine);
30+
box-shadow: 0px 0px 20px var(--red-fire-engine);
31+
outline: none;
32+
border: none;
33+
border-radius: 10px;
34+
padding: 10px;
35+
padding: 50px;
36+
margin: 5px 0 5px 0;
37+
line-height: 1.5;
38+
}
39+
40+
/* ----Glass Card---- */
41+
.CARDglass {
42+
text-align: left;
43+
color: var(--white);
44+
padding: 10px;
45+
background: rgba(255, 255, 255, 0.2);
46+
border-radius: 20px;
47+
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
48+
backdrop-filter: blur(5px);
49+
-webkit-backdrop-filter: blur(5px);
50+
border: 1px solid rgba(255, 255, 255, 0.3);
51+
padding: 50px;
52+
margin: 5px 0 5px 0;
53+
line-height: 1.5;
54+
}
55+
56+
/* Pulse Button from Uiverse.io by niat786 */
57+
.CARDpulse {
58+
border: none;
59+
color: #fff;
60+
background-color: var(--blue-air-force);
61+
border-radius: 20px;
62+
background-size: 100% auto;
63+
font-size: 17px;
64+
padding: 0.6em 1.5em;
65+
background-position: right center;
66+
background-size: 200% auto;
67+
-webkit-animation: pulse 2s infinite;
68+
animation: cardpulse512 1.5s infinite;
69+
}
70+
71+
@keyframes cardpulse512 {
72+
0% {
73+
box-shadow: 0 0 0 0 var(--blue-air-force);
74+
}
75+
76+
70% {
77+
box-shadow: 0 0 0 10px rgb(218 103 68 / 0%);
78+
}
79+
80+
100% {
81+
box-shadow: 0 0 0 0 rgb(218 103 68 / 0%);
82+
}
83+
}

‎css/main.css‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,19 @@
1-
@import url('../animations/fade.css'); /* <--- This is just an example, there are many more animations */
1+
/* Animations */
2+
@import url('../animations/bounce.css');
3+
@import url('../animations/fade.css');
4+
@import url('../animations/float.css');
5+
@import url('../animations/pulse.css');
6+
@import url('../animations/rainbow.css');
7+
8+
/* Components */
29
@import url('../components/button.css');
10+
@import url('../components/card.css');
311

4-
/* Es geht jetzt auch Online, erwähne es auf GitHub: https://fakealek.github.io/gunesCSS/animations/bounce.css */
12+
/* Utilities */
13+
@import url('../utilities/color.css');
14+
@import url('../utilities/positions.css');
15+
@import url('../utilities/spacing.css');
16+
/* It is now also online, mention it on Github: https://fakealek.github.io/gunesCSS/css/main.css */
517

618
* {
719
margin: 0;

‎docs/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
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+
</head>
8+
<body>
9+
Hello World!
10+
</body>
11+
</html>

‎index.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,27 @@
88
<link rel="stylesheet" href="./css/main.css">
99
</head>
1010
<body>
11-
<h1 class="TXT p25 outline" style="font-size: 70px;">GunesCSS</h1>
11+
<h1 class="TXT outline" style="font-size: 70px;">GunesCSS</h1>
1212
<h2 class="TXT ey">Easy library</h2>
1313
<h3 class="TXT danger">for all</h3>
1414
<h3 class="TXT warn">FREE</h3>
1515
<h3 class="TXT note">This is important!</h3>
1616

1717
<button class="BTNglass">Hello World!</button>
1818
<button class="BTN danger">Delete</button>
19-
<button class="BTN suc">Confirm</button>
19+
<button class="BTNpulse">Confirm</button>
2020

2121
<input type="text" class="IPT" value="My name is Jeff.">
2222
<input type="number" class="IPT" value="0123456789">
2323

24-
<a href="https://www.youtube.com/" class="LIN BTN3d">YouTube</a>
24+
<a href="https://www.youtube.com/" class="LIN">YouTube</a>
2525
<a href="https://www.youtube.com/" class="LIN ey">YouTube</a>
2626
<a href="https://www.youtube.com/" class="LIN warn">YouTube</a>
2727

2828
<div class="logo"></div>
2929
<div class="ad"></div>
30+
31+
<p class="CARDglass">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
32+
<p class="CARDpulse">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
3033
</body>
3134
</html>

‎utilities/spacing.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
/* Margin */
2+
.m05 {margin: 5px;}
23
.m10 {margin: 10px;}
34
.m25 {margin: 25px;}
45
.m50 {margin: 50px;}
@@ -9,6 +10,7 @@
910
.my {margin-top: 100px; margin-bottom: 100px;}
1011

1112
/* Padding */
13+
.p05 {padding: 5px;}
1214
.p10 {padding: 10px;}
1315
.p25 {padding: 25px;}
1416
.p50 {padding: 50px;}

0 commit comments

Comments
 (0)