feat: new layout pattern: equal

feo.css

@@ -232,6 +232,22 @@
     display: flex;
   }
 
+  .equal {
+    --layout-gap: 0;
+    --layout-align: center;
+    --layout-direction: row;
+    flex-direction: var(--layout-direction);
+    align-items: var(--layout-align);
+    gap: var(--layout-gap);
+    flex-wrap: nowrap;
+    width: 100%;
+    display: flex;
+  }
+
+  .equal > * {
+    flex: 1 1 0;
+  }
+
   .fifty {
     --layout-threshold: 0;
     --layout-gap: 0;

package.json

@@ -9,7 +9,7 @@
     "build:11ty": "npx @11ty/eleventy && yarn css:docs"
   },
   "name": "feo-css",
-  "version": "5.2.3",
+  "version": "5.3.0",
   "main": "feo.css",
   "description": "A tiny CSS framework",
   "repository": "https://github.com/vyckes/feo-css.git",

site/layouts/equal.md

@@ -0,0 +1,46 @@
+---
+layout: base.njk
+title: Equal
+key: layouts
+subkey: equal
+---
+
+Makes a wrapper fill the available space and makes all the children equal size within that space. Does not wrap.
+
+## Implementation
+
+```
+<div class="equal">
+  ...
+</div>
+```
+
+## API
+
+<div>
+  <table>
+    <thead>
+      <tr><th>Custom property</th><th>Default</th><th>Description</th></tr>
+    </thead>
+    <tbody>
+      <tr><td><code>--layout-gap</code></td><td><code>0</code></td><td>Sets the <code>gap</code> of the targeted element</tr>
+      <tr><td><code>--layout-align</code></td><td><code>center</code></td><td>Sets the <code>align-items</code> of the targeted element</tr>
+      <tr><td><code>--layout-direction</code></td><td><code>row</code></td><td>Sets the <code>flex-direction</code> of the targeted element</tr>
+    </tbody>
+  </table>
+</div>
+
+## Utility classes
+
+<div>
+  <table>
+    <thead>
+      <tr><th>Class name</th><th>Required?</th><th>Description</th></tr>
+    </thead>
+    <tbody>
+      <tr><td><code>--gap-{z}</code></td><td></td><td>Controls the <code>--layout-gap</code> API</tr>
+      <tr><td><code>--column/--row</code></td><td></td><td>Controls the <code>--layout-direction</code> API</tr>
+      <tr><td><code>--start/--end/--center/--stretch</code></td><td></td><td>Controls the <code>--layout-align</code> API</tr>
+    </tbody>
+  </table>
+</div>

src/index.css

@@ -8,6 +8,7 @@
 /** layout */
 @import "layout/center.css" layer(layout);
 @import "layout/cluster.css" layer(layout);
+@import "layout/equal.css" layer(layout);
 @import "layout/fifty.css" layer(layout);
 @import "layout/flex.css" layer(layout);
 @import "layout/grid.css" layer(layout);

src/layout/equal.css

@@ -0,0 +1,21 @@
+/**
+ * Makes a wrapper fill the available space
+ * Makes all children equal size in the available space
+ */
+
+.equal {
+  --layout-gap: 0;
+  --layout-align: center;
+  --layout-direction: row;
+
+  display: flex;
+  flex-direction: var(--layout-direction);
+  flex-wrap: nowrap;
+  align-items: var(--layout-align);
+  gap: var(--layout-gap);
+  width: 100%;
+}
+
+.equal > * {
+  flex: 1 1 0px;
+}