From da6bef3d20d4950ab889addaeff0855614040c13 Mon Sep 17 00:00:00 2001
From: Nathaniel Sabanski
Date: Fri, 6 Sep 2024 02:54:57 -0700
Subject: [PATCH 01/10] Added more Tailwind showndown notes.
---
README.md | 8 +++++++-
1 file changed, 7 insertions(+), 1 deletion(-)
diff --git a/README.md b/README.md
index deece2b..f295c9a 100644
--- a/README.md
+++ b/README.md
@@ -52,6 +52,7 @@ Use whatever you'd like, but there's a few advantages with this approach over Ta
* No high risk of eventually requiring a build step.
* No chance of [deprecations](https://windicss.org/posts/sunsetting.html). 16 lines is infinitely maintainable.
* Get the ultra-fast "inspect, play with styles, paste" workflow back.
+* No suffering from a lack of syntax highlighting on properties and units.
* No suffering from FOUC (a flash of unstyled content).
* Zero friction movement of styles between inline and `.css` files. Just replace `me`
* No special tooling or plugins to install. Universal vanilla CSS.
@@ -103,7 +104,12 @@ Tailwind verbosity goes up with more child elements.
green
```
-### CSS variables and child styling
+
+### CSS variables and child elements
+At first glance, **Tailwind Example 2** looks very promising! Exciting ...but:
+* 🔴 **Every child style requires a selector** so the short style advantage unfortunately disappears.
+ * This trivial example is the best case scenario for Tailwind.
+* 🔴 Not visible on github, but **zero highlighting for properties and units** begins to become painful.
```html
From 50e225e3d239264bd9b5e0867a0cc1ce2d9ab885 Mon Sep 17 00:00:00 2001
From: Nathaniel Sabanski
Date: Fri, 6 Sep 2024 02:59:08 -0700
Subject: [PATCH 02/10] Added more Tailwind showndown notes.
---
README.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/README.md b/README.md
index f295c9a..cc8821b 100644
--- a/README.md
+++ b/README.md
@@ -107,9 +107,9 @@ Tailwind verbosity goes up with more child elements.
### CSS variables and child elements
At first glance, **Tailwind Example 2** looks very promising! Exciting ...but:
-* 🔴 **Every child style requires a selector** so the short style advantage unfortunately disappears.
+* 🔴 **Every child style requires a selector** - shorthand style advantage sadly disappears.
* This trivial example is the best case scenario for Tailwind.
-* 🔴 Not visible on github, but **zero highlighting for properties and units** begins to become painful.
+* 🔴 Not visible on github: **no highlighting for properties and units** begins to be painful.
```html
From de4f6fbd8d1d14ace6755f3c2ec284513f414a46 Mon Sep 17 00:00:00 2001
From: Nathaniel Sabanski
Date: Fri, 6 Sep 2024 03:00:24 -0700
Subject: [PATCH 03/10] Added more Tailwind showndown notes.
---
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/README.md b/README.md
index cc8821b..50d34b9 100644
--- a/README.md
+++ b/README.md
@@ -52,7 +52,7 @@ Use whatever you'd like, but there's a few advantages with this approach over Ta
* No high risk of eventually requiring a build step.
* No chance of [deprecations](https://windicss.org/posts/sunsetting.html). 16 lines is infinitely maintainable.
* Get the ultra-fast "inspect, play with styles, paste" workflow back.
-* No suffering from a lack of syntax highlighting on properties and units.
+* No suffering from missing syntax highlighting on properties and units.
* No suffering from FOUC (a flash of unstyled content).
* Zero friction movement of styles between inline and `.css` files. Just replace `me`
* No special tooling or plugins to install. Universal vanilla CSS.
From b999e214179505c31ca7863a82b4ae50a6807db6 Mon Sep 17 00:00:00 2001
From: Nathaniel Sabanski
Date: Fri, 6 Sep 2024 03:29:07 -0700
Subject: [PATCH 04/10] Added more Tailwind showndown notes.
---
README.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/README.md b/README.md
index 50d34b9..d166e3a 100644
--- a/README.md
+++ b/README.md
@@ -107,8 +107,8 @@ Tailwind verbosity goes up with more child elements.
### CSS variables and child elements
At first glance, **Tailwind Example 2** looks very promising! Exciting ...but:
-* 🔴 **Every child style requires a selector** - shorthand style advantage sadly disappears.
- * This trivial example is the best case scenario for Tailwind.
+* 🔴 **Every child style requires an explicit selector** - shorthand advantages sadly disappear.
+ * This small example is the best case scenario for Tailwind. Every new child style past this point will be longer than vanilla CSS.
* 🔴 Not visible on github: **no highlighting for properties and units** begins to be painful.
```html
From 42a2e2ade70e068c7db2afe591dc9acc18d7008c Mon Sep 17 00:00:00 2001
From: Nathaniel Sabanski
Date: Fri, 6 Sep 2024 03:38:27 -0700
Subject: [PATCH 05/10] Added more Tailwind showndown notes.
---
README.md | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
diff --git a/README.md b/README.md
index d166e3a..a51c298 100644
--- a/README.md
+++ b/README.md
@@ -107,8 +107,10 @@ Tailwind verbosity goes up with more child elements.
### CSS variables and child elements
At first glance, **Tailwind Example 2** looks very promising! Exciting ...but:
-* 🔴 **Every child style requires an explicit selector** - shorthand advantages sadly disappear.
- * This small example is the best case scenario for Tailwind. Every new child style past this point will be longer than vanilla CSS.
+* 🔴 **Every child style requires an explicit selector.**
+ * Tailwinds' shorthand advantages sadly disappear.
+ * Any more child styles added in Tailwind will become longer than vanilla CSS.
+ * This limited example is the best case scenario for Tailwind.
* 🔴 Not visible on github: **no highlighting for properties and units** begins to be painful.
```html
From 4793a38ddb6d074f65a47058823782e3fed2e001 Mon Sep 17 00:00:00 2001
From: Nathaniel Sabanski
Date: Fri, 13 Sep 2024 12:16:21 -0700
Subject: [PATCH 06/10] Updated link for keyframe scoping
---
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/README.md b/README.md
index a51c298..0347674 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@
* Hate creating unique class names over.. and over.. to use once.
* You want to co-locate your styles for ⚡️ [Locality of Behavior (LoB)](https://htmx.org/essays/locality-of-behaviour/)
* You wish `this` would work in `
red
green
From 3ed9972f5b2b268b0f3fcdd5b122fb089ab365f6 Mon Sep 17 00:00:00 2001
From: Nathaniel Sabanski
Date: Wed, 27 Nov 2024 15:45:27 -0800
Subject: [PATCH 08/10] Update README.md
---
README.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/README.md b/README.md
index 4a75837..c87898c 100644
--- a/README.md
+++ b/README.md
@@ -63,8 +63,8 @@ Use whatever you'd like, but there's a few advantages with this approach over Ta
* Flat, 1 selector per line can be very short like Tailwind. See the examples.
* Use just plain CSS variables in your design system.
* Use the short `@media` queries for responsive design.
- * Mobile First (flow: **above** breakpoint): **🟢 None** `sm` `md` `lg` `xl` `xx` 🏁
- * Desktop First (flow: **below** breakpoint): 🏁 `xs-` `sm-` `md-` `lg-` `xl-` **🟢 None**
+ * Mobile First (flow: **above** breakpoint): **🟢 None (xs)** `sm` `md` `lg` `xl` `xx` 🏁
+ * Desktop First (flow: **below** breakpoint): 🏁 `xs-` `sm-` `md-` `lg-` `xl-` **🟢 None (xx)**
* 🟢 = No breakpoint. Default. See the [Live Example](https://gnat.github.io/css-scope-inline/example.html)!
* Based on [Tailwind](https://tailwindcss.com/docs/responsive-design) breakpoints. We use `xx` not `2xl` to not break CSS highlighters.
* Unlike Tailwind, you can [nest your @media styles](https://developer.chrome.com/articles/css-nesting/#nesting-media)!
From b75583fe2bc4af41c4f187a5bb7ef5a790ce90cd Mon Sep 17 00:00:00 2001
From: Nathaniel Sabanski
Date: Thu, 28 Nov 2024 13:28:02 -0800
Subject: [PATCH 09/10] Improved Responsive Design docs.
---
example.html | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/example.html b/example.html
index 2c59d33..02fb7e7 100644
--- a/example.html
+++ b/example.html
@@ -74,7 +74,7 @@
🛸 Scoped style using me
me div ul li { display: inline-block; width: 110px; text-align: center; background: #444; border-radius: 5px; padding: 10px 2px; margin: 10px 10px }