css-zero 0.0.1 → 0.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 44e238f88d9d7356979a3c8e2da8408018b91d63751e7fe4a963667fd895e14f
-  data.tar.gz: 3c382aa05691a62cc22f735f81f020361c16fc90eff31d21debe004ee55cec75
+  metadata.gz: e4b91f7cfe11150ba5eea2a4d3cffa4097f5a2cfb746d7dbb58e44c8ed344b05
+  data.tar.gz: f8702fe3a28fc2b93714b310e449eb0e54d2bf4b90815abdd7a9a5b1b3a19eac
 SHA512:
-  metadata.gz: 5a7187973f44868552daa5097705b1d7cc338560c6476655fb97f48f8e6ba173144624c2072f5c6ae0eb787ade33ad96c36a7c9c68e4f37ba316140fb6f02078
-  data.tar.gz: 27fb3ee951fb13fe44908f5d16d1c12ce2e2b4b00d91a3b119bb04abac575dac3f5c96dc8fe16ddca1d0b3b13f6e75beeb36dc68953e7d84384bd12e78f67bdc
+  metadata.gz: 70980bc8b30c9c76babd5d37b3802cb9f2fd8f5c0dfef67fc67aa519050c8253431210a76ed153f4e82b3c14bb61715ecf0043254593320000d9a8c5247b95b0
+  data.tar.gz: 98fa14f8b800ca3daf3411834249372646b18d3a41bb5dd0d84204de983a192376c195163a2e4b16aa71873c027a5d387ae9258f3b39a97d51b0236b6c0fa6ff

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,42 +8,63 @@ 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
 
+```html
+<h1 class="text-xl font-bold mb-md">
+  Write most page content using utility classes. Use what is available or add more when needed.
+</h1>
+
+<div class="component">
+  Write custom CSS using predefined variables for more complex stuff.
+</div>
+```
+
 ```css
 .component {
-  background-color: var(--red-500);  
+  background-color: var(--red-500);
   border-radius: var(--rounded);
   height: var(--size-4);
-
-  @media (--md) {
-    display: none;
-  }
 }
 ```
 
-```html
-  <div class="component mbe-md">
-    <p>content here...</p>
-  </div>
-```
-
-## Files
+## Reference
 
 - [Sizes](app/assets/stylesheets/sizes.css)
 - [Colors](app/assets/stylesheets/colors.css)
 - [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)
 
+## Customization
+
+```css
+:root {
+  --color-negative: var(--pink-700);
+  --color-postive: var(--lime-700);
+  --color-bg: white;
+  --color-bg-surface: var(--zinc-100);
+  --color-text: var(--zinc-950);
+  --color-text-reversed: white;
+  --color-text-subtle: var(--zinc-600);
+  --color-border: var(--zinc-200);
+}
+```
+
+```html
+<div class="flex flex-column w-full gap" style="--row-gap: 0.5rem">
+  More HTML tags here...
+</div>
+```
+
 ## Development
 
 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

@@ -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/colors.css

@@ -1,4 +1,5 @@
 :root {
+  /* Named color values */
   --slate-50:  #f8fafc;
   --slate-100: #f1f5f9;
   --slate-200: #e2e8f0;
@@ -262,4 +263,25 @@
   --rose-800: #9f1239;
   --rose-900: #881337;
   --rose-950: #4c0519;
+
+  /* Abstractions */
+  --color-negative: var(--pink-700);
+  --color-postive: var(--lime-700);
+  --color-bg: white;
+  --color-bg-surface: var(--zinc-100);
+  --color-text: var(--zinc-950);
+  --color-text-reversed: white;
+  --color-text-subtle: var(--zinc-600);
+  --color-border: var(--zinc-200);
+
+  /* Redefine named color values for dark mode */
+  @media (prefers-color-scheme: dark) {
+    --color-negative: var(--pink-400);
+    --color-postive: var(--lime-300);
+    --color-bg: var(--zinc-900);
+    --color-bg-surface: var(--zinc-950);
+    --color-text: white;
+    --color-text-reversed: var(--zinc-950);
+    --color-border: rgba(255, 255, 255, 0.1);
+  }
 }

data/app/assets/stylesheets/sizes.css

@@ -68,17 +68,29 @@
   --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 */
+  --width-prose: 65ch;
+
+  /****************************************************************
+  * 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

@@ -47,7 +47,7 @@
 /****************************************************************
 * Text
 *****************************************************************/
-.font-normal { font-weight: var(--font-normal); }
+.font-normal { font-weight: var(--font-normal); font-style: normal; }
 .font-medium { font-weight: var(--font-medium); }
 .font-bold { font-weight: var(--font-bold); }
 
@@ -71,7 +71,11 @@
 .leading-tight { line-height: var(--leading-tight); }
 .leading-normal { line-height: var(--leading-normal); }
 
-.text-inherit	{ color: inherit; }
+.text-primary { color: var(--color-text); }
+.text-reversed { color: var(--color-text-reversed); }
+.text-subtle { color: var(--color-text-subtle); }
+.text-negative { color: var(--color-negative); }
+.text-positive { color: var(--color-positive); }
 
 .text-xs { font-size: var(--text-xs); }
 .text-sm { font-size: var(--text-sm); }
@@ -83,16 +87,33 @@
 .text-4xl { font-size: var(--text-4xl); }
 .text-5xl { font-size: var(--text-5xl); }
 
+/****************************************************************
+* Background
+*****************************************************************/
+.bg-main { background-color: var(--color-bg); }
+.bg-white { background-color: var(--color-text-reversed); }
+.bg-surface { background-color: var(--color-bg-surface); }
+.bg-transparent { background-color: transparent; }
+
 /****************************************************************
 * Border
 *****************************************************************/
-.border-0 { border-width: 0px; }
-.border-t { border-top-width: 1px; }
-.border-b { border-bottom-width: 1px; }
-.border-l { border-left-width: 1px; }
-.border-r { border-right-width: 1px; }
-.border { border-width: 1px; }
-.rounded-full { border-radius: 9999px; }
+.border-0 { border: 0; }
+.border { border: var(--border-size, 1px) solid var(--color-border); }
+.border-t { border-top: var(--border-size, 1px) solid var(--color-border); }
+.border-b { border-bottom: var(--border-size, 1px) solid var(--color-border); }
+.border-l { border-left: var(--border-size, 1px) solid var(--color-border); }
+.border-r { border-right: var(--border-size, 1px) solid var(--color-border); }
+
+.border-radius { border-radius: var(--border-radius, 0.5rem); }
+
+/****************************************************************
+* Shadow
+*****************************************************************/
+.shadow { box-shadow: var(--shadow); }
+.shadow-md { box-shadow: var(--shadow-md); }
+.shadow-lg { box-shadow: var(--shadow-lg); }
+.shadow-xl { box-shadow: var(--shadow-xl); }
 
 /****************************************************************
 * Layout
@@ -101,11 +122,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.3"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.3
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-06-08 00:00:00.000000000 Z
+date: 2024-06-10 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -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 */