3.0.0

- Removed defualt two column layout. Now defaults to as many columns as the container is wide. - Added `x2` class you can put on `dd` elements to double the width of a form. Does not apply on small screens.
rooseveltframework · Jun 13, 2023 · fc74f50 · fc74f50
1 parent cd14dc8
commit fc74f50
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 52 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,7 +4,10 @@
 
 - Put your changes here...
 
-- Fixed a situation that could lead to a JS error.
+## 3.0.0
+
+- Removed defualt two column layout. Now defaults to as many columns as the container is wide.
+- Added `x2` class you can put on `dd` elements to double the width of a form. Does not apply on small screens.
 
 ## 2.1.2
 
@@ -13,6 +16,7 @@
 
 ## 2.1.1
 
+- Fixed a situation that could lead to a JS error.
 - Fix minor alignment issue.
 
 ## 2.1.0

diff --git a/README.md b/README.md
@@ -58,6 +58,8 @@ The float label input pattern is notoriously difficult to implement in a fashion
 
 If you would like to manipulate the size of the area on the input field reserved for the click event of the clear field, apply one or both of the following `data-` attributes to your form.
 
+If you want to double the width of the input field (on screens with the extra space), add a `x2` class to the `dd` element.
+
 Adjust the horizontal offset of the clear field's click event click area (the default is 21):
 
 ```html
@@ -66,7 +68,7 @@ Adjust the horizontal offset of the clear field's click event click area (the de
 </form>
 ```
 
-Adjust the vertical offset of the clear field"s click event click area (the default is 5):
+Adjust the vertical offset of the clear field's click event click area (the default is 5):
 
 ```html
 <form class="semanticForms" data-clearfield-vertical-offset="5">
@@ -146,7 +148,7 @@ Checkboxes and radio buttons need to follow the following markup structure:
 
 - Custom-styled select boxes with a custom drawn arrow graphic driven by SVG embedded in the CSS.
 - Custom-styled submit buttons to match the aesthetic of the custom-styled forms.
-- Responsive: on wide screens, the forms split into two columns. On smaller screens, they collapse to a single column.
+- Responsive: on wide screens, the forms split into multiple columns. On smaller screens, they collapse to a single column.
 - Low-flow mode that displays on old browsers, JS-disabled browsers, or can be activated manually by adding the `lowFlow` class to your `<form>` element. The low-flow mode reverts the float label pattern to traditional labels and collapses the forms to single column mode, but preserves the other visual design enhancements driven purely by CSS.
 
 See `semanticForms.html` or the [live demo](https://kethinov.github.io/semanticforms/semanticForms.html) for more examples.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "semantic-forms",
   "description": "Semantic Forms",
   "author": "Eric Newport <[email protected]>",
-  "version": "2.1.2",
+  "version": "3.0.0",
   "files": [
     "semanticForms.css",
     "semanticForms.js",

diff --git a/semanticForms.css b/semanticForms.css
@@ -1,12 +1,5 @@
 .semanticForms {
   font-family: sans-serif;
-  /*
-  TODO: still needed?
-  input:not([type='submit']):not([type='reset']):not([type='image']):not([type=checkbox]):not([type=radio]) {
-    width: 270px;
-    padding-right: 0;
-  }
-  */
 }
 .semanticForms input:not([type='submit']):not([type='reset']):not([type='image']):not([type=checkbox]):not([type=radio]):not([type=color]),
 .semanticForms select,
@@ -167,7 +160,6 @@
 }
 .semanticForms .floatLabelForm {
   margin: 0 auto;
-  width: 292px;
 }
 .semanticForms .floatLabelForm input[disabled] {
   opacity: 0.5;
@@ -180,9 +172,6 @@
   float: left;
   margin: 0 10px 0 10px;
 }
-.semanticForms .floatLabelForm dd:nth-child(4n+2) {
-  clear: both;
-}
 .semanticForms .floatLabelForm dt:not(.checkboxes):not(.radios) {
   font-size: 1px;
   text-indent: 100%;
@@ -198,7 +187,7 @@
 .semanticForms .floatLabelForm .checkboxes ul,
 .semanticForms .floatLabelForm .radios ul {
   margin: 3px 20px 0 0;
-  width: 267px;
+  width: 262px;
   padding-left: 10px;
 }
 .semanticForms .floatLabelForm label.floatLabelFormAnimatedLabel {
@@ -314,7 +303,7 @@
 .semanticForms menu button {
   float: none;
   clear: none;
-  margin: 0 0 25px 0;
+  margin: 0;
 }
 @media (min-width: 700px) {
   .semanticForms .floatLabelForm {
@@ -337,6 +326,27 @@
   .semanticForms fieldset :last-child {
     margin-right: 0;
   }
+  .semanticForms .x2 input:not([type='submit']):not([type='reset']):not([type='image']):not([type=checkbox]):not([type=radio]):not([type=color]),
+  .semanticForms .x2 select,
+  .semanticForms .x2 textarea {
+    width: 562px;
+  }
+  .semanticForms .x2 input[type=color] {
+    width: 604px;
+  }
+  .semanticForms .x2 input[type=range] {
+    width: 560px !important;
+  }
+  .semanticForms .x2 select {
+    width: 604px;
+  }
+  .semanticForms .x2.checkboxes ul,
+  .semanticForms .x2.radios ul {
+    width: 574px;
+  }
+  .semanticForms .x2 label.floatLabelFormAnimatedLabel {
+    width: 375px;
+  }
 }
 .semanticForms.lowFlow dl {
   margin: 10px 0 0 0;

diff --git a/semanticForms.js b/semanticForms.js
@@ -155,7 +155,7 @@ window.semanticForms = function () {
 
   function isPatternElement (e) {
     const thisEl = e.target || e
-    if (!thisEl.classList.contains('semanticform')) {
+    if (!thisEl || !thisEl.classList || !thisEl.classList.contains('semanticform')) {
       return false
     }
     return true

diff --git a/semanticFormsNoImages.css b/semanticFormsNoImages.css
@@ -1,12 +1,5 @@
 .semanticForms {
   font-family: sans-serif;
-  /*
-  TODO: still needed?
-  input:not([type='submit']):not([type='reset']):not([type='image']):not([type=checkbox]):not([type=radio]) {
-    width: 270px;
-    padding-right: 0;
-  }
-  */
 }
 .semanticForms input:not([type='submit']):not([type='reset']):not([type='image']):not([type=checkbox]):not([type=radio]):not([type=color]),
 .semanticForms select,
@@ -167,7 +160,6 @@
 }
 .semanticForms .floatLabelForm {
   margin: 0 auto;
-  width: 292px;
 }
 .semanticForms .floatLabelForm input[disabled] {
   opacity: 0.5;
@@ -180,9 +172,6 @@
   float: left;
   margin: 0 10px 0 10px;
 }
-.semanticForms .floatLabelForm dd:nth-child(4n+2) {
-  clear: both;
-}
 .semanticForms .floatLabelForm dt:not(.checkboxes):not(.radios) {
   font-size: 1px;
   text-indent: 100%;
@@ -198,7 +187,7 @@
 .semanticForms .floatLabelForm .checkboxes ul,
 .semanticForms .floatLabelForm .radios ul {
   margin: 3px 20px 0 0;
-  width: 267px;
+  width: 262px;
   padding-left: 10px;
 }
 .semanticForms .floatLabelForm label.floatLabelFormAnimatedLabel {
@@ -314,7 +303,7 @@
 .semanticForms menu button {
   float: none;
   clear: none;
-  margin: 0 0 25px 0;
+  margin: 0;
 }
 @media (min-width: 700px) {
   .semanticForms .floatLabelForm {
@@ -337,6 +326,27 @@
   .semanticForms fieldset :last-child {
     margin-right: 0;
   }
+  .semanticForms .x2 input:not([type='submit']):not([type='reset']):not([type='image']):not([type=checkbox]):not([type=radio]):not([type=color]),
+  .semanticForms .x2 select,
+  .semanticForms .x2 textarea {
+    width: 562px;
+  }
+  .semanticForms .x2 input[type=color] {
+    width: 604px;
+  }
+  .semanticForms .x2 input[type=range] {
+    width: 560px !important;
+  }
+  .semanticForms .x2 select {
+    width: 604px;
+  }
+  .semanticForms .x2.checkboxes ul,
+  .semanticForms .x2.radios ul {
+    width: 574px;
+  }
+  .semanticForms .x2 label.floatLabelFormAnimatedLabel {
+    width: 375px;
+  }
 }
 .semanticForms.lowFlow dl {
   margin: 10px 0 0 0;

diff --git a/semanticFormsNoImages.less b/semanticFormsNoImages.less
@@ -69,7 +69,6 @@
     margin: 0;
   }
 
-
   // clear fields
   input:not([type='submit']):not([type='reset']):not([type=checkbox]):not([type=radio]),
   textarea {
@@ -83,14 +82,6 @@
     background-position: right -12px center;
   }
 
-  /*
-  TODO: still needed?
-  input:not([type='submit']):not([type='reset']):not([type='image']):not([type=checkbox]):not([type=radio]) {
-    width: 270px;
-    padding-right: 0;
-  }
-  */
-
   textarea {
     background-position: right -12px top 10px;
     height: 100px;
@@ -184,7 +175,6 @@
     background-image: linear-gradient(to bottom, @borderColor 0%, @formBackgroundColor 100%);
   }
 
-
   // custom select box design
   select {
     background-image: none;
@@ -199,7 +189,6 @@
     appearance: none;
   }
 
-
   // float label forms
   label.floatLabelFormAnimatedLabel, input:not([type=checkbox]):not([type=radio]), select, textarea, section {
     transition: all 0.2s;
@@ -208,7 +197,6 @@
 
   .floatLabelForm {
     margin: 0 auto;
-    width: 292px;
 
     input[disabled] {
       opacity: 0.5;
@@ -225,10 +213,6 @@
       margin: 0 10px 0 10px;
     }
 
-    dd:nth-child(4n+2) {
-      clear: both;
-    }
-
     dt:not(.checkboxes):not(.radios) {
       font-size: 1px;
       text-indent: 100%;
@@ -246,7 +230,7 @@
     .checkboxes ul,
     .radios ul {
       margin: 3px 20px 0 0;
-      width: 267px;
+      width: 262px;
       padding-left: 10px;
     }
 
@@ -388,11 +372,10 @@
     button {
       float: none;
       clear: none;
-      margin: 0 0 25px 0;
+      margin: 0;
     }
   }
 
-
   // side-by-side pattern on large screens
   @media (min-width: 700px) {
     .floatLabelForm {
@@ -418,6 +401,43 @@
         margin-right: 0;
       }
     }
+
+    .x2 {
+      input:not([type='submit']):not([type='reset']):not([type='image']):not([type=checkbox]):not([type=radio]):not([type=color]),
+      select,
+      textarea {
+        width: 562px;
+      }
+    }
+
+    .x2 {
+      input[type=color] {
+        width: 604px;
+      }
+    }
+
+    .x2 {
+      input[type=range] {
+        width: 560px !important;
+      }
+    }
+
+    .x2 {
+      select {
+        width: 604px;
+      }
+    }
+
+    .x2.checkboxes ul,
+    .x2.radios ul {
+      width: 574px;
+    }
+
+    .x2 {
+      label.floatLabelFormAnimatedLabel {
+        width: 375px;
+      }
+    }
   }
 }