css-zero 0.0.1 → 0.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 44e238f88d9d7356979a3c8e2da8408018b91d63751e7fe4a963667fd895e14f
-  data.tar.gz: 3c382aa05691a62cc22f735f81f020361c16fc90eff31d21debe004ee55cec75
+  metadata.gz: 06fbbf313570aa8314a8d4a3fe447220f2642a468c44a0910c82e2e1da7fcfd4
+  data.tar.gz: 96f848c73205fd3a031094148d0595e944c2390d50cdbb5c7c39c234e1661423
 SHA512:
-  metadata.gz: 5a7187973f44868552daa5097705b1d7cc338560c6476655fb97f48f8e6ba173144624c2072f5c6ae0eb787ade33ad96c36a7c9c68e4f37ba316140fb6f02078
-  data.tar.gz: 27fb3ee951fb13fe44908f5d16d1c12ce2e2b4b00d91a3b119bb04abac575dac3f5c96dc8fe16ddca1d0b3b13f6e75beeb36dc68953e7d84384bd12e78f67bdc
+  metadata.gz: 241c0d3d460b9cb9b35a7f3f58efab830ae390bab038823ad52388e29c414fe4a27fa3670148ce37c05dbddd2efc1123aae9a4e76eecb25801e5e12f4085327c
+  data.tar.gz: fd56376c326bd18dc4ec2bee6d45e4c89e5919b3b1869ce70d4fb38af150c04cf1b95203f28300e6ef26b4c628cb890d73b79ffb925322438222c3a137018e93

data/README.md

@@ -1,6 +1,6 @@
 # CSS Zero
 
-An opinionated CSS starter kit for your application. You can think of it as a "no build" Tailwind CSS.
+An opinionated CSS starter kit for your application. You can think of it like a "no build" Tailwind CSS.
 
 ## Installation
 
@@ -8,7 +8,7 @@ An opinionated CSS starter kit for your application. You can think of it as a "n
 bundle add css-zero
 ```
 
-This gem requires [propshaft](https://github.com/rails/propshaft) as asset pipeline.
+This gem requires [propshaft](https://github.com/rails/propshaft) as the asset pipeline.
 
 ## Usage
 
@@ -18,7 +18,7 @@ This gem requires [propshaft](https://github.com/rails/propshaft) as asset pipel
   border-radius: var(--rounded);
   height: var(--size-4);
 
-  @media (--md) {
+  @media (min-width: 48rem) {
     display: none;
   }
 }
@@ -37,11 +37,11 @@ This gem requires [propshaft](https://github.com/rails/propshaft) as asset pipel
 - [Border](app/assets/stylesheets/borders.css)
 - [Typography](app/assets/stylesheets/typography.css)
 - [Effects](app/assets/stylesheets/effects.css)
-- [Breakpoints](app/assets/stylesheets/breakpoints.css)
 - [Grid](app/assets/stylesheets/grid.css)
 - [Filters](app/assets/stylesheets/filters.css)
 - [Transform](app/assets/stylesheets/transform.css)
 - [Transition](app/assets/stylesheets/transition.css)
+- [Animations](app/assets/stylesheets/animations.css)
 - [Utilities](app/assets/stylesheets/zutilities.css)
 
 ## Development

data/app/assets/stylesheets/_reset.css

@@ -332,3 +332,11 @@ video {
 [hidden] {
   display: none !important;
 }
+
+/*
+  Make elements with the HTML contents attribute become pseudo-box by default.
+*/
+
+[contents] {
+  display: contents !important;
+}

data/app/assets/stylesheets/animations.css

@@ -0,0 +1,36 @@
+/****************************************************************
+* Animation
+* Variables for animating elements with CSS animations.
+* animation: var(--animate-pulse);
+*****************************************************************/
+
+:root {
+  --animate-spin: spin 1s linear infinite;
+  --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animate-bounce: bounce 1s infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes ping {
+  75%, 100% { transform: scale(2); opacity: 0; }
+}
+
+@keyframes pulse {
+  50% { opacity: 0.5; }
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}

data/app/assets/stylesheets/sizes.css

@@ -68,17 +68,28 @@
   --size-full:  100%;
 
   /****************************************************************
-  * Max Width
+  * Widths
   *****************************************************************/
-  --max-w-xs:  20rem; /* 320px */
-  --max-w-sm:  24rem; /* 384px */
-  --max-w-md:  28rem; /* 448px */
-  --max-w-lg:  32rem; /* 512px */
-  --max-w-xl:  36rem; /* 576px */
-  --max-w-2xl: 42rem; /* 672px */
-  --max-w-3xl: 48rem; /* 768px */
-  --max-w-4xl: 56rem; /* 896px */
-  --max-w-5xl: 64rem; /* 1024px */
-  --max-w-6xl: 72rem; /* 1152px */
-  --max-w-7xl: 80rem; /* 1280px */
+  --width-3xs: 16rem; /* 256px */
+  --width-2xs: 18rem; /* 288px */
+  --width-xs:  20rem; /* 320px */
+  --width-sm:  24rem; /* 384px */
+  --width-md:  28rem; /* 448px */
+  --width-lg:  32rem; /* 512px */
+  --width-xl:  36rem; /* 576px */
+  --width-2xl: 42rem; /* 672px */
+  --width-3xl: 48rem; /* 768px */
+  --width-4xl: 56rem; /* 896px */
+  --width-5xl: 64rem; /* 1024px */
+  --width-6xl: 72rem; /* 1152px */
+  --width-7xl: 80rem; /* 1280px */
+
+  /****************************************************************
+  * Breakpoints
+  *****************************************************************/
+  --breakpoint-sm:  40rem; /* 640px */
+  --breakpoint-md:  48rem; /* 768px */
+  --breakpoint-lg:  64rem; /* 1024px */
+  --breakpoint-xl:  80rem; /* 1280px */
+  --breakpoint-2xl: 96rem; /* 1536px */
 }

data/app/assets/stylesheets/zutilities.css

@@ -71,7 +71,7 @@
 .leading-tight { line-height: var(--leading-tight); }
 .leading-normal { line-height: var(--leading-normal); }
 
-.text-inherit	{ color: inherit; }
+.text-inherit { color: inherit; }
 
 .text-xs { font-size: var(--text-xs); }
 .text-sm { font-size: var(--text-sm); }
@@ -101,11 +101,6 @@
 .inline { display: inline; }
 .inline-block { display: inline-block; }
 
-.contents { display: contents; }
-
-.hidden { display: none; }
-.invisible { visibility: hidden; }
-
 .relative { position: relative; }
 
 .min-w-0 { min-inline-size: 0; }

data/lib/css_zero/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module CssZero
-  VERSION = "0.0.1"
+  VERSION = "0.0.2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.2
 platform: ruby
 authors:
 - Lázaro Nixon
@@ -19,8 +19,8 @@ files:
 - README.md
 - Rakefile
 - app/assets/stylesheets/_reset.css
+- app/assets/stylesheets/animations.css
 - app/assets/stylesheets/borders.css
-- app/assets/stylesheets/breakpoints.css
 - app/assets/stylesheets/colors.css
 - app/assets/stylesheets/effects.css
 - app/assets/stylesheets/filters.css

data/app/assets/stylesheets/breakpoints.css

@@ -1,10 +0,0 @@
-/****************************************************************
-* Responsive Design
-* Custom media queries to build adaptive user interfaces.
-* @media (--md) { display: none; }
-*****************************************************************/
-@custom-media --sm  (min-width: 40rem); /* 640px */
-@custom-media --md  (min-width: 48rem); /* 768px */
-@custom-media --lg  (min-width: 64rem); /* 1024px */
-@custom-media --xl  (min-width: 80rem); /* 1280px */
-@custom-media --2xl (min-width: 96rem); /* 1536px */