css-zero 0.0.1 → 0.0.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.
- checksums.yaml +4 -4
- data/README.md +4 -4
- data/app/assets/stylesheets/_reset.css +8 -0
- data/app/assets/stylesheets/animations.css +36 -0
- data/app/assets/stylesheets/sizes.css +23 -12
- data/app/assets/stylesheets/zutilities.css +1 -6
- data/lib/css_zero/version.rb +1 -1
- metadata +2 -2
- data/app/assets/stylesheets/breakpoints.css +0 -10
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 06fbbf313570aa8314a8d4a3fe447220f2642a468c44a0910c82e2e1da7fcfd4
|
4
|
+
data.tar.gz: 96f848c73205fd3a031094148d0595e944c2390d50cdbb5c7c39c234e1661423
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 241c0d3d460b9cb9b35a7f3f58efab830ae390bab038823ad52388e29c414fe4a27fa3670148ce37c05dbddd2efc1123aae9a4e76eecb25801e5e12f4085327c
|
7
|
+
data.tar.gz: fd56376c326bd18dc4ec2bee6d45e4c89e5919b3b1869ce70d4fb38af150c04cf1b95203f28300e6ef26b4c628cb890d73b79ffb925322438222c3a137018e93
|
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
|
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,7 +8,7 @@ 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
|
|
@@ -18,7 +18,7 @@ This gem requires [propshaft](https://github.com/rails/propshaft) as asset pipel
|
|
18
18
|
border-radius: var(--rounded);
|
19
19
|
height: var(--size-4);
|
20
20
|
|
21
|
-
@media (
|
21
|
+
@media (min-width: 48rem) {
|
22
22
|
display: none;
|
23
23
|
}
|
24
24
|
}
|
@@ -37,11 +37,11 @@ This gem requires [propshaft](https://github.com/rails/propshaft) as asset pipel
|
|
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
47
|
## Development
|
@@ -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
|
+
}
|
@@ -68,17 +68,28 @@
|
|
68
68
|
--size-full: 100%;
|
69
69
|
|
70
70
|
/****************************************************************
|
71
|
-
*
|
71
|
+
* Widths
|
72
72
|
*****************************************************************/
|
73
|
-
--
|
74
|
-
--
|
75
|
-
--
|
76
|
-
--
|
77
|
-
--
|
78
|
-
--
|
79
|
-
--
|
80
|
-
--
|
81
|
-
--
|
82
|
-
--
|
83
|
-
--
|
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
|
+
|
87
|
+
/****************************************************************
|
88
|
+
* Breakpoints
|
89
|
+
*****************************************************************/
|
90
|
+
--breakpoint-sm: 40rem; /* 640px */
|
91
|
+
--breakpoint-md: 48rem; /* 768px */
|
92
|
+
--breakpoint-lg: 64rem; /* 1024px */
|
93
|
+
--breakpoint-xl: 80rem; /* 1280px */
|
94
|
+
--breakpoint-2xl: 96rem; /* 1536px */
|
84
95
|
}
|
@@ -71,7 +71,7 @@
|
|
71
71
|
.leading-tight { line-height: var(--leading-tight); }
|
72
72
|
.leading-normal { line-height: var(--leading-normal); }
|
73
73
|
|
74
|
-
.text-inherit
|
74
|
+
.text-inherit { color: inherit; }
|
75
75
|
|
76
76
|
.text-xs { font-size: var(--text-xs); }
|
77
77
|
.text-sm { font-size: var(--text-sm); }
|
@@ -101,11 +101,6 @@
|
|
101
101
|
.inline { display: inline; }
|
102
102
|
.inline-block { display: inline-block; }
|
103
103
|
|
104
|
-
.contents { display: contents; }
|
105
|
-
|
106
|
-
.hidden { display: none; }
|
107
|
-
.invisible { visibility: hidden; }
|
108
|
-
|
109
104
|
.relative { position: relative; }
|
110
105
|
|
111
106
|
.min-w-0 { min-inline-size: 0; }
|
data/lib/css_zero/version.rb
CHANGED
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.2
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Lázaro Nixon
|
@@ -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
|
@@ -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 */
|