Skip to content

Commit f7b9b46

Browse files
sysadevsysadev
committed
v0.1.0
0 parents  commit f7b9b46

28 files changed

+6122
-0
lines changed

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2022 Shoaiyb Sysa
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<img src="https://sysacss.pages.dev/media/logo-inline-trans.png" alt="SysaCSS" width="70%">
2+
3+
# SysaCSS
4+
5+
![npm-v](https://img.shields.io/npm/v/sysacss)
6+
![npm-l](https://img.shields.io/npm/l/sysacss)
7+
![npm-d](https://img.shields.io/npm/dm/sysacss)
8+
![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/sysacss)
9+
10+
Free And Open Source Responsive Modern CSS Framework.
11+
12+
## CSS Only
13+
SysaCSS is a lightweight, responsive and modern pure CSS framework. It was meant to be just plug-n-play.
14+
15+
## Installation
16+
17+
### NPM
18+
19+
```bash
20+
npm install sysacss
21+
```
22+
23+
### CDN
24+
25+
```html
26+
<!-- Unpkg -->
27+
<link rel="stylesheet" href="https://unpkg.com/sysacss" />
28+
```
29+
30+
```html
31+
<!-- jsDelivr -->
32+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/shoaiyb/sysacss/sysa.css" />
33+
```
34+
35+
36+
## Features
37+
38+
- Normalized by default.
39+
- It's lightweight ~8KB (gzipped).
40+
- No preprocessor, just plug-n-play.
41+
- A responsive grid to make mobile-friendly sites.
42+
- No conflicts with other used frameworks, all classes start with the `ss-` prefix.
43+
- It's modular, import what you need.
44+
45+
## Browsers support
46+
47+
- Chrome
48+
- Edge
49+
- Firefox ESR+
50+
- Internet Explorer 10+
51+
- Opera
52+
- Safari 8+
53+
54+
55+
## Documentation
56+
Browse the [online documentation](https://sysacss.pages.dev/).
57+
58+
59+
## Contribute
60+
Feel free to fork, tweak and send me a pull request.

‎css/alert.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/*! sysacss v0.1.0 | MIT License | github.com/shoaiyb/sysacss */
2+
3+
.ss-alert {
4+
margin: 0 0 1.5em;
5+
padding: 1em 1.5em;
6+
border-left: 5px solid #212529;
7+
border-radius: 6px;
8+
background: #fff;
9+
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
10+
}
11+
12+
.ss-alert.ss-success {
13+
border-color: #10b981!important;
14+
}
15+
16+
.ss-alert.ss-info {
17+
border-color: #3b82f6!important;
18+
}
19+
20+
.ss-alert.ss-warning {
21+
border-color: #f59e0b!important;
22+
}
23+
24+
.ss-alert.ss-error {
25+
border-color: #ef4444!important;
26+
}

‎css/animation.css‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
/*! sysacss v0.1.0 | MIT License | github.com/shoaiyb/sysacss */
2+
3+
.ss-ripple {
4+
transition: opacity 0s;
5+
}
6+
7+
.ss-ripple:active {
8+
opacity: 0.5;
9+
}
10+
11+
.ss-anim-top {
12+
position: relative;
13+
animation: anim-top 0.4s;
14+
}
15+
16+
@keyframes anim-top {
17+
from {
18+
top: -300px;
19+
opacity: 0;
20+
}
21+
22+
to {
23+
top: 0;
24+
opacity: 1;
25+
}
26+
}
27+
28+
.ss-anim-bottom {
29+
position: relative;
30+
animation: anim-bottom 0.4s;
31+
}
32+
33+
@keyframes anim-bottom {
34+
from {
35+
bottom: -300px;
36+
opacity: 0;
37+
}
38+
39+
to {
40+
bottom: 0;
41+
opacity: 1;
42+
}
43+
}
44+
45+
.ss-anim-left {
46+
position: relative;
47+
animation: anim-left 0.4s;
48+
}
49+
50+
@keyframes anim-left {
51+
from {
52+
left: -300px;
53+
opacity: 0;
54+
}
55+
56+
to {
57+
left: 0;
58+
opacity: 1;
59+
}
60+
}
61+
62+
.ss-anim-right {
63+
position: relative;
64+
animation: anim-right 0.4s;
65+
}
66+
67+
@keyframes anim-right {
68+
from {
69+
right: -300px;
70+
opacity: 0;
71+
}
72+
73+
to {
74+
right: 0;
75+
opacity: 1;
76+
}
77+
}
78+
79+
.ss-anim-zoom {
80+
animation: anim-zoom 0.9s;
81+
}
82+
83+
@keyframes anim-zoom {
84+
from {
85+
transform: scale(0);
86+
}
87+
88+
to {
89+
transform: scale(1);
90+
}
91+
}
92+
93+
.ss-anim-kenburns,.ss-hvr-anim-kenburns:hover {
94+
animation: anim-kenburns 2s ease-out both;
95+
}
96+
97+
@keyframes anim-kenburns {
98+
from {
99+
transform: scale(1) translateY(0);
100+
}
101+
102+
to {
103+
transform: scale(1.25) translateY(-15px);
104+
}
105+
}
106+
107+
.ss-anim-ping,.ss-hvr-anim-ping:hover {
108+
animation: anim-ping 2s ease-in-out infinite both;
109+
}
110+
111+
@keyframes anim-ping {
112+
0% {
113+
transform: scale(0.2);
114+
opacity: 0.8;
115+
}
116+
117+
80% {
118+
transform: scale(1.2);
119+
opacity: 0;
120+
}
121+
122+
100% {
123+
transform: scale(2.2);
124+
opacity: 0;
125+
}
126+
}
127+
128+
.ss-anim-opacity {
129+
animation: anim-opac 3s;
130+
}
131+
132+
@keyframes anim-opac {
133+
from {
134+
opacity: 0;
135+
}
136+
137+
to {
138+
opacity: 1;
139+
}
140+
}
141+
142+
.ss-spin,.ss-anim-spin,.ss-hvr-anim-spin:hover {
143+
animation: anim-spin 2s infinite linear;
144+
}
145+
146+
@keyframes anim-spin {
147+
from {
148+
transform: rotate(0deg);
149+
}
150+
151+
to {
152+
transform: rotate(359deg);
153+
}
154+
}
155+
156+
.ss-anim-input {
157+
transition: width 0.4s ease-in-out;
158+
}
159+
160+
.ss-anim-input:focus {
161+
width: 100%!important;
162+
}
163+
164+
.ss-anim-jello,.ss-hvr-anim-jello:hover {
165+
animation: anim-jello 0.9s both;
166+
}
167+
168+
@keyframes anim-jello {
169+
0% {
170+
transform: scale3d(1, 1, 1);
171+
}
172+
173+
30% {
174+
transform: scale3d(1.25, 0.75, 1);
175+
}
176+
177+
40% {
178+
transform: scale3d(0.75, 1.25, 1);
179+
}
180+
181+
50% {
182+
transform: scale3d(1.15, 0.85, 1);
183+
}
184+
185+
65% {
186+
transform: scale3d(0.95, 1.05, 1);
187+
}
188+
189+
75% {
190+
transform: scale3d(1.05, 0.95, 1);
191+
}
192+
193+
100% {
194+
transform: scale3d(1, 1, 1);
195+
}
196+
}

‎css/badge.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/*! sysacss v1.0.0 | MIT License | github.com/shoaiyb/sysacss */
2+
3+
.ss-badge,.ss-tag {
4+
color: #fff;
5+
background-color: #000;
6+
display: inline-block;
7+
padding-left: 8px;
8+
padding-right: 8px;
9+
text-align: center;
10+
}
11+
12+
.ss-badge {
13+
border-radius: 50%;
14+
}

0 commit comments

Comments
 (0)