@bomberstudios/css-library 1.0.1 → 1.1.2
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/.prettierrc +6 -0
- package/README.md +23 -0
- package/index.css +196 -12
- package/index.html +220 -0
- package/package.json +3 -2
package/.prettierrc
ADDED
package/README.md
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# CSS Library
|
|
2
|
+
|
|
3
|
+
A bunch of CSS styles that I use in my projects.
|
|
4
|
+
|
|
5
|
+
## Demo
|
|
6
|
+
|
|
7
|
+
See the styles in action [here](https://bomberstudios.github.io/css-library/index.html).
|
|
8
|
+
|
|
9
|
+
## Usage
|
|
10
|
+
|
|
11
|
+
In case it wasn't sufficiently clear, please do not use this in any of your projects unless you are me 😅.
|
|
12
|
+
|
|
13
|
+
If you are me:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install @bomberstudios/css-library
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
And then include the styles. For example, in an Astro project you can add this to your base Layout:
|
|
20
|
+
|
|
21
|
+
```jsx
|
|
22
|
+
import '@bomberstudios/css-library/index.css'
|
|
23
|
+
```
|
package/index.css
CHANGED
|
@@ -1,29 +1,213 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
|
|
3
|
-
--
|
|
2
|
+
/* Spacing */
|
|
3
|
+
--gap: 12px;
|
|
4
|
+
--radius-small: 3px;
|
|
5
|
+
--radius: 5px;
|
|
6
|
+
--radius-large: 10px;
|
|
7
|
+
--padding-small: calc(var(--gap) / 2);
|
|
8
|
+
--padding: var(--gap);
|
|
9
|
+
--padding-large: calc(var(--gap) * 1.5);
|
|
10
|
+
|
|
11
|
+
/* Color theme */
|
|
12
|
+
color-scheme: light dark;
|
|
13
|
+
accent-color: var(--brand);
|
|
14
|
+
--brand: light-dark(#f60, #f60);
|
|
15
|
+
--subtle: light-dark(#aaa, #666);
|
|
16
|
+
|
|
17
|
+
/* Typography */
|
|
18
|
+
--font-family: system-ui, sans-serif;
|
|
19
|
+
--font-size: 1rem;
|
|
20
|
+
--line-height: 1.3;
|
|
21
|
+
|
|
22
|
+
/* Visual */
|
|
23
|
+
--shadow-small: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
24
|
+
--shadow-medium: 0 2px calc(var(--gap) / 2) rgba(0, 0, 0, 0.3);
|
|
25
|
+
--shadow-large: 0 5px var(--gap) rgba(0, 0, 0, 0.3);
|
|
26
|
+
--shadow-center: 0 0 var(--gap) rgba(0, 0, 0, 0.3);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* Reset */
|
|
30
|
+
* {
|
|
31
|
+
margin: 0;
|
|
32
|
+
padding: 0;
|
|
33
|
+
list-style: none;
|
|
34
|
+
-webkit-font-smoothing: antialiased;
|
|
35
|
+
box-sizing: border-box;
|
|
36
|
+
outline: none;
|
|
37
|
+
border: none;
|
|
38
|
+
text-decoration: none;
|
|
39
|
+
height: max-content;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
html,
|
|
43
|
+
body {
|
|
44
|
+
height: 100%;
|
|
4
45
|
}
|
|
5
46
|
|
|
47
|
+
body {
|
|
48
|
+
font-family: var(--font-family);
|
|
49
|
+
font-size: var(--font-size);
|
|
50
|
+
display: flex;
|
|
51
|
+
flex-direction: column;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* Layout */
|
|
6
55
|
hstack,
|
|
7
|
-
|
|
56
|
+
vstack {
|
|
8
57
|
display: flex;
|
|
9
|
-
flex-direction: row;
|
|
10
58
|
gap: var(--gap);
|
|
11
59
|
}
|
|
12
60
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
61
|
+
hstack {
|
|
62
|
+
flex-direction: row;
|
|
63
|
+
align-items: center;
|
|
64
|
+
}
|
|
65
|
+
vstack {
|
|
16
66
|
flex-direction: column;
|
|
17
|
-
gap: var(--gap);
|
|
18
67
|
}
|
|
19
68
|
|
|
20
|
-
|
|
21
|
-
|
|
69
|
+
hstack[align='center'],
|
|
70
|
+
vstack[align='center'] {
|
|
71
|
+
justify-content: center;
|
|
72
|
+
}
|
|
73
|
+
hstack[align='right'],
|
|
74
|
+
vstack[align='right'] {
|
|
75
|
+
align-items: end;
|
|
76
|
+
justify-content: flex-end;
|
|
77
|
+
}
|
|
78
|
+
vstack[align='right'] > * {
|
|
79
|
+
width: 100%;
|
|
80
|
+
}
|
|
81
|
+
hstack[align='space-between'],
|
|
82
|
+
vstack[align='space-between'] {
|
|
83
|
+
justify-content: space-between;
|
|
84
|
+
}
|
|
85
|
+
/* TODO: top and bottom alignment */
|
|
86
|
+
|
|
87
|
+
zstack {
|
|
22
88
|
display: grid;
|
|
23
89
|
align-items: center;
|
|
24
90
|
justify-items: center;
|
|
25
91
|
}
|
|
26
|
-
zstack
|
|
27
|
-
|
|
92
|
+
zstack > * {
|
|
93
|
+
display: flex;
|
|
94
|
+
align-items: center;
|
|
95
|
+
justify-content: center;
|
|
28
96
|
grid-area: 1/1/1/1;
|
|
29
97
|
}
|
|
98
|
+
|
|
99
|
+
divider {
|
|
100
|
+
background-color: var(--subtle);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
vstack divider {
|
|
104
|
+
width: 100%;
|
|
105
|
+
height: 1px;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
hstack divider {
|
|
109
|
+
width: 1px;
|
|
110
|
+
height: 100%;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/* Grid */
|
|
114
|
+
.cols-2 {
|
|
115
|
+
display: grid;
|
|
116
|
+
grid-template-columns: 1fr 1fr;
|
|
117
|
+
}
|
|
118
|
+
.cols-4 {
|
|
119
|
+
display: grid;
|
|
120
|
+
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
121
|
+
}
|
|
122
|
+
.cols-6 {
|
|
123
|
+
display: grid;
|
|
124
|
+
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/* Typography */
|
|
128
|
+
h1,
|
|
129
|
+
h2,
|
|
130
|
+
h3,
|
|
131
|
+
h4,
|
|
132
|
+
h5,
|
|
133
|
+
h6 {
|
|
134
|
+
margin: 1em 0 0.5em 0;
|
|
135
|
+
}
|
|
136
|
+
body {
|
|
137
|
+
line-height: var(--line-height);
|
|
138
|
+
}
|
|
139
|
+
a {
|
|
140
|
+
color: var(--brand);
|
|
141
|
+
text-decoration: dotted underline;
|
|
142
|
+
text-decoration-skip-ink: true;
|
|
143
|
+
text-underline-offset: 3px;
|
|
144
|
+
transition: all 0.2s;
|
|
145
|
+
&:hover {
|
|
146
|
+
text-decoration: wavy underline;
|
|
147
|
+
text-underline-offset: 5px;
|
|
148
|
+
text-decoration-thickness: 1px;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
p {
|
|
152
|
+
margin: 0 0 1em 0;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/* UI Elements */
|
|
156
|
+
button,
|
|
157
|
+
.button {
|
|
158
|
+
font-size: var(--font-size);
|
|
159
|
+
background-color: var(--brand);
|
|
160
|
+
color: white;
|
|
161
|
+
cursor: pointer;
|
|
162
|
+
padding: var(--padding) var(--padding-large);
|
|
163
|
+
border-radius: var(--radius);
|
|
164
|
+
transition: all 0.2s;
|
|
165
|
+
&.fit {
|
|
166
|
+
width: fit-content;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
&:hover {
|
|
170
|
+
background-color: lch(from var(--brand) calc(l - 10) c h);
|
|
171
|
+
}
|
|
172
|
+
&:active {
|
|
173
|
+
background-color: lch(from var(--brand) calc(l - 20) c h);
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
card {
|
|
178
|
+
background-color: white;
|
|
179
|
+
border: 1px solid var(--subtle);
|
|
180
|
+
border-radius: var(--radius);
|
|
181
|
+
padding: var(--padding-large);
|
|
182
|
+
box-shadow: var(--shadow-medium);
|
|
183
|
+
transition: all 0.2s;
|
|
184
|
+
&:hover {
|
|
185
|
+
box-shadow: var(--shadow-large);
|
|
186
|
+
}
|
|
187
|
+
h1,
|
|
188
|
+
h2,
|
|
189
|
+
h3,
|
|
190
|
+
h4,
|
|
191
|
+
h5,
|
|
192
|
+
h6 {
|
|
193
|
+
margin: 0;
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
/* Effects */
|
|
198
|
+
.glass {
|
|
199
|
+
background-color: #6666;
|
|
200
|
+
backdrop-filter: blur(20px);
|
|
201
|
+
}
|
|
202
|
+
.shadow {
|
|
203
|
+
box-shadow: var(--shadow-small);
|
|
204
|
+
}
|
|
205
|
+
.shadow-medium {
|
|
206
|
+
box-shadow: var(--shadow-medium);
|
|
207
|
+
}
|
|
208
|
+
.shadow-large {
|
|
209
|
+
box-shadow: var(--shadow-large);
|
|
210
|
+
}
|
|
211
|
+
.shadow-center {
|
|
212
|
+
box-shadow: var(--shadow-center);
|
|
213
|
+
}
|
package/index.html
ADDED
|
@@ -0,0 +1,220 @@
|
|
|
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>CSS Library Demo</title>
|
|
7
|
+
<link rel="stylesheet" href="index.css" />
|
|
8
|
+
<style>
|
|
9
|
+
:root {
|
|
10
|
+
--brand: #3e8fe6;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
body {
|
|
14
|
+
width: 50%;
|
|
15
|
+
margin: 0 auto;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.chip {
|
|
19
|
+
width: 40px;
|
|
20
|
+
height: 40px;
|
|
21
|
+
border-radius: var(--radius);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
footer {
|
|
25
|
+
padding: 50px 0;
|
|
26
|
+
text-align: center;
|
|
27
|
+
color: var(--subtle);
|
|
28
|
+
}
|
|
29
|
+
</style>
|
|
30
|
+
</head>
|
|
31
|
+
|
|
32
|
+
<body>
|
|
33
|
+
<h1>CSS Library Demo</h1>
|
|
34
|
+
|
|
35
|
+
<p>
|
|
36
|
+
This is a collection of utility classes and components that I use in my
|
|
37
|
+
projects. It's a work in progress and I'll keep adding more as I go. Feel
|
|
38
|
+
free to use it in your projects, and if you have any suggestions or
|
|
39
|
+
feedback, please
|
|
40
|
+
<a href="https://github.com/bomberstudios/css-library">let me know</a>!
|
|
41
|
+
</p>
|
|
42
|
+
|
|
43
|
+
<h2>Colors</h2>
|
|
44
|
+
<vstack>
|
|
45
|
+
<hstack align="left">
|
|
46
|
+
<span>--brand</span>
|
|
47
|
+
<div class="chip" style="background-color: var(--brand)"></div>
|
|
48
|
+
</hstack>
|
|
49
|
+
<p>
|
|
50
|
+
This is overridden in this HTML from the default value, which is
|
|
51
|
+
(unsurprisingly) a nice shadow of orange.
|
|
52
|
+
</p>
|
|
53
|
+
<hstack>
|
|
54
|
+
<span>--subtle</span>
|
|
55
|
+
<div class="chip" style="background-color: var(--subtle)"></div>
|
|
56
|
+
</hstack>
|
|
57
|
+
</vstack>
|
|
58
|
+
|
|
59
|
+
<h2>Stacks</h2>
|
|
60
|
+
|
|
61
|
+
<h3>Vertical Stack</h3>
|
|
62
|
+
<vstack>
|
|
63
|
+
<div>Item 1</div>
|
|
64
|
+
<div>Item 2</div>
|
|
65
|
+
<div>Item 3</div>
|
|
66
|
+
</vstack>
|
|
67
|
+
|
|
68
|
+
<h3>Vertical Stack, with dividers</h3>
|
|
69
|
+
<vstack>
|
|
70
|
+
<div>Item 1</div>
|
|
71
|
+
<divider></divider>
|
|
72
|
+
<div>Item 2</div>
|
|
73
|
+
<divider></divider>
|
|
74
|
+
<div>Item 3</div>
|
|
75
|
+
</vstack>
|
|
76
|
+
|
|
77
|
+
<h3>Vertical Stack, align=center</h3>
|
|
78
|
+
<vstack align="center">
|
|
79
|
+
<div>Item 1</div>
|
|
80
|
+
<div>Item 2</div>
|
|
81
|
+
<div>Item 3</div>
|
|
82
|
+
</vstack>
|
|
83
|
+
|
|
84
|
+
<h3>Vertical Stack, align=right</h3>
|
|
85
|
+
<vstack align="right">
|
|
86
|
+
<div>Item 1</div>
|
|
87
|
+
<div>Item 2</div>
|
|
88
|
+
<div>Item 3</div>
|
|
89
|
+
</vstack>
|
|
90
|
+
|
|
91
|
+
<h3>Horizontal Stack</h3>
|
|
92
|
+
<hstack>
|
|
93
|
+
<div>Item 1</div>
|
|
94
|
+
<div>Item 2</div>
|
|
95
|
+
<div>Item 3</div>
|
|
96
|
+
</hstack>
|
|
97
|
+
|
|
98
|
+
<h3>Horizontal Stack, with dividers</h3>
|
|
99
|
+
<hstack>
|
|
100
|
+
<div>Item 1</div>
|
|
101
|
+
<divider></divider>
|
|
102
|
+
<div>Item 2</div>
|
|
103
|
+
<divider></divider>
|
|
104
|
+
<div>Item 3</div>
|
|
105
|
+
</hstack>
|
|
106
|
+
|
|
107
|
+
<h3>Horizontal Stack, align=center</h3>
|
|
108
|
+
<hstack align="center">
|
|
109
|
+
<div>Item 1</div>
|
|
110
|
+
<div>Item 2</div>
|
|
111
|
+
<div>Item 3</div>
|
|
112
|
+
</hstack>
|
|
113
|
+
|
|
114
|
+
<h3>Horizontal Stack, align=right</h3>
|
|
115
|
+
<hstack align=" right">
|
|
116
|
+
<div>Item 1</div>
|
|
117
|
+
<div>Item 2</div>
|
|
118
|
+
<div>Item 3</div>
|
|
119
|
+
</hstack>
|
|
120
|
+
|
|
121
|
+
<h3>Horizontal Stack, align=space-between</h3>
|
|
122
|
+
<hstack align="space-between">
|
|
123
|
+
<div>Item 1</div>
|
|
124
|
+
<div>Item 2</div>
|
|
125
|
+
<div>Item 3</div>
|
|
126
|
+
</hstack>
|
|
127
|
+
|
|
128
|
+
<h3>Z Stack</h3>
|
|
129
|
+
<p>Great if you need to stack a bunch of elements on top of each other</p>
|
|
130
|
+
<zstack>
|
|
131
|
+
<div style="width: 150px; height: 150px; background-color: var(--brand)">
|
|
132
|
+
1
|
|
133
|
+
</div>
|
|
134
|
+
<div
|
|
135
|
+
style="
|
|
136
|
+
width: 100px;
|
|
137
|
+
height: 100px;
|
|
138
|
+
background-color: lch(from var(--brand) calc(l + 10) c h);
|
|
139
|
+
"
|
|
140
|
+
>
|
|
141
|
+
2
|
|
142
|
+
</div>
|
|
143
|
+
<div
|
|
144
|
+
style="
|
|
145
|
+
width: 50px;
|
|
146
|
+
height: 50px;
|
|
147
|
+
background-color: lch(from var(--brand) calc(l + 20) c h);
|
|
148
|
+
"
|
|
149
|
+
>
|
|
150
|
+
3
|
|
151
|
+
</div>
|
|
152
|
+
</zstack>
|
|
153
|
+
|
|
154
|
+
<h3>Nested Stacks</h3>
|
|
155
|
+
<vstack>
|
|
156
|
+
<hstack align="space-between">
|
|
157
|
+
<div>Item 1</div>
|
|
158
|
+
<div>Item 2</div>
|
|
159
|
+
<div>Item 3</div>
|
|
160
|
+
</hstack>
|
|
161
|
+
<divider></divider>
|
|
162
|
+
<hstack align="center" style="align-items: start">
|
|
163
|
+
<div>Item 4</div>
|
|
164
|
+
<divider></divider>
|
|
165
|
+
<vstack>
|
|
166
|
+
<div>Item A</div>
|
|
167
|
+
<divider></divider>
|
|
168
|
+
<div>Item B</div>
|
|
169
|
+
<divider></divider>
|
|
170
|
+
<div>Item C</div>
|
|
171
|
+
</vstack>
|
|
172
|
+
<divider></divider>
|
|
173
|
+
<div>Item 6</div>
|
|
174
|
+
</hstack>
|
|
175
|
+
</vstack>
|
|
176
|
+
|
|
177
|
+
<h2>UI Elements</h2>
|
|
178
|
+
<h3>Button</h3>
|
|
179
|
+
<vstack>
|
|
180
|
+
<span>Default button:</span>
|
|
181
|
+
<button>Click me</button>
|
|
182
|
+
<span>With '.fit' class:</span>
|
|
183
|
+
<button class="fit">Click me</button>
|
|
184
|
+
</vstack>
|
|
185
|
+
|
|
186
|
+
<h3>Card</h3>
|
|
187
|
+
<hstack class="cols-2">
|
|
188
|
+
<card>
|
|
189
|
+
<h3>Card Title</h3>
|
|
190
|
+
<p>Card content goes here</p>
|
|
191
|
+
</card>
|
|
192
|
+
<card>
|
|
193
|
+
<h3>Card Title</h3>
|
|
194
|
+
<p>Card content goes here</p>
|
|
195
|
+
</card>
|
|
196
|
+
</hstack>
|
|
197
|
+
|
|
198
|
+
<h2>Shadows</h2>
|
|
199
|
+
<vstack>
|
|
200
|
+
<hstack class="cols-2">
|
|
201
|
+
<span>--shadow-small, .shadow</span>
|
|
202
|
+
<div class="shadow chip"></div>
|
|
203
|
+
</hstack>
|
|
204
|
+
<hstack class="cols-2">
|
|
205
|
+
<span>--shadow-medium, .shadow-medium</span>
|
|
206
|
+
<div class="shadow-medium chip"></div>
|
|
207
|
+
</hstack>
|
|
208
|
+
<hstack class="cols-2">
|
|
209
|
+
<span>--shadow-large, .shadow-large</span>
|
|
210
|
+
<div class="shadow-large chip"></div>
|
|
211
|
+
</hstack>
|
|
212
|
+
<hstack class="cols-2">
|
|
213
|
+
<span>--shadow-center, .shadow-center</span>
|
|
214
|
+
<div class="shadow-center chip"></div>
|
|
215
|
+
</hstack>
|
|
216
|
+
</vstack>
|
|
217
|
+
|
|
218
|
+
<footer>Enjoy life!</footer>
|
|
219
|
+
</body>
|
|
220
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bomberstudios/css-library",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"description": "A bunch of CSS code I reuse between projects",
|
|
5
5
|
"main": "index.css",
|
|
6
6
|
"scripts": {
|
|
7
|
-
"
|
|
7
|
+
"start": "npx reload -b",
|
|
8
|
+
"release": "npm version patch && npm publish --access public"
|
|
8
9
|
},
|
|
9
10
|
"author": "Ale Muñoz",
|
|
10
11
|
"license": "MIT"
|