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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 44e238f88d9d7356979a3c8e2da8408018b91d63751e7fe4a963667fd895e14f
4
- data.tar.gz: 3c382aa05691a62cc22f735f81f020361c16fc90eff31d21debe004ee55cec75
3
+ metadata.gz: 06fbbf313570aa8314a8d4a3fe447220f2642a468c44a0910c82e2e1da7fcfd4
4
+ data.tar.gz: 96f848c73205fd3a031094148d0595e944c2390d50cdbb5c7c39c234e1661423
5
5
  SHA512:
6
- metadata.gz: 5a7187973f44868552daa5097705b1d7cc338560c6476655fb97f48f8e6ba173144624c2072f5c6ae0eb787ade33ad96c36a7c9c68e4f37ba316140fb6f02078
7
- data.tar.gz: 27fb3ee951fb13fe44908f5d16d1c12ce2e2b4b00d91a3b119bb04abac575dac3f5c96dc8fe16ddca1d0b3b13f6e75beeb36dc68953e7d84384bd12e78f67bdc
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 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,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 (--md) {
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
@@ -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
+ }
@@ -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
- * 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
+
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 { color: 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; }
@@ -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.2"
5
5
  end
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.1
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 */