form & code styles, new failure color

_src/_assets/js/ipdb.js

@@ -1,10 +1,24 @@
 /* global SmoothScroll */
+/* global Autogrow */
 
 // =include _dnt.js
 // =include smooth-scroll/dist/js/smooth-scroll.js
+// =include textarea-autogrow/textarea-autogrow.js
 
 document.addEventListener('DOMContentLoaded', () => {
+    //
+    // init smooth scroll
+    //
     const scroll = new SmoothScroll('a[data-scroll]', {
         easing: 'easeOutQuint'
     })
+
+    //
+    // init textarea autogrow
+    //
+    const textarea = document.querySelector('textarea')
+
+    if (textarea) {
+        const growingTextarea = new Autogrow(textarea)
+    }
 })

_src/_assets/scss/_code.scss

@@ -0,0 +1,19 @@
+//
+// Code (inline and block)
+// --------------
+// ipdb.io
+//
+code,
+kbd,
+pre,
+samp {
+    font-family: $font-family-monospace;
+    font-size: $font-size-small;
+    hyphens: none;
+}
+
+// Inline code
+code {
+    color: $brand-04;
+    opacity: .85;
+}

_src/_assets/scss/_forms.scss

@@ -0,0 +1,120 @@
+//
+// Forms
+// ---
+// ipdb.io
+//
+
+@import 'variables';
+
+.form {
+    margin-bottom: $spacer;
+}
+
+.form__group {
+    margin-bottom: $spacer / $line-height;
+}
+
+.form__label {
+    user-select: none;
+    display: block;
+    font-size: $font-size-small;
+    text-transform: uppercase;
+    color: $brand-04;
+    margin-bottom: $spacer / 4;
+
+    .required & {
+        &:after {
+            content: '*';
+            color: $brand-01;
+            padding-left: .1rem;
+            padding-right: .1rem;
+        }
+    }
+}
+
+.form__control {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    appearance: none;
+    padding: $spacer / 3 $spacer / 2;
+    font-family: $font-family-base;
+    font-size: $font-size-base;
+    font-weight: $font-weight-bold;
+    box-shadow: none;
+    border: 1.5px solid darken($brand-05, 10%);
+    border-radius: $border-radius / 2;
+    color: $brand-03;
+    background: lighten($brand-05, 4%);
+    transition: .15s ease-out;
+
+    @media ($screen-sm) {
+        max-width: 30rem;
+    }
+
+    &:focus {
+        outline: 0;
+        border-color: $brand-02;
+        background: $brand-05;
+    }
+
+    // Placeholder
+    &::placeholder {
+        color: $brand-02;
+
+        // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
+        opacity: 1;
+    }
+
+    &:disabled,
+    &[readonly] {
+        cursor: disabled;
+
+        // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
+        opacity: 1;
+    }
+
+    //
+    // Form Validation States
+    //
+    // Success style
+    &:valid:not(:focus):not(:placeholder-shown) {
+        &,
+        &:focus {
+            border-color: $brand-success;
+        }
+    }
+
+    // Error style
+    &:invalid:not(:focus):not(:placeholder-shown):not(select) {
+        &,
+        &:focus {
+            border-color: $brand-failure;
+        }
+    }
+}
+
+textarea {
+    // for textarea-autogrow
+    resize: none;
+    box-sizing: content-box;
+}
+
+.form__help {
+    font-size: $font-size-small;
+    color: $brand-02;
+
+    input + & {
+        margin-left: $spacer / 2;
+    }
+}
+
+
+//
+// required indicator
+//
+.required {
+    color: $brand-01;
+    padding-left: .1rem;
+    padding-right: .1rem;
+}

_src/_assets/scss/_variables.scss

@@ -10,6 +10,7 @@ $brand-06:                  #444 !default;
 $brand-07:                  #0e475d !default;
 
 $brand-success:             #6bcc74 !default; // adjust-hue($brand-01, 170%)
+$brand-failure:             #cc6b72 !default; // adjust-hue($brand-01, 40%)
 
 //
 // Typography

_src/_assets/scss/ipdb.scss

@@ -5,6 +5,8 @@
 // Components
 @import 'grid';
 @import 'buttons';
+@import 'forms';
+@import 'code';
 @import 'media';
 @import 'sections';
 @import 'header';

_src/_data/colors.yml

@@ -21,3 +21,6 @@
 
 - name: "brand-success"
   hex: "6bcc74"
+
+- name: "brand-failure"
+  hex: "cc6b72"

_src/styleguide.md

@@ -84,21 +84,27 @@ Logo can be used with a base class and modifier classes for size & color:
 
 ## Forms
 
-<form class="form js-parsley" action="#">
+All `form__control` elements require an empty placeholder to make browser validation look properly.
-    <div class="form-group">
+
-        <input class="form-control" type="text" id="name" name="name" required>
+<form class="form" action="#">
-        <label class="form-label" for="name">Your Name</label>
+    <div class="form__group required">
+        <label class="form__label" for="name">Your Name</label>
+        <input class="form__control" type="text" id="name" name="name" required placeholder=" ">
+        <span class="form__help">
+            You know your name, I suppose.
+        </span>
     </div>
-    <div class="form-group">
+    <div class="form__group">
-        <input class="form-control" type="email" id="email" name="email">
+        <label class="form__label" for="email">Your Email</label>
-        <label class="form-label" for="email">Your Email</label>
+        <input class="form__control" type="email" id="email" name="email" placeholder=" ">
     </div>
-    <div class="form-group">
+    <div class="form__group">
-        <input class="form-control" type="tel" id="phone" name="phone">
+        <label class="form__label" for="phone">Your Phone</label>
-        <label class="form-label" for="phone">Your Phone</label>
+        <input class="form__control" type="tel" id="phone" name="phone" placeholder=" ">
     </div>
-    <div class="form-group">
+    <div class="form__group required">
-        <select class="form-control" id="select" name="select" required data-required="true">
+        <label class="form__label" for="industry">Industry</label>
+        <select class="form__control" id="select" name="select" required data-required="true">
             <option value="">&nbsp;</option>
             <option value="Automotive">Automotive</option>
             <option value="Banking">Banking</option>
@@ -113,17 +119,16 @@ Logo can be used with a base class and modifier classes for size & color:
             <option value="Consulting">Consulting</option>
             <option value="Data">Data</option>
         </select>
-        <label class="form-label" for="industry">Industry</label>
     </div>
-    <div class="form-group">
+    <div class="form__group">
-        <textarea class="form-control" id="comment" name="comment" rows="1"></textarea>
+        <label class="form__label" for="comment">Autogrowing textarea</label>
-        <label class="form-label" for="comment">Autogrowing textarea</label>
+        <textarea class="form__control" id="comment" name="comment" rows="1" placeholder=" "></textarea>
     </div>
-    <p class="form-group text-dimmed mini">
+    <p class="form__group form__help">
-        Fields marked with an <span class="required"></span> are required.
+        Fields marked with an <span class="required">*</span> are required.
     </p>
-    <div class="form-group">
+    <div class="form__group">
-        <input class="btn btn-primary" type="submit" value="Submit">
+        <input class="button button-primary" type="submit" value="Submit">
     </div>
 </form>
 

package.json

@@ -27,7 +27,8 @@
     "ie >= 10"
   ],
   "dependencies": {
-    "smooth-scroll": "^12.1.4"
+    "smooth-scroll": "^12.1.4",
+    "textarea-autogrow": "^1.0.0"
   },
   "devDependencies": {
     "babel-core": "^6.25.0",