🔧 Reorganize forms

src/rules/skeleton.less

@@ -195,7 +195,8 @@
         flex-basis: 100%;
     }
 
-    // --- Images ---
+    /// --- Images ---
+    /// Images are changed to block elements and are automatically centered.
 
     @{image} {
         display: block;
@@ -208,16 +209,29 @@
         object-fit: contain;
     }
 
+    // Allow an image to grow to its real size
     @{image-free} {
         max-width: unset;
         max-height: unset;
     }
 
+    // Limit even further the size of an image based on the size of the screen
     @{image-limited} {
         max-height: max(37.5vw, 66.6vh);
     }
 
-    // --- Forms ---
+    /// --- Forms ---
+    /// Forms are containers where interactable elements are contained.
+    /// Every interactable is split in two parts: a label on the left and the control on the right
+    ///
+    /// Example:
+    ///
+    /// Username | Steffo
+    ///    Email | ste.pigozzi@gmail.com
+    /// Password | ············
+    ///  Country | Italy ↓
+    ///
+    ///      [Submit]
 
     @{form} {
         display: grid;
@@ -226,25 +240,29 @@
         row-gap: 4px;
         column-gap: 8px;
 
+        // Labels should have the greater width between the one they require and 1/6 of the form width.
         grid-template-columns: minmax(auto, 1fr) 5fr;
     }
 
     @{form-label} {
+        // Labels are on the left column of the grid
         grid-column: 1;
+        // They should be right-aligned
         justify-self: end;
+        text-align: right;
     }
 
     @{form-input} {
+        // Inputs are on the right column of the grid
         grid-column: 2;
+        // They should occupy all the available space
         justify-self: stretch;
         width: 100%;
     }
 
-    @{form-submit} {
+    // An element filling a whole row of a form
-        width: auto;
+    // Useful for adding buttons or similar flow interruptions
-    }
+    @{form-row} {
-
-    @{form-buttons} {
         grid-column-start: 1;
         grid-column-end: 3;
 
@@ -256,14 +274,6 @@
 
         margin-top: 8px;
         margin-bottom: 8px;
-
-        &:first-child {
-            margin-top: 0;
-        }
-
-        &:last-child {
-            margin-bottom: 0;
-        }
     }
 
     // --- Buttons ---

src/targets/paper.module.css

@@ -168,7 +168,6 @@
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
 }
-.bluelib .layout-fill > main,
 .bluelib .layout-fill-single {
   grid-area: single;
 }
@@ -271,6 +270,7 @@
   flex-shrink: 0;
   flex-basis: 100%;
 }
+.bluelib img,
 .bluelib .image {
   display: block;
   max-width: 100%;
@@ -295,16 +295,14 @@
 .bluelib .form-label {
   grid-column: 1;
   justify-self: end;
+  text-align: right;
 }
 .bluelib .form-input {
   grid-column: 2;
   justify-self: stretch;
   width: 100%;
 }
-.bluelib .form-submit {
+.bluelib .form-row {
-  width: auto;
-}
-.bluelib .form-buttons {
   grid-column-start: 1;
   grid-column-end: 3;
   display: flex;
@@ -315,12 +313,6 @@
   margin-top: 8px;
   margin-bottom: 8px;
 }
-.bluelib .form-buttons:first-child {
-  margin-top: 0;
-}
-.bluelib .form-buttons:last-child {
-  margin-bottom: 0;
-}
 .bluelib .button {
   display: inline-flex;
   justify-content: center;

src/targets/paper.root.css

@@ -416,69 +416,36 @@ body .form,
   column-gap: 8px;
   grid-template-columns: minmax(auto, 1fr) 5fr;
 }
-body form label,
+body form,
-.bluelib form label,
+.bluelib form,
+body .form label,
+.bluelib .form label,
 body .form-label,
 .bluelib .form-label {
   grid-column: 1;
   justify-self: end;
+  text-align: right;
 }
-body form .input-field,
+body form,
-.bluelib form .input-field,
+.bluelib form,
-body input[type="color"],
+body .form input,
-.bluelib input[type="color"],
+.bluelib .form input,
-body input[type="date"],
+body select,
-.bluelib input[type="date"],
+.bluelib select,
-body input[type="datetime-local"],
+body .input,
-.bluelib input[type="datetime-local"],
+.bluelib .input,
-body input[type="email"],
-.bluelib input[type="email"],
-body input[type="file"],
-.bluelib input[type="file"],
-body input[type="image"],
-.bluelib input[type="image"],
-body input[type="month"],
-.bluelib input[type="month"],
-body input[type="number"],
-.bluelib input[type="number"],
-body input[type="password"],
-.bluelib input[type="password"],
-body input[type="search"],
-.bluelib input[type="search"],
-body input[type="tel"],
-.bluelib input[type="tel"],
-body input[type="text"],
-.bluelib input[type="text"],
-body input[type="time"],
-.bluelib input[type="time"],
-body input[type="url"],
-.bluelib input[type="url"],
-body input[type="week"],
-.bluelib input[type="week"],
-body form select:not([multiple]),
-.bluelib form select:not([multiple]),
-body .input-select,
-.bluelib .input-select,
 body .form-input,
 .bluelib .form-input {
   grid-column: 2;
   justify-self: stretch;
   width: 100%;
 }
-body form button,
+body form,
-.bluelib form button,
+.bluelib form,
-body input[type="submit"],
+body .form div,
-.bluelib input[type="submit"],
+.bluelib .form div,
-body .button,
+body .form-row,
-.bluelib .button,
+.bluelib .form-row {
-body form button,
-.bluelib form button,
-body .form-submit,
-.bluelib .form-submit {
-  width: auto;
-}
-body .form-buttons,
-.bluelib .form-buttons {
   grid-column-start: 1;
   grid-column-end: 3;
   display: flex;
@@ -489,14 +456,6 @@ body .form-buttons,
   margin-top: 8px;
   margin-bottom: 8px;
 }
-body .form-buttons:first-child,
-.bluelib .form-buttons:first-child {
-  margin-top: 0;
-}
-body .form-buttons:last-child,
-.bluelib .form-buttons:last-child {
-  margin-bottom: 0;
-}
 body button,
 .bluelib button,
 body input[type="submit"],

src/targets/royalblue.module.css

@@ -168,7 +168,6 @@
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
 }
-.bluelib .layout-fill > main,
 .bluelib .layout-fill-single {
   grid-area: single;
 }
@@ -271,6 +270,7 @@
   flex-shrink: 0;
   flex-basis: 100%;
 }
+.bluelib img,
 .bluelib .image {
   display: block;
   max-width: 100%;
@@ -295,16 +295,14 @@
 .bluelib .form-label {
   grid-column: 1;
   justify-self: end;
+  text-align: right;
 }
 .bluelib .form-input {
   grid-column: 2;
   justify-self: stretch;
   width: 100%;
 }
-.bluelib .form-submit {
+.bluelib .form-row {
-  width: auto;
-}
-.bluelib .form-buttons {
   grid-column-start: 1;
   grid-column-end: 3;
   display: flex;
@@ -315,12 +313,6 @@
   margin-top: 8px;
   margin-bottom: 8px;
 }
-.bluelib .form-buttons:first-child {
-  margin-top: 0;
-}
-.bluelib .form-buttons:last-child {
-  margin-bottom: 0;
-}
 .bluelib .button {
   display: inline-flex;
   justify-content: center;

src/targets/royalblue.root.css

@@ -416,69 +416,36 @@ body .form,
   column-gap: 8px;
   grid-template-columns: minmax(auto, 1fr) 5fr;
 }
-body form label,
+body form,
-.bluelib form label,
+.bluelib form,
+body .form label,
+.bluelib .form label,
 body .form-label,
 .bluelib .form-label {
   grid-column: 1;
   justify-self: end;
+  text-align: right;
 }
-body form .input-field,
+body form,
-.bluelib form .input-field,
+.bluelib form,
-body input[type="color"],
+body .form input,
-.bluelib input[type="color"],
+.bluelib .form input,
-body input[type="date"],
+body select,
-.bluelib input[type="date"],
+.bluelib select,
-body input[type="datetime-local"],
+body .input,
-.bluelib input[type="datetime-local"],
+.bluelib .input,
-body input[type="email"],
-.bluelib input[type="email"],
-body input[type="file"],
-.bluelib input[type="file"],
-body input[type="image"],
-.bluelib input[type="image"],
-body input[type="month"],
-.bluelib input[type="month"],
-body input[type="number"],
-.bluelib input[type="number"],
-body input[type="password"],
-.bluelib input[type="password"],
-body input[type="search"],
-.bluelib input[type="search"],
-body input[type="tel"],
-.bluelib input[type="tel"],
-body input[type="text"],
-.bluelib input[type="text"],
-body input[type="time"],
-.bluelib input[type="time"],
-body input[type="url"],
-.bluelib input[type="url"],
-body input[type="week"],
-.bluelib input[type="week"],
-body form select:not([multiple]),
-.bluelib form select:not([multiple]),
-body .input-select,
-.bluelib .input-select,
 body .form-input,
 .bluelib .form-input {
   grid-column: 2;
   justify-self: stretch;
   width: 100%;
 }
-body form button,
+body form,
-.bluelib form button,
+.bluelib form,
-body input[type="submit"],
+body .form div,
-.bluelib input[type="submit"],
+.bluelib .form div,
-body .button,
+body .form-row,
-.bluelib .button,
+.bluelib .form-row {
-body form button,
-.bluelib form button,
-body .form-submit,
-.bluelib .form-submit {
-  width: auto;
-}
-body .form-buttons,
-.bluelib .form-buttons {
   grid-column-start: 1;
   grid-column-end: 3;
   display: flex;
@@ -489,14 +456,6 @@ body .form-buttons,
   margin-top: 8px;
   margin-bottom: 8px;
 }
-body .form-buttons:first-child,
-.bluelib .form-buttons:first-child {
-  margin-top: 0;
-}
-body .form-buttons:last-child,
-.bluelib .form-buttons:last-child {
-  margin-bottom: 0;
-}
 body button,
 .bluelib button,
 body input[type="submit"],

src/vars/module.less

@@ -3,7 +3,7 @@
 
 @layout: ~".layout";
 @layout-fill: ~".layout-fill";
-@layout-fill-single: ~"@{layout-fill} > main, .layout-fill-single";
+@layout-fill-single: ~".layout-fill-single";
 @layout-threecol: ~".layout-threecol";
 @layout-threecol-left: ~".layout-threecol-left";
 @layout-threecol-center: ~".layout-threecol-center";
@@ -17,17 +17,19 @@
 @split: ~".split";
 @split-forcewrap: ~".split-forcewrap";
 
+@image: ~"img, .image";
+@image-free: ~".image-free";
+@image-limited: ~".image-limited";
+
 @status-disabled: ~".status-disabled";
 @status-hoverable: ~".status-hoverable";
 @status-clickable: ~".status-clickable";
-@image: ~".image";
+
-@image-free: ~".image-free";
-@image-limited: ~".image-limited";
 @form: ~".form";
 @form-label: ~".form-label";
 @form-input: ~".form-input";
-@form-submit: ~'.form-submit';
+@form-row: ~".form-row";
-@form-buttons: ~'.form-buttons';
+
 @button: ~'.button';
 @button-fill-width: ~'.button-fill-width';
 @button-toggle: ~'.button-toggle';

src/vars/root.less

@@ -17,17 +17,19 @@
 @split: ~".split";
 @split-forcewrap: ~".split-forcewrap";
 
-@status-disabled: ~"[disabled], .status-disabled";
-@status-hoverable: ~"[title], .status-hoverable";
-@status-clickable: ~"[onclick], .status-clickable";
 @image: ~"img, .image";
 @image-free: ~".image-free";
 @image-limited: ~".image-limited";
+
+@status-disabled: ~"[disabled], .status-disabled";
+@status-hoverable: ~"[title], .status-hoverable";
+@status-clickable: ~"[onclick], .status-clickable";
+
 @form: ~"form, .form";
-@form-label: ~"form label, .form-label";
+@form-label: ~"@{form} label, .form-label";
-@form-input: ~"form @{input-field}, form @{input-select}, .form-input";
+@form-input: ~"@{form} @{input}, .form-input";
-@form-submit: ~'form @{button}, form button, .form-submit';
+@form-row: ~"@{form} div, .form-row";
-@form-buttons: ~'.form-buttons';
+
 @button: ~'button, input[type="submit"], .button';
 @button-fill-width: ~'.button-fill-width';
 @button-toggle: ~'.button-toggle';