Improved custom-style buttons and forms templates

- The custom-style buttons and forms files now have the custom properties defined inside the .btn and .form-control classes (easier to understand for early framework adopters)
- New radius utility classes
- Added custom-style/_util.scss file with example of how to create a custom utility class
- Added min-width: 0; to grid items to prevent a potential flexbox bug caused by content overflow
- .icon--{size} classes now update width+height of the icons instead of font-size

README.md

@@ -32,7 +32,8 @@ codyhouse-framework/
     │   │   │   ├── _icons.scss
     │   │   │   ├── _shared-styles.scss
     │   │   │   ├── _spacing.scss
-    │   │   │   └── _typography.scss
+    │   │   │   ├── _typography.scss
+    │   │   │   └── _util.scss
     │   │   ├── _base.scss
     │   │   ├── _custom-style.scss
     │   │   ├── style-fallback.css

main/assets/css/_custom-style.scss

@@ -10,4 +10,5 @@
 @import 'custom-style/typography';
 @import 'custom-style/icons';
 @import 'custom-style/buttons';
-@import 'custom-style/forms';
+@import 'custom-style/forms';
+@import 'custom-style/util';

main/assets/css/base/_buttons.scss

@@ -18,11 +18,11 @@
     border-radius: var(--btn-radius, 0.25em);
   }
 
-  // size
+  // default size variations
   .btn--sm { font-size: var(--btn-font-size-sm, 0.8em); }
   .btn--md { font-size: var(--btn-font-size-md, 1.2em); }
   .btn--lg { font-size: var(--btn-font-size-lg, 1.4em); }
 
-  // btn with icon (only)
+  // button with (only) icon
   .btn--icon { padding: var(--btn-padding-y, 0.5em); }
 }

main/assets/css/base/_forms.scss

@@ -3,6 +3,7 @@
 
 @if variable-exists('cody-base-partials') == false or index($cody-base-partials, 'forms') {
   .form-control {
+    font-size: var(--form-control-font-size, 1em);
     padding-top: var(--form-control-padding-y, 0.5em);
     padding-bottom: var(--form-control-padding-y, 0.5em);
     padding-left: var(--form-control-padding-x, 0.75em);

main/assets/css/base/_grid-layout.scss

@@ -26,6 +26,7 @@
     > * {
       flex-basis: 100%;
       max-width: 100%;
+      min-width: 0;
     }
 
     @supports (--css: variables) {

main/assets/css/base/_icons.scss

@@ -27,15 +27,50 @@
   }
 
   // icon size
-  .icon--xxxs { font-size: var(--icon-xxxs); }
-  .icon--xxs  { font-size: var(--icon-xxs); }
-  .icon--xs   { font-size: var(--icon-xs); }
-  .icon--sm   { font-size: var(--icon-sm); }
-  .icon--md   { font-size: var(--icon-md); }
-  .icon--lg   { font-size: var(--icon-lg); }
-  .icon--xl   { font-size: var(--icon-xl); }
-  .icon--xxl  { font-size: var(--icon-xxl); }
-  .icon--xxxl { font-size: var(--icon-xxxl); }
+  .icon--xxxs { 
+    width: var(--icon-xxxs);
+    height: var(--icon-xxxs);
+  }
+
+  .icon--xxs  {
+    width: var(--icon-xxs);
+    height: var(--icon-xxs);
+  }
+
+  .icon--xs   {
+    width: var(--icon-xs);
+    height: var(--icon-xs);
+  }
+
+  .icon--sm   {
+    width: var(--icon-sm);
+    height: var(--icon-sm);
+  }
+
+  .icon--md   {
+    width: var(--icon-md);
+    height: var(--icon-md);
+  }
+
+  .icon--lg   {
+    width: var(--icon-lg);
+    height: var(--icon-lg);
+  }
+
+  .icon--xl   {
+    width: var(--icon-xl);
+    height: var(--icon-xl);
+  }
+
+  .icon--xxl  {
+    width: var(--icon-xxl);
+    height: var(--icon-xxl);
+  }
+
+  .icon--xxxl {
+    width: var(--icon-xxxl);
+    height: var(--icon-xxxl);
+  }
 
   .icon--is-spinning { // rotate the icon infinitely
     animation: icon-spin 1s infinite linear;

main/assets/css/base/_util.scss

@@ -905,6 +905,10 @@
   .radius-lg { border-radius: var(--radius-lg); }
   .radius-50\% { border-radius: 50%; }
   .radius-full { border-radius: 50em; }
+  .radius-top-left-0 { border-top-left-radius: 0; }
+  .radius-top-right-0 { border-top-right-radius: 0; }
+  .radius-bottom-right-0 { border-bottom-right-radius: 0; }
+  .radius-bottom-left-0 { border-bottom-left-radius: 0; }
 
   // --------------------------------
 

main/assets/css/custom-style/_buttons.scss

@@ -4,21 +4,15 @@
 
 // --------------------------------
 
-:root {
-  --btn-font-size: 1em;
-  --btn-font-size-sm: calc(var(--btn-font-size) - 0.2em);
-  --btn-font-size-md: calc(var(--btn-font-size) + 0.2em);
-  --btn-font-size-lg: calc(var(--btn-font-size) + 0.4em);
-  --btn-padding-x: var(--space-sm); // padding left/right
-  --btn-padding-y: var(--space-xs); // padding top/bottom
-  --btn-radius: 0.25em;
-}
-
 .btn { // style affecting all buttons
+  --btn-padding-y: var(--space-xs); // padding top/bottom
+  --btn-padding-x: var(--space-sm); // padding left/right
+  --btn-radius: 0.25em; // border radius
+  --btn-font-size: 1em; // font size
   box-shadow: var(--shadow-xs);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  transition: .3s;
+  transition: .2s;
 
   &:hover {
     cursor: pointer;
@@ -74,9 +68,17 @@
 }
 
 // sizes
-.btn--sm {}
-.btn--md {}
-.btn--lg {}
+.btn--sm {
+  font-size: 0.8em;
+}
+
+.btn--md {
+  font-size: 1.2em;
+}
+
+.btn--lg {
+  font-size: 1.4em;
+}
 
 // --------------------------------
 

main/assets/css/custom-style/_forms.scss

@@ -4,16 +4,14 @@
 
 // --------------------------------
 
-:root {
-  --form-control-padding-x: var(--space-sm);
-  --form-control-padding-y: var(--space-xs);
-  --form-control-radius: 0.25em;
-}
-
 .form-control { // basic form element style
+  --form-control-padding-y: var(--space-xs); // padding top/bottom
+  --form-control-padding-x: var(--space-xs); // padding left/right
+  --form-control-radius: 0.25em; // border radius
+  --form-control-font-size: 1em; // font size
   background-color: var(--color-bg);
-  border: 2px solid var(--color-contrast-low);
-  transition: .3s;
+  box-shadow: inset 0 0 0 2px alpha(var(--color-contrast-higher), 0.15);
+  transition: .2s;
 
   &::placeholder {
     opacity: 1;
@@ -22,16 +20,15 @@
 
   &:focus {
     outline: none;
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 2px alpha(var(--color-primary), 0.2)
+    box-shadow: inset 0 0 0 2px var(--color-primary), 0 0 0 2px alpha(var(--color-primary), 0.2);
   }
 }
 
 .form-control[aria-invalid="true"] {
-  border-color: var(--color-error);
+  box-shadow: inset 0 0 0 2px var(--color-error);
 
   &:focus {
-    box-shadow: 0 0 0 2px alpha(var(--color-error), 0.2);
+    box-shadow: inset 0 0 0 2px var(--color-error), 0 0 0 2px alpha(var(--color-error), 0.2);
   }
 }
 

main/assets/css/custom-style/_util.scss

@@ -0,0 +1,19 @@
+// --------------------------------
+
+// How to add custom utility classes
+
+// --------------------------------
+
+// 👇 your custom utility class
+// .my-util-class { 
+//   property: value;
+// }
+
+// 👇 (optional) create responsive variations - edit only [my-util-class, property, value]
+// @each $breakpoint, $value in $breakpoints { 
+//   @include breakpoint(#{$breakpoint}) {
+//     .my-util-class\@#{$breakpoint} {
+//       property: value;
+//     }
+//   }
+// }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codyhouse-framework",
-  "version": "2.7.5",
+  "version": "2.7.6",
   "description": "A lightweight front-end framework for building accessible, bespoke interfaces.",
   "main": "index.js",
   "keywords": [