u2ui 1.0.1 → 1.4.6

package/class/card/README.md

@@ -0,0 +1,51 @@
+# .u2-card - class
+All children except img/video/hr have padding. Child with class="-body" fills space, last element is pushed down. 
+
+- By default it has a box-shadow and a border-radius
+- Children have paddings but not images
+- Last child is sticky to the bottom
+- If a child has class "-body", it will grow to fill the space.
+- First and last child inherit the border-radius
+
+## Usage
+
+```html
+<article class=u2-card>
+    <img src="https://picsum.photos/800/200" width=800 height=200 alt="image">
+    <div class=-body>
+        <h4>Card</h4>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit.
+    </div>
+    <div>
+        <button>button 1</button>
+        <button>button 2</button>
+    </div>
+</article>
+```
+
+```css
+.u2-card {
+    --gap:.7rem;
+    max-width:30rem;
+    border-radius: 1.2rem;
+}
+```
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/class/card/card.css" rel=stylesheet>
+```
+
+## Demos
+
+[table.html](http://gcdn.li/u2ui/u2@main/class/card/tests/table.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/class/card/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/class/card/tests/minimal.html)  
+[play.html](http://gcdn.li/u2ui/u2@main/class/card/tests/play.html)  
+
+## About
+
+- MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
+- Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
+

package/class/card/card.css

@@ -0,0 +1,31 @@
+.u2-card {
+    display: flex;
+    flex-direction: column;
+    box-shadow: var(--shadow);
+    border-radius: var(--radius);
+    color: var(--color-text, inherit);
+    text-decoration:none;
+}
+.u2-card > :not(img, video, hr) {
+    margin: 0;
+    padding: var(--gap);
+}
+.u2-card > hr {
+    margin-block:0;
+}
+.u2-card > :first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
+.u2-card > :last-child { border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; }
+
+.u2-card > .-body { flex:1 0 auto; }
+.u2-card > .-foot { margin-top:auto; }
+
+
+/* todo if needed
+:where(a.u2-card) {
+    transition: box-shadow .1s;
+}
+:where(a.u2-card:hover) {
+    xbox-shadow: var(--shadow-x) var(--shadow-y) 1.6rem -.5rem rgba(23, 23, 23, 0.35),
+                var(--shadow-x) var(--shadow-y) 1.0rem -.7rem rgba(23, 23, 23, 0.2);
+}
+*/

package/class/flex/README.md

@@ -9,36 +9,36 @@ Most wanted flexbox case
 ## Usage
 
 ```html
-<div class=u2-flex>
-    <div>Flexbox layout</div>
-    <div>Item 2</div>
-    <div>Item 3</div>
-    <div>Item 4</div>
-    <div>Item 5</div>
+<div class=u2-flex>
+    <div>Flexbox layout</div>
+    <div>Item 2</div>
+    <div>Item 3</div>
+    <div>Item 4</div>
+    <div>Item 5</div>
 </div>
 ```
 
 ```css
-.u2-flex {
-    --u2-Gap:1rem;
-    --u2-Row-gap:2rem;
-}
-.u2-flex > * {
-    border:1px solid;
-    padding:2rem;
+.u2-flex {
+    --u2-Gap:1rem;
+    --u2-Row-gap:2rem;
+}
+.u2-flex > * {
+    border:1px solid;
+    padding:2rem;
 }
 ```
 
 ## Install
 
 ```html
-<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/class/flex/flex.min.css" rel=stylesheet>
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/class/flex/flex.css" rel=stylesheet>
 ```
 
 ## Demos
 
-[minimal.html](http://gcdn.li/u2ui/u2@main/class/flex/tests/minimal.html)  
 [test.html](http://gcdn.li/u2ui/u2@main/class/flex/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/class/flex/tests/minimal.html)  
 
 ## Note
 
@@ -51,7 +51,7 @@ Add a wrapper element if you like to add margin to the container
   <ul class=u2-flex>
     <li> first
     <li> second  
-  </u2>
+  </ul>
 <div>
 ```
 

package/class/flex/flex.css

@@ -1,25 +1,15 @@
-/* todo? all margins except right important? */
-
-.u2-flex {
-    --u2-Gap:1rem;
-    --u2-Row-gap:var(--u2-Gap);
-    --u2-Col-gap:var(--u2-Gap);
-    display:flex;
-    flex-wrap:wrap;
-    column-gap: var(--u2-Col-gap);
-    row-gap:    var(--u2-Row-gap);
-
-    /* would this be useful? *
-    --u2-Items-width: 10rem;
-    container-name: u2-items;
-    container-type: inline-size;
-    */
-}
-
-/* would this be useful? *
-.u2-flex > * {
-    flex: 0 0 var(--u2-Items-width);
-    container-name: u2-item;
-    container-type: inline-size;
-}
-*/
+/* todo? all margins except right important? */
+
+.u2-flex {
+    --u2-Gap:1rem;
+    --u2-Row-gap:var(--u2-Gap);
+    --u2-Col-gap:var(--u2-Gap);
+    display:flex;
+    flex-wrap:wrap;
+    column-gap: var(--u2-Col-gap);
+    row-gap:    var(--u2-Row-gap);
+}
+
+.u2-flex > * { margin:0; }
+.u2-flex.-Between { justify-content:space-between; }
+.u2-flex.-Col { flex-direction: column; }

package/class/grid/README.md

@@ -11,39 +11,39 @@ handy util-class to make a auto-column grid
 ## Usage
 
 ```html
-<div class=u2-grid style="--u2-Items-width:3rem">
-    <div>Grid layout</div>
-    <div>item2</div>
-    <div>item3</div>
-    <div>item4</div>
-    <div>item5</div>
-    <div>item6</div>
-    <div>item7</div>
+<div class=u2-grid style="--u2-Items-width:3rem">
+    <div>Grid layout</div>
+    <div>item2</div>
+    <div>item3</div>
+    <div>item4</div>
+    <div>item5</div>
+    <div>item6</div>
+    <div>item7</div>
 </div>
 ```
 
 ```css
-.u2-grid {
-    --u2-Gap:2rem;
-    --u2-Col-gap:1rem;
-    --u2-Items-width:8rem;
-}
-.u2-grid > * {
-    border:1px solid black;
-    padding:.5em;
+.u2-grid {
+    --u2-Gap:2rem;
+    --u2-Col-gap:1rem;
+    --u2-Items-width:8rem;
+}
+.u2-grid > * {
+    border:1px solid black;
+    padding:.5em;
 }
 ```
 
 ## Install
 
 ```html
-<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/class/grid/grid.min.css" rel=stylesheet>
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/class/grid/grid.css" rel=stylesheet>
 ```
 
 ## Demos
 
-[minimal.html](http://gcdn.li/u2ui/u2@main/class/grid/tests/minimal.html)  
 [test.html](http://gcdn.li/u2ui/u2@main/class/grid/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/class/grid/tests/minimal.html)  
 
 ## About
 

package/class/grid/grid.css

@@ -1,40 +1,38 @@
-.u2-grid {
-    --u2-Items-width: 10rem;
-    --u2-Gap: 1rem;
-    --u2-Col-gap: var(--u2-Gap);
-    --u2-Row-gap: var(--u2-Gap);
-    display: grid;
-    column-gap: var(--u2-Col-gap);
-    row-gap:    var(--u2-Row-gap);
-    grid-template-columns: repeat(auto-fill, minmax( var(--u2-Items-width), 1fr) ); /* min() not supported everywhere? */
-    grid-template-columns: repeat(auto-fill, minmax( min(var(--u2-Items-width), 100%) , 1fr) );
-    grid-auto-flow:dense; /* why */
-
-    container-name: u2-items;
-    container-type: inline-size;
-
-    /* if using display:flex ?
-    flex-wrap:wrap;
-    justify-content:center;
-    */
-}
-
-.u2-grid > * {
-    container-name: u2-item;
-    container-type: inline-size;
-}
-
-
-table.u2-grid {
-    display:grid;
-    > * {
-        display:contents; /* tbody */
-        > * { /* tr */
-            display:block;
-            > * { /* td */
-                display:block;
-                padding:0;
-            }
-        }
-    }
-}
+.u2-grid {
+    --u2-Items-width: 11rem;
+    --u2-Gap: 1rem;
+    --u2-Col-gap: var(--u2-Gap);
+    --u2-Row-gap: var(--u2-Gap);
+    display: grid;
+    column-gap: var(--u2-Col-gap);
+    row-gap: var(--u2-Row-gap);
+    grid-template-columns: repeat(auto-fill, minmax(min(var(--u2-Items-width), 100%), 1fr));
+    /* problems in chrome? check if a parent flex-item needs min-width:0; */
+    grid-auto-flow: dense;
+    /* if using display:flex ?
+    flex-wrap:wrap;
+    justify-content:center;
+    */
+}
+
+.u2-grid > * { margin: 0; }
+
+table.u2-grid {
+    display: grid;
+
+    >* {
+        display: contents;
+
+        /* tbody */
+        >* {
+            /* tr */
+            display: block;
+
+            >* {
+                /* td */
+                display: block;
+                padding: 0;
+            }
+        }
+    }
+}

package/class/reset/README.md

@@ -18,22 +18,22 @@ button:hover {
 ## Usage
 
 ```html
-<h1>Heading 1</h1>
-<div class=u2-reset>
-    <h1>Heading 1</h1>
+<h1>Heading 1</h1>
+<div class=u2-reset>
+    <h1>Heading 1</h1>
 </div>
 ```
 
 ```css
-h1 {
-    margin:0 2rem;
+h1 {
+    margin:0 2rem;
 }
 ```
 
 ## Install
 
 ```html
-<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/class/reset/reset.min.css" rel=stylesheet>
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/class/reset/reset.css" rel=stylesheet>
 ```
 
 ## Demos

package/class/reset/reset.css

@@ -1,8 +1,8 @@
-.u2-reset {
-	font-size:1rem; /* hm.. i rewrite font-size on the body to implement a min-fonts-size, better inherit? */
-	color:var(--color-text);
-	background-color:var(--color-bg);
-}
-.u2-reset :is(h1,h2,h3,h4,h5,h6) {
-	margin:1em 0;
-}
+.u2-reset {
+	font-size:1rem; /* hm.. i rewrite font-size on the body to implement a min-fonts-size, better inherit? */
+	color:var(--color-text);
+	background-color:var(--color-bg);
+}
+.u2-reset :is(h1,h2,h3,h4,h5,h6) {
+	margin:1em 0;
+}

package/class/table/README.md

@@ -3,7 +3,7 @@ Better tables
 
 ## Features
 
-- adds at the table definded paddings `--u2-Col-gap` `--u2-Col-gap` `--u2-Row-gap`
+- adds at the table defined paddings `--u2-Col-gap` `--u2-Col-gap` `--u2-Row-gap`
 - makes non-table elements table-like
 - Use modifier classes: 
     - Flex: To make table rows flex and break rows on smaller screens
@@ -14,41 +14,42 @@ Better tables
 ## Usage
 
 ```html
-<table class="u2-table x-Flex -NoSideGaps -Sticky x-Fields">
-    <thead>
-        <tr>
-            <th>Table
-            <th>Column
-            <th>Colunn
-    <tbody>
-        <tr>
-            <td>Cell 1/1
-            <td>Cell 1/2
-            <td>Cell 1/3
-        <tr>
-            <td>Cell 2/1
-            <td>Cell 2/2
-            <td>Cell 1/3
+<table class="u2-table x-Flex -NoSideGaps -Sticky x-Fields">
+    <thead>
+        <tr>
+            <th>Table
+            <th>Column
+            <th>Column
+    <tbody>
+        <tr>
+            <td>Cell 1/1
+            <td>Cell 1/2
+            <td>Cell 1/3
+        <tr>
+            <td>Cell 2/1
+            <td>Cell 2/2
+            <td>Cell 1/3
 </table>
 ```
 
 ```css
-.u2-table {
-    --u2-Gap:2rem;
-    --u2-Col-gap:1rem;
+.u2-table {
+    --u2-Gap:2rem;
+    --u2-Col-gap:1rem;
 }
 ```
 
 ## Install
 
 ```html
-<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/class/table/table.min.css" rel=stylesheet>
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/class/table/table.css" rel=stylesheet>
 ```
 
 ## Demos
 
-[minimal.html](http://gcdn.li/u2ui/u2@main/class/table/tests/minimal.html)  
 [test.html](http://gcdn.li/u2ui/u2@main/class/table/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/class/table/tests/minimal.html)  
+[fields.experiments.html](http://gcdn.li/u2ui/u2@main/class/table/tests/fields.experiments.html)  
 
 ## About