css-zero 0.0.1 → 0.0.3

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.
Files changed (10) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +36 -15
  3. data/app/assets/stylesheets/_reset.css +8 -0
  4. data/app/assets/stylesheets/animations.css +36 -0
  5. data/app/assets/stylesheets/colors.css +22 -0
  6. data/app/assets/stylesheets/sizes.css +24 -12
  7. data/app/assets/stylesheets/zutilities.css +30 -14
  8. data/lib/css_zero/version.rb +1 -1
  9. metadata +3 -3
  10. data/app/assets/stylesheets/breakpoints.css +0 -10
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 44e238f88d9d7356979a3c8e2da8408018b91d63751e7fe4a963667fd895e14f
4
- data.tar.gz: 3c382aa05691a62cc22f735f81f020361c16fc90eff31d21debe004ee55cec75
3
+ metadata.gz: e4b91f7cfe11150ba5eea2a4d3cffa4097f5a2cfb746d7dbb58e44c8ed344b05
4
+ data.tar.gz: f8702fe3a28fc2b93714b310e449eb0e54d2bf4b90815abdd7a9a5b1b3a19eac
5
5
  SHA512:
6
- metadata.gz: 5a7187973f44868552daa5097705b1d7cc338560c6476655fb97f48f8e6ba173144624c2072f5c6ae0eb787ade33ad96c36a7c9c68e4f37ba316140fb6f02078
7
- data.tar.gz: 27fb3ee951fb13fe44908f5d16d1c12ce2e2b4b00d91a3b119bb04abac575dac3f5c96dc8fe16ddca1d0b3b13f6e75beeb36dc68953e7d84384bd12e78f67bdc
6
+ metadata.gz: 70980bc8b30c9c76babd5d37b3802cb9f2fd8f5c0dfef67fc67aa519050c8253431210a76ed153f4e82b3c14bb61715ecf0043254593320000d9a8c5247b95b0
7
+ data.tar.gz: 98fa14f8b800ca3daf3411834249372646b18d3a41bb5dd0d84204de983a192376c195163a2e4b16aa71873c027a5d387ae9258f3b39a97d51b0236b6c0fa6ff
data/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # CSS Zero
2
2
 
3
- An opinionated CSS starter kit for your application. You can think of it as a "no build" Tailwind CSS.
3
+ An opinionated CSS starter kit for your application. You can think of it like a "no build" Tailwind CSS.
4
4
 
5
5
  ## Installation
6
6
 
@@ -8,42 +8,63 @@ An opinionated CSS starter kit for your application. You can think of it as a "n
8
8
  bundle add css-zero
9
9
  ```
10
10
 
11
- This gem requires [propshaft](https://github.com/rails/propshaft) as asset pipeline.
11
+ This gem requires [propshaft](https://github.com/rails/propshaft) as the asset pipeline.
12
12
 
13
13
  ## Usage
14
14
 
15
+ ```html
16
+ <h1 class="text-xl font-bold mb-md">
17
+ Write most page content using utility classes. Use what is available or add more when needed.
18
+ </h1>
19
+
20
+ <div class="component">
21
+ Write custom CSS using predefined variables for more complex stuff.
22
+ </div>
23
+ ```
24
+
15
25
  ```css
16
26
  .component {
17
- background-color: var(--red-500);
27
+ background-color: var(--red-500);
18
28
  border-radius: var(--rounded);
19
29
  height: var(--size-4);
20
-
21
- @media (--md) {
22
- display: none;
23
- }
24
30
  }
25
31
  ```
26
32
 
27
- ```html
28
- <div class="component mbe-md">
29
- <p>content here...</p>
30
- </div>
31
- ```
32
-
33
- ## Files
33
+ ## Reference
34
34
 
35
35
  - [Sizes](app/assets/stylesheets/sizes.css)
36
36
  - [Colors](app/assets/stylesheets/colors.css)
37
37
  - [Border](app/assets/stylesheets/borders.css)
38
38
  - [Typography](app/assets/stylesheets/typography.css)
39
39
  - [Effects](app/assets/stylesheets/effects.css)
40
- - [Breakpoints](app/assets/stylesheets/breakpoints.css)
41
40
  - [Grid](app/assets/stylesheets/grid.css)
42
41
  - [Filters](app/assets/stylesheets/filters.css)
43
42
  - [Transform](app/assets/stylesheets/transform.css)
44
43
  - [Transition](app/assets/stylesheets/transition.css)
44
+ - [Animations](app/assets/stylesheets/animations.css)
45
45
  - [Utilities](app/assets/stylesheets/zutilities.css)
46
46
 
47
+ ## Customization
48
+
49
+ ```css
50
+ :root {
51
+ --color-negative: var(--pink-700);
52
+ --color-postive: var(--lime-700);
53
+ --color-bg: white;
54
+ --color-bg-surface: var(--zinc-100);
55
+ --color-text: var(--zinc-950);
56
+ --color-text-reversed: white;
57
+ --color-text-subtle: var(--zinc-600);
58
+ --color-border: var(--zinc-200);
59
+ }
60
+ ```
61
+
62
+ ```html
63
+ <div class="flex flex-column w-full gap" style="--row-gap: 0.5rem">
64
+ More HTML tags here...
65
+ </div>
66
+ ```
67
+
47
68
  ## Development
48
69
 
49
70
  To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
data/app/assets/stylesheets/_reset.css CHANGED
@@ -332,3 +332,11 @@ video {
332
332
  [hidden] {
333
333
  display: none !important;
334
334
  }
335
+
336
+ /*
337
+ Make elements with the HTML contents attribute become pseudo-box by default.
338
+ */
339
+
340
+ [contents] {
341
+ display: contents !important;
342
+ }
data/app/assets/stylesheets/animations.css ADDED
@@ -0,0 +1,36 @@
1
+ /****************************************************************
2
+ * Animation
3
+ * Variables for animating elements with CSS animations.
4
+ * animation: var(--animate-pulse);
5
+ *****************************************************************/
6
+
7
+ :root {
8
+ --animate-spin: spin 1s linear infinite;
9
+ --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
10
+ --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
11
+ --animate-bounce: bounce 1s infinite;
12
+ }
13
+
14
+ @keyframes spin {
15
+ to { transform: rotate(360deg); }
16
+ }
17
+
18
+ @keyframes ping {
19
+ 75%, 100% { transform: scale(2); opacity: 0; }
20
+ }
21
+
22
+ @keyframes pulse {
23
+ 50% { opacity: 0.5; }
24
+ }
25
+
26
+ @keyframes bounce {
27
+ 0%, 100% {
28
+ transform: translateY(-25%);
29
+ animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
30
+ }
31
+
32
+ 50% {
33
+ transform: none;
34
+ animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
35
+ }
36
+ }
data/app/assets/stylesheets/colors.css CHANGED
@@ -1,4 +1,5 @@
1
1
  :root {
2
+ /* Named color values */
2
3
  --slate-50: #f8fafc;
3
4
  --slate-100: #f1f5f9;
4
5
  --slate-200: #e2e8f0;
@@ -262,4 +263,25 @@
262
263
  --rose-800: #9f1239;
263
264
  --rose-900: #881337;
264
265
  --rose-950: #4c0519;
266
+
267
+ /* Abstractions */
268
+ --color-negative: var(--pink-700);
269
+ --color-postive: var(--lime-700);
270
+ --color-bg: white;
271
+ --color-bg-surface: var(--zinc-100);
272
+ --color-text: var(--zinc-950);
273
+ --color-text-reversed: white;
274
+ --color-text-subtle: var(--zinc-600);
275
+ --color-border: var(--zinc-200);
276
+
277
+ /* Redefine named color values for dark mode */
278
+ @media (prefers-color-scheme: dark) {
279
+ --color-negative: var(--pink-400);
280
+ --color-postive: var(--lime-300);
281
+ --color-bg: var(--zinc-900);
282
+ --color-bg-surface: var(--zinc-950);
283
+ --color-text: white;
284
+ --color-text-reversed: var(--zinc-950);
285
+ --color-border: rgba(255, 255, 255, 0.1);
286
+ }
265
287
  }
data/app/assets/stylesheets/sizes.css CHANGED
@@ -68,17 +68,29 @@
68
68
  --size-full: 100%;
69
69
 
70
70
  /****************************************************************
71
- * Max Width
71
+ * Widths
72
72
  *****************************************************************/
73
- --max-w-xs: 20rem; /* 320px */
74
- --max-w-sm: 24rem; /* 384px */
75
- --max-w-md: 28rem; /* 448px */
76
- --max-w-lg: 32rem; /* 512px */
77
- --max-w-xl: 36rem; /* 576px */
78
- --max-w-2xl: 42rem; /* 672px */
79
- --max-w-3xl: 48rem; /* 768px */
80
- --max-w-4xl: 56rem; /* 896px */
81
- --max-w-5xl: 64rem; /* 1024px */
82
- --max-w-6xl: 72rem; /* 1152px */
83
- --max-w-7xl: 80rem; /* 1280px */
73
+ --width-3xs: 16rem; /* 256px */
74
+ --width-2xs: 18rem; /* 288px */
75
+ --width-xs: 20rem; /* 320px */
76
+ --width-sm: 24rem; /* 384px */
77
+ --width-md: 28rem; /* 448px */
78
+ --width-lg: 32rem; /* 512px */
79
+ --width-xl: 36rem; /* 576px */
80
+ --width-2xl: 42rem; /* 672px */
81
+ --width-3xl: 48rem; /* 768px */
82
+ --width-4xl: 56rem; /* 896px */
83
+ --width-5xl: 64rem; /* 1024px */
84
+ --width-6xl: 72rem; /* 1152px */
85
+ --width-7xl: 80rem; /* 1280px */
86
+ --width-prose: 65ch;
87
+
88
+ /****************************************************************
89
+ * Breakpoints
90
+ *****************************************************************/
91
+ --breakpoint-sm: 40rem; /* 640px */
92
+ --breakpoint-md: 48rem; /* 768px */
93
+ --breakpoint-lg: 64rem; /* 1024px */
94
+ --breakpoint-xl: 80rem; /* 1280px */
95
+ --breakpoint-2xl: 96rem; /* 1536px */
84
96
  }
data/app/assets/stylesheets/zutilities.css CHANGED
@@ -47,7 +47,7 @@
47
47
  /****************************************************************
48
48
  * Text
49
49
  *****************************************************************/
50
- .font-normal { font-weight: var(--font-normal); }
50
+ .font-normal { font-weight: var(--font-normal); font-style: normal; }
51
51
  .font-medium { font-weight: var(--font-medium); }
52
52
  .font-bold { font-weight: var(--font-bold); }
53
53
 
@@ -71,7 +71,11 @@
71
71
  .leading-tight { line-height: var(--leading-tight); }
72
72
  .leading-normal { line-height: var(--leading-normal); }
73
73
 
74
- .text-inherit { color: inherit; }
74
+ .text-primary { color: var(--color-text); }
75
+ .text-reversed { color: var(--color-text-reversed); }
76
+ .text-subtle { color: var(--color-text-subtle); }
77
+ .text-negative { color: var(--color-negative); }
78
+ .text-positive { color: var(--color-positive); }
75
79
 
76
80
  .text-xs { font-size: var(--text-xs); }
77
81
  .text-sm { font-size: var(--text-sm); }
@@ -83,16 +87,33 @@
83
87
  .text-4xl { font-size: var(--text-4xl); }
84
88
  .text-5xl { font-size: var(--text-5xl); }
85
89
 
90
+ /****************************************************************
91
+ * Background
92
+ *****************************************************************/
93
+ .bg-main { background-color: var(--color-bg); }
94
+ .bg-white { background-color: var(--color-text-reversed); }
95
+ .bg-surface { background-color: var(--color-bg-surface); }
96
+ .bg-transparent { background-color: transparent; }
97
+
86
98
  /****************************************************************
87
99
  * Border
88
100
  *****************************************************************/
89
- .border-0 { border-width: 0px; }
90
- .border-t { border-top-width: 1px; }
91
- .border-b { border-bottom-width: 1px; }
92
- .border-l { border-left-width: 1px; }
93
- .border-r { border-right-width: 1px; }
94
- .border { border-width: 1px; }
95
- .rounded-full { border-radius: 9999px; }
101
+ .border-0 { border: 0; }
102
+ .border { border: var(--border-size, 1px) solid var(--color-border); }
103
+ .border-t { border-top: var(--border-size, 1px) solid var(--color-border); }
104
+ .border-b { border-bottom: var(--border-size, 1px) solid var(--color-border); }
105
+ .border-l { border-left: var(--border-size, 1px) solid var(--color-border); }
106
+ .border-r { border-right: var(--border-size, 1px) solid var(--color-border); }
107
+
108
+ .border-radius { border-radius: var(--border-radius, 0.5rem); }
109
+
110
+ /****************************************************************
111
+ * Shadow
112
+ *****************************************************************/
113
+ .shadow { box-shadow: var(--shadow); }
114
+ .shadow-md { box-shadow: var(--shadow-md); }
115
+ .shadow-lg { box-shadow: var(--shadow-lg); }
116
+ .shadow-xl { box-shadow: var(--shadow-xl); }
96
117
 
97
118
  /****************************************************************
98
119
  * Layout
@@ -101,11 +122,6 @@
101
122
  .inline { display: inline; }
102
123
  .inline-block { display: inline-block; }
103
124
 
104
- .contents { display: contents; }
105
-
106
- .hidden { display: none; }
107
- .invisible { visibility: hidden; }
108
-
109
125
  .relative { position: relative; }
110
126
 
111
127
  .min-w-0 { min-inline-size: 0; }
data/lib/css_zero/version.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module CssZero
4
- VERSION = "0.0.1"
4
+ VERSION = "0.0.3"
5
5
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: css-zero
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.1
4
+ version: 0.0.3
5
5
  platform: ruby
6
6
  authors:
7
7
  - Lázaro Nixon
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2024-06-08 00:00:00.000000000 Z
11
+ date: 2024-06-10 00:00:00.000000000 Z
12
12
  dependencies: []
13
13
  description:
14
14
  email: lazaronixon@hotmail.com
@@ -19,8 +19,8 @@ files:
19
19
  - README.md
20
20
  - Rakefile
21
21
  - app/assets/stylesheets/_reset.css
22
+ - app/assets/stylesheets/animations.css
22
23
  - app/assets/stylesheets/borders.css
23
- - app/assets/stylesheets/breakpoints.css
24
24
  - app/assets/stylesheets/colors.css
25
25
  - app/assets/stylesheets/effects.css
26
26
  - app/assets/stylesheets/filters.css
data/app/assets/stylesheets/breakpoints.css DELETED
@@ -1,10 +0,0 @@
1
- /****************************************************************
2
- * Responsive Design
3
- * Custom media queries to build adaptive user interfaces.
4
- * @media (--md) { display: none; }
5
- *****************************************************************/
6
- @custom-media --sm (min-width: 40rem); /* 640px */
7
- @custom-media --md (min-width: 48rem); /* 768px */
8
- @custom-media --lg (min-width: 64rem); /* 1024px */
9
- @custom-media --xl (min-width: 80rem); /* 1280px */
10
- @custom-media --2xl (min-width: 96rem); /* 1536px */