bl-css 0.11.0 → 0.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -11
- package/bl.css +32 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,24 +1,29 @@
|
|
|
1
1
|
# bl CSS
|
|
2
|
-
A *lightweight*, **blueviolet**, ***
|
|
2
|
+
A *lightweight*, **blueviolet**, ***ultra lightweight*** CSS framework!
|
|
3
3
|
|
|
4
|
+
bl-css is supposed to be a CSS framework that is Ultra Lightweight, even while being readable!
|
|
5
|
+
Currently its <6KB (Unminified, With Comments, and Readable)! exactly 5.36KB [from tooltilities.com](https://tooltilities.com/toolset/text-size-calculator)
|
|
4
6
|
# 0.11.1 - Release notes(by Dev)
|
|
5
|
-
|
|
7
|
+
A yeah last version was actually 0.11.0, sorry for the error!
|
|
8
|
+
## What's New?
|
|
9
|
+
This is the first *Named* update, the **Link&Button** update!!
|
|
10
|
+
## Classes
|
|
11
|
+
`.link`: Yeah, same thing, but updated to look more modern!
|
|
6
12
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
`.
|
|
10
|
-
|
|
11
|
-
`.
|
|
12
|
-
`.navlinks`: Links on the right of the navbar :D
|
|
13
|
+
`.linkbtn`: DELETED! switch to .btn or .btn2
|
|
14
|
+
|
|
15
|
+
`.btn`: A more themed alternative to .linkbtn
|
|
16
|
+
|
|
17
|
+
`.btn2`: secondary button, based on .btn
|
|
13
18
|
|
|
14
19
|
## [Preview](https://fg-xd.github.io/bl-CSS)
|
|
15
20
|
# How to Change Accent Color?
|
|
16
21
|
To change from the **original** blueviolet theme you have to open the main```bl.css``` file and you can change the following:
|
|
17
22
|
```css
|
|
18
23
|
:root{
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
24
|
+
--_: rgb(/* Your accent's RGB here */);
|
|
25
|
+
--_4: rgba(/* Your RGB */, 0.4);
|
|
26
|
+
--_6: rgba(/* Your RGB */, 0.6);
|
|
22
27
|
}
|
|
23
28
|
```
|
|
24
29
|
# Repo
|
|
@@ -26,6 +31,32 @@ The bl-css repo is on [GitHub](https://github.com/fg-xd/bl-CSS)
|
|
|
26
31
|
|
|
27
32
|
You can also make an issue on GitHub to request features
|
|
28
33
|
|
|
34
|
+
# How to use?
|
|
35
|
+
## Plug 'n' Play (not recommended for big sites)
|
|
36
|
+
Add this to your HTML for the latest&greatest version:
|
|
37
|
+
```html
|
|
38
|
+
<link rel='stylesheet' href='https://esm.sh/bl-css' />
|
|
39
|
+
```
|
|
40
|
+
Its a very short URL too! (credit to [esm.sh](https://esm.sh))
|
|
41
|
+
|
|
42
|
+
## Download
|
|
43
|
+
### 1. NPM
|
|
44
|
+
This is the most recommended method
|
|
45
|
+
|
|
46
|
+
Run this in your terminal(for latest version):
|
|
47
|
+
```bash
|
|
48
|
+
npm install bl-css
|
|
49
|
+
```
|
|
50
|
+
If you'd want, you can target a specific version:
|
|
51
|
+
```bash
|
|
52
|
+
npm install bl-css@version
|
|
53
|
+
# note: version to be replaced with actual version or the alien will eat bl-css
|
|
54
|
+
```
|
|
55
|
+
### 2. GitHub
|
|
56
|
+
This is not recommended as I most of the time forget to make a release on github T-T
|
|
57
|
+
|
|
58
|
+
Go to the official [GitHub repo releases](https://github.com/fg-xd/bl-CSS/releases) and download a certain version you want.
|
|
59
|
+
|
|
29
60
|
Have a Nice day Using it **:D**
|
|
30
61
|
|
|
31
62
|
Forever Free **:D**
|
package/bl.css
CHANGED
|
@@ -111,35 +111,54 @@ body{
|
|
|
111
111
|
.link{
|
|
112
112
|
display: table;
|
|
113
113
|
font-family: "Cause";
|
|
114
|
-
text-decoration:
|
|
115
|
-
color:
|
|
116
|
-
text-decoration-color: white;
|
|
114
|
+
text-decoration: none;
|
|
115
|
+
color: var(--_);
|
|
117
116
|
transition: 0.1s ease;
|
|
117
|
+
cursor: default;
|
|
118
118
|
}
|
|
119
119
|
.link:hover{
|
|
120
120
|
color: var(--_);
|
|
121
121
|
text-decoration-color: var(--_);
|
|
122
|
+
text-decoration: underline;
|
|
122
123
|
}
|
|
123
|
-
.
|
|
124
|
+
.btn{
|
|
124
125
|
display: table;
|
|
125
|
-
color: white;
|
|
126
126
|
font-family: "Cause";
|
|
127
|
-
padding: 5px;
|
|
128
|
-
border: rgba(128,128,128,0.6) 2px solid;
|
|
129
|
-
background-color: rgba(255,255,255,0.4);
|
|
130
127
|
border-radius: 7px;
|
|
128
|
+
border: 2px solid var(--_);
|
|
129
|
+
background-color: var(--_);
|
|
131
130
|
transform: translateY(0px);
|
|
131
|
+
padding: 5px;
|
|
132
132
|
transition: 0.4s ease;
|
|
133
133
|
}
|
|
134
|
-
.
|
|
135
|
-
color: white;
|
|
134
|
+
.btn:hover{
|
|
136
135
|
transform: translateY(2px);
|
|
137
|
-
border: var(--_6) 2px solid;
|
|
138
136
|
background-color: transparent;
|
|
137
|
+
border: 2px solid var(--_);
|
|
139
138
|
}
|
|
140
|
-
.
|
|
139
|
+
.btn:active{
|
|
141
140
|
transform: translateY(3px);
|
|
142
|
-
color:
|
|
141
|
+
background-color: transparent;
|
|
142
|
+
border: 2px solid var(--_);
|
|
143
|
+
transition: 0.1s ease;
|
|
144
|
+
}
|
|
145
|
+
.btn2{
|
|
146
|
+
display: table;
|
|
147
|
+
font-family: "Cause";
|
|
148
|
+
border-radius: 7px;
|
|
149
|
+
border: 2px solid var(--_);
|
|
150
|
+
background-color: transparent;
|
|
151
|
+
transform: translateY(0px);
|
|
152
|
+
padding: 5px;
|
|
153
|
+
transition: 0.4s ease;
|
|
154
|
+
}
|
|
155
|
+
.btn2:hover{
|
|
156
|
+
transform: translateY(2px);
|
|
157
|
+
background-color: var(--_);
|
|
158
|
+
}
|
|
159
|
+
.btn2:active{
|
|
160
|
+
transform: translateY(3px);
|
|
161
|
+
background-color: var(--_);
|
|
143
162
|
transition: 0.1s ease;
|
|
144
163
|
}
|
|
145
164
|
.card{
|