css-zero 0.0.11 → 0.0.13
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.
- checksums.yaml +4 -4
- data/README.md +53 -19
- data/lib/css_zero/version.rb +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/images/circle-alert.svg +1 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/alert.css +6 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css +7 -0
- metadata +2 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 9fa9b5a675b170c1792a89b840dea6339ee14768644531ec3a1d2b465068e4f5
|
|
4
|
+
data.tar.gz: 165ee0886c7f61ffe76c06545b367c6b1c5a3cb883a49345433dd6965b748e6b
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: f6c36eb3cc7eb625ee8ed8255bac1aaa409e30ae6202a3e1e6683df5f3be36c74f052d011ba49ed7fda0a1d91dc5fea3ef24aa15392e9ccf0b7c3b1431280dcb
|
|
7
|
+
data.tar.gz: 52f6d8133c48e4b9e6fd0e6c57f844a7121a516d6cbef6fefac54a0db69759cf42224d9963431eabb05158d802b6a4f1271d869abf056988d034b9bced5d2120
|
data/README.md
CHANGED
|
@@ -4,12 +4,6 @@ An opinionated CSS starter kit for your application. You can think of it like a
|
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
|
-
Is recommended to use [Propshaft](https://github.com/rails/propshaft), make sure to load all the CSS files in your `layout.html.erb`.
|
|
8
|
-
|
|
9
|
-
```html+erb
|
|
10
|
-
<%= stylesheet_link_tag :all, "data-turbo-track": "reload" %>
|
|
11
|
-
```
|
|
12
|
-
|
|
13
7
|
Add this gem to your project.
|
|
14
8
|
|
|
15
9
|
```
|
|
@@ -28,6 +22,45 @@ Add only the components you need. (Optional)
|
|
|
28
22
|
bin/rails generate css_zero:add accordion alert alert_dialog badge button card dialog input progress switch table
|
|
29
23
|
```
|
|
30
24
|
|
|
25
|
+
### Requirements
|
|
26
|
+
|
|
27
|
+
If you are using [Propshaft](https://github.com/rails/propshaft) (recommended) make sure to load all the CSS files in your layout.html.erb.
|
|
28
|
+
|
|
29
|
+
<details>
|
|
30
|
+
<summary>Click here to see how</summary>
|
|
31
|
+
|
|
32
|
+
```html+erb
|
|
33
|
+
<%= stylesheet_link_tag :all, "data-turbo-track": "reload" %>
|
|
34
|
+
```
|
|
35
|
+
</details>
|
|
36
|
+
|
|
37
|
+
If you are using [Sprockets](https://github.com/rails/sprockets) make sure to load all the CSS files in your application.css.
|
|
38
|
+
|
|
39
|
+
<details>
|
|
40
|
+
<summary>Click here to see how</summary>
|
|
41
|
+
|
|
42
|
+
```
|
|
43
|
+
/*
|
|
44
|
+
*= require _reset
|
|
45
|
+
*= require animations
|
|
46
|
+
*= require borders
|
|
47
|
+
*= require colors
|
|
48
|
+
*= require effects
|
|
49
|
+
*= require filters
|
|
50
|
+
*= require grid
|
|
51
|
+
*= require sizes
|
|
52
|
+
*= require transform
|
|
53
|
+
*= require transition
|
|
54
|
+
*= require typography
|
|
55
|
+
*= require_tree .
|
|
56
|
+
*= require_self
|
|
57
|
+
*= require zutilities
|
|
58
|
+
*/
|
|
59
|
+
```
|
|
60
|
+
</details>
|
|
61
|
+
|
|
62
|
+
Some icons in the examples are not copied to the project. If you are looking for good ones, I recommend [Lucide](https://lucide.dev).
|
|
63
|
+
|
|
31
64
|
## Usage
|
|
32
65
|
|
|
33
66
|
```html
|
|
@@ -61,7 +94,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
|
61
94
|
<img width="500" alt="accordion" src="https://github.com/lazaronixon/css-zero/assets/2651240/9644edec-9bb1-4e1f-b2da-19c7fb5a540f">
|
|
62
95
|
|
|
63
96
|
<details>
|
|
64
|
-
<summary>Show me the code
|
|
97
|
+
<summary>Show me the code</summary>
|
|
65
98
|
|
|
66
99
|
```html
|
|
67
100
|
<div class="accordion">
|
|
@@ -86,7 +119,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
|
86
119
|
<img width="500" alt="alert" src="https://github.com/lazaronixon/css-zero/assets/2651240/eae5c6dd-f6b4-4c01-bec1-cd7e9523d0a6">
|
|
87
120
|
|
|
88
121
|
<details>
|
|
89
|
-
<summary>Show me the code
|
|
122
|
+
<summary>Show me the code</summary>
|
|
90
123
|
|
|
91
124
|
```html+erb
|
|
92
125
|
<div class="alert alert--negative flex items-start gap">
|
|
@@ -104,7 +137,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
|
104
137
|
<img width="500" alt="alert_dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/483b00fc-0330-45b3-82c5-dc4118987564">
|
|
105
138
|
|
|
106
139
|
<details>
|
|
107
|
-
<summary>Show me the code
|
|
140
|
+
<summary>Show me the code</summary>
|
|
108
141
|
|
|
109
142
|
```html
|
|
110
143
|
<div>
|
|
@@ -130,7 +163,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
|
130
163
|
<img width="400" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/6a700dc4-0fd5-46f6-9902-a9bde5f7febb">
|
|
131
164
|
|
|
132
165
|
<details>
|
|
133
|
-
<summary>Show me the code
|
|
166
|
+
<summary>Show me the code</summary>
|
|
134
167
|
|
|
135
168
|
```html
|
|
136
169
|
<div class="flex justify-start gap">
|
|
@@ -145,10 +178,10 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
|
145
178
|
|
|
146
179
|
### Button
|
|
147
180
|
|
|
148
|
-
<img width="500" alt="button" src="https://github.com/lazaronixon/css-zero/assets/2651240/
|
|
181
|
+
<img width="500" alt="button" src="https://github.com/lazaronixon/css-zero/assets/2651240/df78c11e-9167-4fd3-a779-24729cb24715">
|
|
149
182
|
|
|
150
183
|
<details>
|
|
151
|
-
<summary>Show me the code
|
|
184
|
+
<summary>Show me the code</summary>
|
|
152
185
|
|
|
153
186
|
```html
|
|
154
187
|
<div class="flex flex-wrap items-center gap" aria-busy>
|
|
@@ -156,10 +189,11 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
|
156
189
|
<button class="btn btn--secondary">Secondary</button>
|
|
157
190
|
<button class="btn btn--outline">Outline</button>
|
|
158
191
|
<button class="btn btn--plain">Plain</button>
|
|
192
|
+
<button class="btn btn--positive">Positive</button>
|
|
159
193
|
<button class="btn btn--negative">Negative</button>
|
|
160
194
|
|
|
161
195
|
<button class="btn">
|
|
162
|
-
<%= image_tag "circle-
|
|
196
|
+
<%= image_tag "circle-plus.svg", role: "presentation", size: 16 %>
|
|
163
197
|
<span>With icon</span>
|
|
164
198
|
</button>
|
|
165
199
|
|
|
@@ -175,7 +209,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
|
175
209
|
<img width="366" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/f4077b91-2d0c-49db-9fb6-2955f8575217">
|
|
176
210
|
|
|
177
211
|
<details>
|
|
178
|
-
<summary>Show me the code
|
|
212
|
+
<summary>Show me the code</summary>
|
|
179
213
|
|
|
180
214
|
```html
|
|
181
215
|
<div class="card flex flex-col gap" style="width: 350px; gap: 1.5rem;">
|
|
@@ -214,7 +248,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
|
214
248
|
<img width="400" alt="dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/50c8af20-46bb-4bf9-a233-78877f49e086">
|
|
215
249
|
|
|
216
250
|
<details>
|
|
217
|
-
<summary>Show me the code
|
|
251
|
+
<summary>Show me the code</summary>
|
|
218
252
|
|
|
219
253
|
```html
|
|
220
254
|
<artice class="flex flex-col pb-10 pi-2 mi-auto w-full" style="gap: 4rem; max-width: 32rem">
|
|
@@ -261,7 +295,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
|
261
295
|
<img width="500" alt="input" src="https://github.com/lazaronixon/css-zero/assets/2651240/f33a9d34-44b5-4c6b-ad88-1f0fd00b7291">
|
|
262
296
|
|
|
263
297
|
<details>
|
|
264
|
-
<summary>Show me the code
|
|
298
|
+
<summary>Show me the code</summary>
|
|
265
299
|
|
|
266
300
|
```html+erb
|
|
267
301
|
<%= form_with url: "/users", class: "flex flex-col gap" do |form| %>
|
|
@@ -298,7 +332,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
|
298
332
|
<img width="500" alt="progress" src="https://github.com/lazaronixon/css-zero/assets/2651240/32f7b665-ae85-48de-9338-0c255019122e">
|
|
299
333
|
|
|
300
334
|
<details>
|
|
301
|
-
<summary>Show me the code
|
|
335
|
+
<summary>Show me the code</summary>
|
|
302
336
|
|
|
303
337
|
```html
|
|
304
338
|
<label>
|
|
@@ -313,7 +347,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
|
313
347
|
<img width="175" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/b47e28fb-6492-402c-b422-b896dfd3b713">
|
|
314
348
|
|
|
315
349
|
<details>
|
|
316
|
-
<summary>Show me the code
|
|
350
|
+
<summary>Show me the code</summary>
|
|
317
351
|
|
|
318
352
|
```html+erb
|
|
319
353
|
<div class="flex items-center gap-sm">
|
|
@@ -328,7 +362,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
|
328
362
|
<img width="500" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/c7b261a8-6d38-46f2-bf69-fd9385776bbe">
|
|
329
363
|
|
|
330
364
|
<details>
|
|
331
|
-
<summary>Show me the code
|
|
365
|
+
<summary>Show me the code</summary>
|
|
332
366
|
|
|
333
367
|
```html
|
|
334
368
|
<table class="table">
|
data/lib/css_zero/version.rb
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>
|
|
@@ -11,6 +11,12 @@
|
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
+
.alert--positive {
|
|
15
|
+
--alert-border-color: var(--color-positive);
|
|
16
|
+
--alert-color: var(--color-positive);
|
|
17
|
+
--alert-icon-color: var(--color-filter-positive);
|
|
18
|
+
}
|
|
19
|
+
|
|
14
20
|
.alert--negative {
|
|
15
21
|
--alert-border-color: var(--color-negative);
|
|
16
22
|
--alert-color: var(--color-negative);
|
|
@@ -49,9 +49,16 @@
|
|
|
49
49
|
--btn-icon-color: var(--color-filter-text);
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
+
.btn--positive {
|
|
53
|
+
--btn-background: var(--color-positive);
|
|
54
|
+
--btn-color: white;
|
|
55
|
+
--btn-icon-color: var(--color-filter-positive);
|
|
56
|
+
}
|
|
57
|
+
|
|
52
58
|
.btn--negative {
|
|
53
59
|
--btn-background: var(--color-negative);
|
|
54
60
|
--btn-color: white;
|
|
61
|
+
--btn-icon-color: var(--color-filter-negative);
|
|
55
62
|
}
|
|
56
63
|
|
|
57
64
|
.btn--loading {
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: css-zero
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.13
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Lázaro Nixon
|
|
@@ -37,6 +37,7 @@ files:
|
|
|
37
37
|
- lib/generators/css_zero/add/add_generator.rb
|
|
38
38
|
- lib/generators/css_zero/add/resources.yml
|
|
39
39
|
- lib/generators/css_zero/add/templates/app/assets/images/chevron-down.svg
|
|
40
|
+
- lib/generators/css_zero/add/templates/app/assets/images/circle-alert.svg
|
|
40
41
|
- lib/generators/css_zero/add/templates/app/assets/images/loader-circle.svg
|
|
41
42
|
- lib/generators/css_zero/add/templates/app/assets/images/select-arrow.svg
|
|
42
43
|
- lib/generators/css_zero/add/templates/app/assets/images/x.svg
|