so many form tweaks

- new native select style
- progressively enhanced select styles via select.js
- new textarea autogrow functionality
- start isolating all the forms, load only when needed

_src/_assets/javascripts/bigchain.js

@@ -3,21 +3,16 @@
 //=include jquery/dist/jquery.js
 
 //=include bigchain/analytics.js
-//=include bigchain/forms.js
 //=include bigchain/dnt.js
 
-//=include bigchain/form-contact.js
+//=include bigchain/forms.js
-//=include bigchain/newsletter.js
-
 
 jQuery(function($) {
 
     //
-    // init modules
+    // init global modules
     //
-    Forms.init();
+    Forms.init()
-    FormContact.init();
-    Newsletter.init();
 
     if (!_dntEnabled()) {
         GoogleAnalytics.init();

_src/_assets/javascripts/bigchain/forms.js

@@ -1,5 +1,8 @@
 
 //=include parsleyjs/dist/parsley.js
+//=include ../../../../node_modules/textarea-autogrow/textarea-autogrow.js
+//=include ../../../../node_modules/tether/dist/js/tether.js
+//=include ../../../../node_modules/tether-select/dist/js/select.js
 
 var Forms = (function(w, d, $) {
 
@@ -37,6 +40,17 @@ var Forms = (function(w, d, $) {
                     }
                 })
             })
+        },
+        initAutogrow: function() {
+            if (_config.form.find('textarea').length) {
+                var textarea = document.querySelector('textarea')
+                var growingTextarea = new Autogrow(textarea)
+            }
+        },
+        initSelect: function(el) {
+            Select.init({
+                className: 'select-theme-bigchaindb'
+            })
         }
     }
 
@@ -44,6 +58,8 @@ var Forms = (function(w, d, $) {
         init: function() {
             _private.formValidation()
             _private.formEmptyValidation()
+            _private.initAutogrow()
+            _private.initSelect()
         }
     }
 

_src/_assets/javascripts/page-cla.js

@@ -5,5 +5,5 @@
 jQuery(function($) {
 
     // init form
-    FormCla.init();
+    FormCla.init()
 });

_src/_assets/javascripts/page-community.js

@@ -1,10 +1,12 @@
 
 //=include is-in-viewport/lib/isInViewport.js
 //=include bigchain/testimonials.js
+//=include bigchain/newsletter.js
 
 jQuery(function($) {
 
-    Testimonials.init();
+    Newsletter.init()
+    Testimonials.init()
 
     var wrigley     = $('#wrigley'),
         wrigleyArm  = wrigley.find('#arm'),

_src/_assets/javascripts/page-contact.js

@@ -0,0 +1,8 @@
+
+//=include bigchain/form-contact.js
+
+jQuery(function($) {
+
+    // init form
+    FormContact.init()
+});

_src/_assets/javascripts/page-usecases.js

@@ -1 +1,11 @@
 //=include bigchain/smoothscroll.js
+//=include bigchain/newsletter.js
+
+jQuery(function($) {
+
+    //
+    // init modules
+    //
+    Newsletter.init()
+
+});

_src/_assets/styles/_page-enterprise.scss

@@ -37,4 +37,16 @@
 .form--enterprise {
     padding: $spacer ($spacer * 2);
     background: $gray-dark;
+    border-radius: $border-radius;
+
+    .grid {
+        @media ($screen-sm) {
+            justify-content: space-between;
+        }
+    }
+    .grid__col {
+        @media ($screen-sm) {
+            flex-basis: 48%;
+        }
+    }
 }

_src/_assets/styles/bigchain.scss

@@ -19,6 +19,7 @@
 @import 'bigchain/buttons';
 @import 'bigchain/forms';
 @import 'bigchain/input-group';
+@import 'bigchain/select-theme-bigchaindb';
 @import 'bigchain/logo';
 @import 'bigchain/icons';
 @import 'bigchain/grid';

_src/_assets/styles/bigchain/_forms.scss

@@ -11,9 +11,8 @@
     appearance: none;
     padding: $input-padding-x $input-padding-y;
     font-family: $input-font;
-    font-weight: $font-weight-bold;
+    font-weight: $input-font-weight;
     font-size: $font-size-base;
-    line-height: $line-height;
     color: $input-color;
     background: none;
     border: none;
@@ -75,6 +74,11 @@
     color: $input-color-placeholder;
     transform-origin: left;
 
+    // hide on selects
+    select + & {
+        visibility: hidden;
+    }
+
     .background--photo & {
         color: rgba(#fff, .5);
     }
@@ -87,7 +91,7 @@
     &:invalid:not(.is-empty) ~ .form-label,
     //&.parsley-error ~ .form-label,
     &.parsley-success ~ .form-label {
-        transform: translate3d(0, -(($spacer / 1.5) + $input-padding-x), 0) scale(.7);
+        transform: translate3d(0, -($spacer + $input-padding-x), 0) scale(.7);
         color: $input-border-focus;
     }
 }
@@ -110,6 +114,32 @@
 }
 
 
+
+//
+// Text areas
+//
+textarea.form-control {
+    // Leave resizing to js
+    // https://github.com/CodingAspect/Textarea-Autogrow#usage
+    resize: none;
+    box-sizing: content-box;
+}
+
+
+//
+// Selects
+//
+select.form-control {
+    color: $input-color-placeholder;
+    font-weight: $input-font-weight;
+
+    &:focus::-ms-value {
+        color: $input-color;
+        background-color: $input-bg;
+    }
+}
+
+
 //
 // Checkboxes and radios
 //
@@ -223,7 +253,7 @@ input[type="checkbox"] {
 .form-control {
 
     // Success style
-    &:valid:not(.is-empty),
+    &:valid:not(.is-empty):not(select),
     &.parsley-success {
         &,
         &:focus {
@@ -254,7 +284,7 @@ input[type="checkbox"] {
     position: absolute;
     left: 0;
     bottom: 0;
-    font-size: $font-size-sm;
+    font-size: $font-size-xs;
 
     &,
     li { color: $brand-danger; }

_src/_assets/styles/bigchain/_newsletter.scss

@@ -44,6 +44,7 @@
 .newsletter__title {
     @extend .h5;
     margin-top: 0;
+    margin-bottom: $spacer / 4;
 }
 
 .newsletter__title,

_src/_assets/styles/bigchain/_select-theme-bigchaindb.scss

@@ -0,0 +1,181 @@
+//
+// Position basics
+//
+.select-select {
+    display: none;
+    pointer-events: none;
+    position: absolute;
+    opacity: 0;
+}
+
+.select-element {
+    position: absolute;
+    display: none;
+
+    *,
+    *:before,
+    *:after {
+        box-sizing: border-box;
+    }
+
+    &.select-open {
+        display: block;
+    }
+}
+
+
+//
+// Actual theme
+//
+.select-theme-bigchaindb {
+    user-select: none;
+    box-shadow: none;
+
+    .select-content {
+        border-radius: $border-radius;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+        background: $gray-dark;
+        color: $input-color;
+        font-family: inherit;
+        overflow: auto;
+        max-width: 20rem;
+        min-width: 20rem;
+        max-height: 20rem;
+        -webkit-overflow-scrolling: touch;
+
+        @media (max-width: 27rem), (max-height: 27rem) {
+            max-width: 11.25rem;
+            max-height: 11.25rem;
+        }
+    }
+
+    .select-options {
+        -webkit-tap-highlight-color: transparent;
+        -webkit-touch-callout: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .select-option {
+        -webkit-tap-highlight-color: transparent;
+        -webkit-touch-callout: none;
+        position: relative;
+        list-style: none;
+        margin: 0;
+        line-height: 1;
+        padding: $input-padding-x 1em $input-padding-x 2.5em;
+        display: block;
+        cursor: pointer;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &.select-option-selected:before {
+            content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='-0.5 0 20 15'><rect fill='#{$input-color}' stroke='none' transform='rotate(45 4.0033 8.87436)' height='5' width='6.32304' y='6.37436' x='0.84178'></rect><rect fill='#{$input-color}' stroke='none' transform='rotate(45 11.1776 7.7066)' width='5' height='16.79756' y='-0.69218' x='8.67764'></rect></svg>");
+            position: absolute;
+            left: 1em;
+            top: 0;
+            bottom: 0.2em;
+            height: 1em;
+            width: 1em;
+            margin: auto;
+        }
+
+        &.select-option-highlight,
+        &:hover {
+            background: $component-active-bg;
+            color: $component-active-color;
+
+            // the checkmark
+            &.select-option-selected:before {
+                content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='-0.5 0 20 15'><rect fill='#{$component-active-color}' stroke='none' transform='rotate(45 4.0033 8.87436)' height='5' width='6.32304' y='6.37436' x='0.84178'></rect><rect fill='#{$component-active-color}' stroke='none' transform='rotate(45 11.1776 7.7066)' width='5' height='16.79756' y='-0.69218' x='8.67764'></rect></svg>");
+            }
+        }
+
+        &:first-child {
+            border-radius: $border-radius $border-radius 0 0;
+
+            // assume first item is always the placeholder
+            color: $input-color-placeholder;
+            border-bottom: 1px solid $gray;
+            pointer-events: none;
+
+            &:before {
+                display: none !important;
+            }
+
+            &.select-option-highlight,
+            &:hover {
+                background: inherit !important;
+                color: inherit !important;
+            }
+        }
+
+        &:last-child {
+            border-radius: 0 0 $border-radius $border-radius;
+        }
+    }
+
+    &.select-target {
+        display: block;
+        vertical-align: middle;
+        user-select: none;
+        -webkit-tap-highlight-color: transparent;
+        -webkit-touch-callout: none;
+        position: relative;
+        padding: $input-padding-x 3em $input-padding-x 0;
+        background: transparent;
+        border-bottom: 2px solid $input-border-color;
+        cursor: pointer;
+        color: $input-color-placeholder;
+        text-decoration: none;
+        white-space: nowrap;
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &.select-target-focused,
+        &.select-target-focused:focus {
+            color: $input-color;
+            border-color: $input-border-focus;
+            outline: none;
+        }
+
+        // dropdown indicator
+        b {
+            position: absolute;
+            right: .25em;
+            top: 0;
+            bottom: 0;
+            margin: auto;
+            height: 1.25rem;
+            width: 2em;
+
+            &:before,
+            &:after {
+                content: "";
+                display: block;
+                position: absolute;
+                margin: auto;
+                right: 0;
+                height: 0;
+                width: 0;
+                border: 0.263em solid transparent;
+            }
+
+            &:before {
+                top: 0;
+                border-bottom-color: inherit;
+            }
+
+            &:after {
+                bottom: 0;
+                border-top-color: inherit;
+            }
+        }
+    }
+
+    + .form-label {
+        visibility: hidden;
+    }
+}

_src/_assets/styles/bigchain/_variables.scss

@@ -100,7 +100,7 @@ $border-radius-lg:       .2rem !default;
 $border-radius-sm:       .1rem !default;
 $border-radius-xs:       .1rem !default;
 
-$component-active-color: #fff !default;
+$component-active-color: $brand-main-blue !default;
 $component-active-bg:    $brand-primary !default;
 
 

_src/_includes/form-enterprise.html

@@ -3,61 +3,75 @@
 
     <div class="grid grid--full grid-small--half">
 
-        <p class="form-group grid__col">
+        <div class="grid__col">
+            <p class="form-group">
                 <input class="form-control" type="text" id="name" name="name" required>
                 <label class="form-label" for="name">Name</label>
             </p>
-        <p class="form-group grid__col">
+        </div>
+        <div class="grid__col">
+            <p class="form-group">
                 <input class="form-control" type="text" id="company" name="company" required>
                 <label class="form-label" for="company">Company</label>
             </p>
-        <p class="form-group grid__col">
+        </div>
+        <div class="grid__col">
+            <p class="form-group">
                 <input class="form-control" type="email" id="email" name="_replyto" required>
                 <label class="form-label" for="email">Email</label>
             </p>
-        <p class="form-group grid__col">
+        </div>
+        <div class="grid__col">
+            <p class="form-group">
                 <input class="form-control" type="tel" id="phone" name="phone" required>
                 <label class="form-label" for="phone">Phone</label>
             </p>
-        <p class="form-group grid__col">
+        </div>
+        <div class="grid__col">
+            <p class="form-group">
                 <input class="form-control" type="text" id="country" name="country" required>
                 <label class="form-label" for="country">Country</label>
             </p>
-        <p class="form-group grid__col">
+        </div>
-            <select class="form-control" id="industry" name="industry">
+        <div class="grid__col">
-                <option>Automotive</option>
+            <p class="form-group">
-                <option>Banking</option>
+                <select class="form-control" id="industry" name="industry" required data-required="true">
-                <option>Consulting</option>
+                    <option value="">Industry</option>
-                <option>Data</option>
+                    <option value="Automotive">Automotive</option>
-                <option>Energy</option>
+                    <option value="Banking">Banking</option>
-                <option>Government</option>
+                    <option value="Consulting">Consulting</option>
-                <option>Healthcare</option>
+                    <option value="Data">Data</option>
-                <option>Identity &amp; Security</option>
+                    <option value="Energy">Energy</option>
-                <option>Insurance</option>
+                    <option value="Government">Government</option>
-                <option>Information Technology</option>
+                    <option value="Healthcare">Healthcare</option>
-                <option>Logistics &amp; Shipping</option>
+                    <option value="Identity">Identity &amp; Security</option>
-                <option>Manufacturing</option>
+                    <option value="Insurance">Insurance</option>
-                <option>Media &amp; Content</option>
+                    <option value="Information Technology">Information Technology</option>
-                <option>Other</option>
+                    <option value="Logistics">Logistics &amp; Shipping</option>
+                    <option value="Manufacturing">Manufacturing</option>
+                    <option value="Media">Media &amp; Content</option>
+                    <option value="other">Other</option>
                 </select>
                 <label class="form-label" for="industry">Industry</label>
             </p>
-
+        </div>
-        <p class="form-group grid__col">
+        <div class="grid__col">
-            <select class="form-control" id="interest" name="interest">
+            <p class="form-group">
-                <option>Education</option>
+                <select class="form-control" id="interest" name="interest" required data-required="true">
-                <option>Partnership</option>
+                    <option value="">Interested in</option>
-                <option>Proof-of-Concept / Prototype / Pilot</option>
+                    <option value="Education">Education</option>
-                <option>Implementation</option>
+                    <option value="Partnership">Partnership</option>
-                <option>BigchainDB Enterprise Subscription</option>
+                    <option value="Prototype">Proof-of-Concept / Prototype / Pilot</option>
+                    <option value="Implementation">Implementation</option>
+                    <option value="BigchainDB Enterprise Edition">BigchainDB Enterprise Subscription</option>
                 </select>
                 <label class="form-label" for="interest">Interested in</label>
             </p>
-
+        </div>
     </div>
 
     <p class="form-group">
-        <textarea class="form-control" id="comment" name="comment" rows="4" required></textarea>
+        <textarea class="form-control" id="comment" name="comment" rows="1"></textarea>
         <label class="form-label" for="comment">Comments</label>
     </p>
     <p class="form-group">

_src/contact.html

@@ -3,6 +3,8 @@ layout: page
 
 title: Contact
 tagline: Get In Touch
+
+js: page-contact.min.js
 ---
 
 <section class="section section-contactform">

_src/enterprise.html

@@ -12,8 +12,8 @@ js: page-enterprise.min.js
 
     <div class="hero__content row row--wide">
         <hgroup>
-            <h1 class="section-title">Get unicorns and golden kittens by using BigchainDB in your enterprise.</h1>
+            <h1 class="section-title">Take your enterprise to the next level with blockchain technology that scales.</h1>
-            <p class="section-description">A paragraph explaining the main value proposition with its messaging targeted towards decision makers in enterprise.</p>
+            <p class="section-description">From ideation to production, BigchainDB has the team and technology to deploy enterprise-grade applications and platforms for businesses looking to build the tools of tomorrow.</p>
             <a href="#" class="btn btn-primary">Get in touch</a> <a href="#" class="btn btn-secondary">Download one-pager</a>
         </hgroup>
     </div>

package.json

@@ -30,6 +30,8 @@
     "normalize-opentype.css": ">=0.2.4",
     "parsleyjs": "^2.0.7",
     "svg4everybody": "^2.0.0",
+    "tether-select": "^1.1.0",
+    "textarea-autogrow": "^1.0.0",
     "vivus": "^0.4.0",
     "whatwg-fetch": "^2.0.3"
   },