Docs and color improvements

docs/_includes/default.njk

@@ -65,7 +65,7 @@
 
       <footer>
         <hr />
-        Made in Germany by <a href="{{ creatorUrl }}" target="_blank">devmount</a>.
+        Made by <a href="{{ creatorUrl }}" target="_blank">devmount</a>.
         Provided under the <a href="{{ repoUrl }}/blob/main/LICENSE" target="_blank">MIT License</a>.
       </footer>
     </main>

docs/assets/scripts/docs.js

@@ -3,11 +3,11 @@ const toast = document.querySelector('#toast');
 const toggleToast = () => toast.classList.toggle('active');
 const toastPositions = ['br', 'tr', 'tl', 'bl'];
 const positionToast = (pos) => {
-  toastPositions.filter(p => p !== pos).forEach(p => toast.classList.remove(p));
+  toastPositions.forEach(p => toast.classList.remove(p));
   toast.classList.add(pos);
 }
 const toastColors = ['neutral', 'accent', 'positive', 'negative'];
 const colorToast = (col) => {
-  toastColors.filter(c => c !== col).forEach(c => toast.classList.remove(c));
+  toastColors.forEach(c => toast.classList.remove(c));
   toast.classList.add(col);
 }

docs/pages/components/badge.md

@@ -9,32 +9,38 @@ Badges indicate the status of an element, the appearance of an event or counts o
 
 ### Basic text badges
 
-Use the `.badge` class to add a small bubble indicator at the top right corner of the enclosed element. Use the `data-badge` attribute to add content to that bubble. If you want to draw even more attention to the badge, you can use the `.pulse` class in addition.
+Use the `badge` class to add a small bubble indicator at the top right corner of the enclosed element. Use the `data-badge` attribute to add content to that bubble. If you want to draw even more attention to the badge, you can use the `pulse` class in addition.
 
-<div class="demo flex gap-8">
+<div class="demo flex flex-wrap gap-8">
   <span class="badge">Inbox</span>
   <span class="badge" data-badge="12">Inbox</span>
   <span class="badge pulse" data-badge="99+">Inbox</span>
+  <span class="badge" data-badge="new">CSS4 now available!</span>
 </div>
 
 ```html
 <span class="badge">Inbox</span>
 <span class="badge" data-badge="12">Inbox</span>
 <span class="badge pulse" data-badge="99+">Inbox</span>
+<span class="badge" data-badge="new">CSS4 now available!</span>
 ```
 
+> Note that the badge element itself is by design not part of the text flow to keep spacing between elements consistent. Therefore long badge contents should be avoided or only used where appropriate.
+
 ### Button badges
 
-This also works for button elements.
+The `badge` class also works on button elements.
 
-<div class="demo flex gap-8">
+<div class="demo flex flex-wrap gap-8">
   <button class="badge">Inbox</button>
   <button class="badge" data-badge="12">Inbox</button>
   <button class="badge pulse" data-badge="99+">Inbox</button>
+  <button class="badge" data-badge="new">CSS4 Spec</button>
 </div>
 
 ```html
 <button class="badge">Inbox</button>
 <button class="badge" data-badge="12">Inbox</button>
 <button class="badge pulse" data-badge="99+">Inbox</button>
+<button class="badge" data-badge="new">CSS4 Spec</button>
 ```

docs/pages/components/breadcrumb.md

@@ -11,7 +11,7 @@ a horizontal scrollbar appears.
 
 ### Basic breadcrumb path
 
-Use the `.breadcrumb` class on an ordered list to format the contained elements.
+Use the `breadcrumb` class on an ordered list to format the contained elements.
 
 <div class="demo">
   <ol class="breadcrumb">
@@ -43,7 +43,7 @@ Use the `.breadcrumb` class on an ordered list to format the contained elements.
 
 ### Change the separator symbol
 
-Per default, breadcrumbs are separated with a `/`.
+Per default, breadcrumbs are separated with a `/`
 Use the `--breadcrumb-symbol` custom property to change the symbol.
 
 <div class="demo">

docs/pages/components/callout.md

@@ -9,7 +9,7 @@ A callout is a static message component, that is embedded and always visible wit
 
 ### Basic callout
 
-Use the `.callout` class to create a box that emphasizes its content.
+Use the `callout` class to create a box that emphasizes its content.
 
 <div class="demo">
   <div class="max-w-screen-sm">
@@ -28,7 +28,7 @@ Use the `.callout` class to create a box that emphasizes its content.
 
 ### Colored callout
 
-Use the `.accent`, `.positive` or `.negative` classes to give the callout more meaning.
+Use the `accent`, `positive` or `negative` classes to give the callout more meaning.
 
 <div class="demo">
   <div class="max-w-screen-sm">

docs/pages/components/separator.md

@@ -9,7 +9,7 @@ Separators divide content into different parts providing visual breaks for the u
 
 ### Horizontal separators
 
-Use the `.separator` class to add a horizontal line. Every content added to that element appears as its label, even single spaces. No content will result in a single horizontal line.
+Use the `separator` class to add a horizontal line. Every content added to that element appears as its label, even single spaces. No content will result in a single horizontal line.
 
 <div class="demo">
   <div class="max-w-screen-xs text-center">
@@ -31,9 +31,9 @@ Use the `.separator` class to add a horizontal line. Every content added to that
 
 ### Vertical separators
 
-Use the `.separator` and the `.vertical` class to add a vertical line. Every content added to that element appears as its label. No content will result in a single vertical line.
+Use the `separator` and the `vertical` class to add a vertical line. Every content added to that element appears as its label. No content will result in a single vertical line.
 
-> Note that vertical separators only work in a flex container with flex direction row. If you're using utility classes, you can just give it the `.flex` class or set `display: flex;` on it.
+> Note that vertical separators only work in a flex container with flex direction row. If you're using utility classes, you can just give it the `flex` class or set `display: flex;` on it.
 
 <div class="demo">
   <div class="max-w-screen-md flex">

docs/pages/components/state.md

@@ -10,7 +10,7 @@ that something is missing or needs to be done first to achieve a goal.
 
 ### Empty state
 
-Use the `.state.empty` classes for a placeholder section which awaits user input to show a result.
+Use the `state empty` classes for a placeholder section which awaits user input to show a result.
 
 <div class="demo">
   <div class="state empty">
@@ -32,7 +32,7 @@ Use the `.state.empty` classes for a placeholder section which awaits user input
 
 ### Highlighted state
 
-Use the `.state.highlighted` classes for an accentuated section e.g. which awaits a user action like a drag and drop target area.
+Use the `state highlighted` classes for an accentuated section e.g. which awaits a user action like a drag and drop target area.
 
 <div class="demo">
   <div class="state highlighted">

docs/pages/components/toast.md

@@ -11,7 +11,7 @@ A toast notificataion is a dynamic message component, that is only visible after
 
 ### Basic toast
 
-Use the `.toast.callout` selector to create a toast notification. The toast element is hidden by default, use the `.active` class to show it.
+Use the `toast callout` classes to create a toast notification. The toast element is hidden by default, use the `active` class to show it.
 
 <div class="demo">
   <p>The demo can be seen directly on this page in the bottom right corner.</p>
@@ -33,27 +33,27 @@ Use the `br`, `tr`, `tl` and `bl` classes to position the toast notification on
 
 <div class="demo">
   <p>The demo can be seen directly on this page. Use the following controls to change it's position.</p>
-  <div class="control flex gap-2">
-    <button onclick="positionToast('br')">
-      <code>br</code> Bottom Right
+  <div class="control grid grid-cols-2 max-w-screen-xs gap-2">
+    <button class="muted" onclick="positionToast('tl')">
+      <code>tl</code> Top Left
     </button>
     <button onclick="positionToast('tr')">
       <code>tr</code> Top Right
     </button>
-    <button onclick="positionToast('tl')">
-      <code>tl</code> Top Left
-    </button>
-    <button onclick="positionToast('bl')">
+    <button class="positive" onclick="positionToast('bl')">
       <code>bl</code> Bottom Left
     </button>
+    <button class="negative" onclick="positionToast('br')">
+      <code>br</code> Bottom Right
+    </button>
   </div>
 </div>
 
 ```html
-<div class="toast callout br">...</div>
+<div class="toast callout tl">...</div>
 <div class="toast callout tr">...</div>
 <div class="toast callout bl">...</div>
-<div class="toast callout tl">...</div>
+<div class="toast callout br">...</div>
 ```
 
 ### Colored toasts

docs/pages/utilities/border.md

@@ -9,6 +9,8 @@ Utility classes for controlling the border of elements.
 
 ### Rounded border
 
+Use the `rounded` and `rounded-full` classes to control the border radius.
+
 <div class="demo flex gap-8">
   <div class="flex-col items-center gap-4">
     <div class="w-16 h-16 bg-accent rounded"></div>

docs/pages/utilities/colors.md → docs/pages/utilities/color.md

@@ -1,5 +1,5 @@
 ---
-title: 'Utilities: Colors - Sloth.css'
+title: 'Utilities: Color - Sloth.css'
 description: Utility classes of Sloth.css for color related styles.
 ---
 
@@ -13,23 +13,23 @@ Text is colored according to the color scheme per default. Use the `text-inverte
 
 <div class="demo">
   <p>Default text</p>
-  <p class="text-inverted">Inverted color <code>.text-accent</code></p>
   <p class="text-accent">Accent color <code>.text-accent</code></p>
   <p class="text-muted">Muted text <code>.text-muted</code></p>
   <p class="text-positive">Positive message <code>.text-positive</code></p>
   <p class="text-negative">Negative message <code>.text-negative</code></p>
+  <p class="text-inverted">Inverted color <code>.text-accent</code></p>
 </div>
 
 ```html
 <p>Default text</p>
-<p class="text-inverted">Inverted color</p>
 <p class="text-accent">Accent color</p>
 <p class="text-muted">Muted text</p>
 <p class="text-positive">Positive message</p>
 <p class="text-negative">Negative message</p>
+<p class="text-inverted">Inverted color</p>
 ```
 
-> Note that you can use `.text-light` and `.text-dark` to keep the text color despite the color scheme. But please only use this with sufficient contrast to the background.
+> Note that you can use `text-light` and `text-dark` to keep the text color despite the color scheme. But please only use this with sufficient contrast to the background.
 
 Colors can be overwritten by the corresponding custom property:
 

docs/pages/utilities/cursors.md → docs/pages/utilities/cursor.md

@@ -1,13 +1,13 @@
 ---
-title: 'Utilities: Cursors - Sloth.css'
+title: 'Utilities: Cursor - Sloth.css'
 description: Utility classes of Sloth.css for cursors.
 ---
 
-## Cursors
+## Cursor
 
 Utility classes for controlling cursor types.
 
-The following 4 types of cursors are supported. Hover over the colored fields on a device that supports cursors to see them in action.
+Use the `cursor-*` classes to control the mouse cursor appearance. Hover over the colored fields on a device that supports cursors to see them in action.
 
 <div class="demo flex flex-wrap gap-8">
   <div class="flex-col items-center gap-4">

docs/pages/utilities/dimensions.md → docs/pages/utilities/dimension.md

@@ -1,15 +1,15 @@
 ---
-title: 'Utilities: Dimensions - Sloth.css'
+title: 'Utilities: Dimension - Sloth.css'
 description: Utility classes of Sloth.css for size related styles.
 ---
 
-## Color
+## Dimension
 
 Utility classes for controlling the size of elements.
 
 ### Width
 
-Fixed or relative widths can be set for an element with the following classes.
+Fixed or relative widths can be set for an element with the `w-*` classes.
 
 <div class="demo flex-col gap-4">
   <div class="flex gap-4 items-center">
@@ -64,7 +64,7 @@ Fixed or relative widths can be set for an element with the following classes.
 .w-full { width: 100%;  }
 ```
 
-Maximum widths can be set depending on screen breaking points.
+Maximum widths can be set depending on screen breaking points using the `max-w-screen-*` classes.
 
 <div class="demo flex-col gap-4">
   <div class="bg-accent rounded h-8 max-w-screen-xs flex items-center">
@@ -111,7 +111,7 @@ Those can be overwritten by the corresponding custom property:
 
 ### Height
 
-Fixed or relative heights can be set for an element with the following classes.
+Fixed or relative heights can be set for an element with the `h-*` classes.
 
 <div class="demo flex items-end gap-4" style="height: 20rem;">
   <div>

docs/pages/utilities/display.md

@@ -56,7 +56,7 @@ Elements can also be position underneath each other (column direction) instead o
 }
 ```
 
-> Note that `.flex-col` is a display utility and already includes the `display: flex;` rule. So there's no need to use two classes like in Tailwind <del>`flex flex-column`</del>. Just use <ins>`flex-col`</ins>.
+> Note that `flex-col` is a display utility and already includes the `display: flex;` rule. So there's no need to use two classes like in Tailwind <del>`flex flex-column`</del>. Just use <ins>`flex-col`</ins>.
 
 User the `flex-wrap` class, if you want your flex items to break onto a new line when the container limit is reached.
 

docs/pages/utilities/effects.md

@@ -9,7 +9,7 @@ Utility classes for controlling elevation and transformation of elements.
 
 ### Elevation
 
-To make an element appear over or inside a surface, the `.shadow-*` classes can be used.
+To make an element appear over or inside a surface, the `shadow-*` classes can be used.
 
 <div class="demo flex items-start gap-4">
   <div class="flex-col gap-2 items-center justify-center bg-muted p-4 rounded relative">
@@ -38,7 +38,7 @@ To make an element appear over or inside a surface, the `.shadow-*` classes can
 
 ### Transformation
 
-To rotate an element, the `.rotate-*` classes can be used.
+To rotate an element, the `rotate-*` classes can be used.
 
 <div class="demo flex items-start gap-4">
   <div class="flex-col gap-2 items-center justify-center bg-muted p-4 rounded relative">

docs/pages/utilities/positioning.md

@@ -58,7 +58,7 @@ The following 4 values of positions are supported.
 .sticky   { position: sticky;   }
 ```
 
-> Note that `.sticky` always needs a value for the [top property](https://developer.mozilla.org/en-US/docs/Web/CSS/top), hence `top-0` or `top-4` need to be set too.
+> Note that `sticky` always needs a value for the [top property](https://developer.mozilla.org/en-US/docs/Web/CSS/top), hence `top-0` or `top-4` need to be set too.
 
 ### Alignment
 
@@ -153,7 +153,7 @@ For centering content horizontally and vertically, the special utility class `fl
 
 <div class="demo">
   <div class="flex-col gap-4 w-32 bg-muted p-4 rounded">
-    <div class="flex-center">
+    <div class="flex-center h-32">
       <div class="text-light bg-accent-variant flex-center rounded h-8 w-8 font-mono font-bold"></div>
     </div>
     <div class="flex-center"><code>.flex-center</code></div>
@@ -174,7 +174,7 @@ For centering content horizontally and vertically, the special utility class `fl
 }
 ```
 
-> Note that `.flex-center` is a display utility and already includes the `display: flex;` rule. So there's no need to use three classes like in Tailwind <del>`flex justify-center items-center`</del>. Just use <ins>`flex-center`</ins>.
+> Note that `flex-center` is a display utility and already includes the `display: flex;` rule. So there's no need to use three classes like in Tailwind <del>`flex justify-center items-center`</del>. Just use <ins>`flex-center`</ins>.
 
 ### Overflow
 

docs/pages/utilities/spacing.md

@@ -9,7 +9,7 @@ Utility classes for controlling margins, paddings and the space in between eleme
 
 ### Gap
 
-The space between flex or grid items can be set with the `.gap-*` classes.
+The space between flex or grid items can be set with the `gap-*` classes.
 
 <div class="demo flex-col gap-4">
   <div class="flex gap-1 items-center bg-muted w-64 p-4 rounded relative">
@@ -54,7 +54,7 @@ The space between flex or grid items can be set with the `.gap-*` classes.
 
 ### Margin
 
-The outer spacing (margin) for elements can be set with the `.m-*` classes.
+The outer spacing (margin) for elements can be set with the `m-*` classes.
 
 <div class="demo flex items-start gap-4">
   <div class="flex-col gap-2 items-center justify-center bg-muted p-4 rounded relative">
@@ -115,7 +115,7 @@ The outer spacing (margin) for elements can be set with the `.m-*` classes.
 
 ### Padding
 
-The inner spacing (padding) for elements can be set with the `.p-*` classes.
+The inner spacing (padding) for elements can be set with the `p-*` classes.
 
 <div class="demo flex items-start gap-4">
   <div class="flex-col gap-2 items-center justify-center bg-muted p-4 rounded relative">

docs/pages/utilities/text.md

@@ -115,7 +115,7 @@ The basic font size that defines all `rem` based properties (which are almost al
 
 ### Text wrapping and flow
 
-Text can be truncated with an ellipsis using the `.truncate` class, if the containing element has a defined width.
+Text can be truncated with an ellipsis using the `truncate` class, if the containing element has a defined width.
 
 <div class="demo">
   <div class="truncate w-32 p-2 rounded bg-muted">The Sloth is a lazy mammal.</div>

eleventy.config.js

@@ -17,12 +17,12 @@ module.exports = function(eleventyConfig) {
     description: 'A drop-in utility component CSS library for lazy mammals.',
     utilitySections: [
       'border',
-      'colors',
-      'dimensions',
+      'color',
+      'dimension',
       'display',
       'positioning',
       'spacing',
-      'cursors',
+      'cursor',
       'text',
       'effects',
     ],