diff --git a/src/humulus/static/recipes.js b/src/humulus/static/recipes.js
index c6daad4..c105df7 100644
--- a/src/humulus/static/recipes.js
+++ b/src/humulus/static/recipes.js
@@ -14,6 +14,25 @@
   limitations under the License.
 */
 
+// Calculate percentage and background color for display functions
+function calculatePct(value, low, high) {
+  var pct = Math.round(100 * (value-low )/ (high - low));
+  var color = 'bg-success';
+  if (pct > 85) {
+    color = 'bg-danger';
+    if (pct > 100) {
+      pct = 100;
+    }
+  } else if (pct <=15 ) {
+    color = 'bg-warning';
+    if (pct <= 0) {
+      pct = 5; // We want a little bit of bar showing
+    }
+  }
+
+  return {pct: pct, color: color};
+}
+
 // unbinds and re-binds the change event
 function rebindChangeEvents() {
   $('.ingredient-field').unbind('change');
@@ -90,7 +109,7 @@ function addFerm() {
                 // Type field
                 '<div class="col-sm"><div class="form-group">' +
                 `<label for="fermentables-${fermsLength}-type">Type</label>` +
-                `<select class="form-control form-control-sm ingredient-field" id="fermentables-${fermsLength}-type"` +
+                `<select class="custom-select custom-select-sm ingredient-field" id="fermentables-${fermsLength}-type"` +
                 ` name="fermentables-${fermsLength}-type" required>` +
                 '<option value="Grain">Grain</option>' +
                 '<option value="LME">LME</option>' +
@@ -152,7 +171,7 @@ function addHop() {
                 // Usage field
                 '<div class="col-sm"><div class="form-group">' +
                 `<label for="hops-${hopsLength}-use">Usage</label>` +
-                `<select class="form-control form-control-sm ingredient-field" id="hops-${hopsLength}-use"` +
+                `<select class="custom-select custom-select-sm ingredient-field" id="hops-${hopsLength}-use"` +
                 ` name="hops-${hopsLength}-use" required>` +
                 '<option value="Boil">Boil</option>' +
                 '<option value="FWH">FWH</option>' +
@@ -220,8 +239,16 @@ function calculateOG() {
 }
 
 // display OG
-function displayOG() {
-  $('#estimated-og').text(calculateOG().toFixed(3));
+function displayOG(data) {
+  var og = calculateOG().toFixed(3);
+  if (data !== null) {
+    var result = calculatePct(og, data.og.low, data.og.high)
+    $('#estimated-og').html(`<div class="progress spec-progress"><div class="progress-bar ${result.color}" ` +
+      `role="progressbar" style="width: ${result.pct}%;" aria-valuenow="${og}" aria-valuemin="${data.og.low}" ` +
+      `aria-valuemax="${data.og.high}">${og}</div></div>`);
+  } else {
+    $('#estimated-og').text(og);
+  }
 }
 
 // Calculate final gravity
@@ -249,8 +276,16 @@ function calculateFG() {
 }
 
 // Display FG
-function displayFG() {
-  $('#estimated-fg').text(calculateFG().toFixed(3));
+function displayFG(data) {
+  var fg = calculateFG().toFixed(3);
+  if (data !== null) {
+    var result = calculatePct(fg, data.fg.low, data.fg.high)
+    $('#estimated-fg').html(`<div class="progress spec-progress"><div class="progress-bar ${result.color}" ` +
+      `role="progressbar" style="width: ${result.pct}%;" aria-valuenow="${fg}" aria-valuemin="${data.fg.low}" ` +
+      `aria-valuemax="${data.fg.high}">${fg}</div></div>`);
+  } else {
+    $('#estimated-fg').text(fg);
+  }
 }
 
 // Calculate ABV
@@ -259,9 +294,16 @@ function calculate_abv() {
 }
 
 // Display ABV
-function displayABV() {
+function displayABV(data) {
   var abv = calculate_abv().toFixed(1);
-  $('#estimated-abv').text(`${abv} %/vol.`);
+  if (data !== null) {
+    var result = calculatePct(abv, data.abv.low, data.abv.high)
+    $('#estimated-abv').html(`<div class="progress spec-progress"><div class="progress-bar ${result.color}" ` +
+      `role="progressbar" style="width: ${result.pct}%;" aria-valuenow="${abv}" aria-valuemin="${data.abv.low}" ` +
+      `aria-valuemax="${data.abv.high}">${abv} %/vol.</div></div>`);
+  } else {
+    $('#estimated-abv').text(`${abv} %/vol.`);
+  }
 }
 
 // Calculate IBU
@@ -290,9 +332,17 @@ function calculateIBU() {
 }
 
 // Display IBU
-function displayIBU() {
+function displayIBU(data) {
   var ibu = calculateIBU().toFixed();
-  $('#estimated-ibu').text(`${ibu} IBU`);
+
+  if (data !== null) {
+    var result = calculatePct(ibu, data.ibu.low, data.ibu.high)
+    $('#estimated-ibu').html(`<div class="progress spec-progress"><div class="progress-bar ${result.color}" ` +
+      `role="progressbar" style="width: ${result.pct}%;" aria-valuenow="${ibu}" aria-valuemin="${data.ibu.low}" ` +
+      `aria-valuemax="${data.ibu.high}">${ibu} IBU</div></div>`);
+  } else {
+    $('#estimated-ibu').text(`${ibu} IBU`);
+  }
 }
 
 // Calculate IBU Ratio
@@ -323,19 +373,39 @@ function calculateSRM() {
 }
 
 // Display SRM
-function displaySRM() {
+function displaySRM(data) {
   var srm = calculateSRM().toFixed();
-  $('#estimated-srm').text(`${srm} SRM`);
+  if (data !== null) {
+    var result = calculatePct(srm, data.srm.low, data.srm.high)
+    $('#estimated-srm').html(`<div class="progress spec-progress"><div class="progress-bar ${result.color}" ` +
+      `role="progressbar" style="width: ${result.pct}%;" aria-valuenow="${srm}" aria-valuemin="${data.srm.low}" ` +
+      `aria-valuemax="${data.srm.high}">${srm} SRM</div></div>`);
+  } else {
+    $('#estimated-srm').text(`${srm} SRM`);
+  }
 }
 
 // Display all specifications
 function displayAll() {
-  displayOG();
-  displayFG();
-  displayABV();
-  displayIBU();
-  displayIBURatio();
-  displaySRM();
+  $.getJSON(getSpecsURL()).done(
+    function (json) {
+      displayOG(json);
+      displayFG(json);
+      displayABV(json);
+      displayIBU(json);
+      displayIBURatio();
+      displaySRM(json);
+    }
+  ).fail(
+    function () {
+      displayOG(null);
+      displayFG(null);
+      displayABV(null);
+      displayIBU(null);
+      displayIBURatio();
+      displaySRM(null);
+    }
+  );
 }
 
 $(document).ready(function() {
diff --git a/src/humulus/styles.py b/src/humulus/styles.py
index c7c4334..5424ef8 100644
--- a/src/humulus/styles.py
+++ b/src/humulus/styles.py
@@ -19,7 +19,8 @@ import xml.etree.ElementTree as ET
 
 import click
 import requests
-from flask import Blueprint, abort, current_app, render_template, request
+from flask import (Blueprint, abort, current_app, render_template, request,
+                   jsonify)
 from flask.cli import with_appcontext
 
 from humulus.auth import login_required
@@ -168,6 +169,31 @@ def info(id):
     return render_template('styles/info.html', style=get_doc_or_404(id))
 
 
+@bp.route('/info/<id>/json')
+@login_required
+def info_json(id):
+    """Returns JSON for the style.
+
+    If the 'specs' argument is present (regardless of value), only return
+    specs.
+    """
+    style = get_doc_or_404(id)
+    # Remove fields not needed for specs
+    if request.args.get('specs', None) is not None:
+        return jsonify({
+            'ibu': style['ibu'],
+            'og': style['og'],
+            'fg': style['fg'],
+            'abv': style['abv'],
+            'srm': style['srm']
+        })
+    # Remove fields not needed for export
+    style.pop('_id')
+    style.pop('_rev')
+    style.pop('$type')
+    return jsonify(style)
+
+
 @bp.route('/info/<id>/recipes')
 def recipes(id):
     style = get_doc_or_404(id)
diff --git a/src/humulus/templates/_base.html b/src/humulus/templates/_base.html
index 678401e..3b7c495 100644
--- a/src/humulus/templates/_base.html
+++ b/src/humulus/templates/_base.html
@@ -57,7 +57,7 @@
         </ul>
       </div>
     </nav>
-    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
     <script src="{{ url_for('static', filename='moment.min.js')}}"></script>
     <main role="main" class="container">
       {% block alert %}
diff --git a/src/humulus/templates/recipes/_macros.html b/src/humulus/templates/recipes/_macros.html
index b609fd3..6b04beb 100644
--- a/src/humulus/templates/recipes/_macros.html
+++ b/src/humulus/templates/recipes/_macros.html
@@ -15,6 +15,19 @@
 -#}
 {% from "_macros.html" import render_field_with_errors %}
 
+{#
+  Renders a javascript function to return a style's URL.
+#}
+{% macro get_specs_url() %}
+{% set id = 'ID' %}
+{% set specs = 'y' %}
+<script type="text/javascript">
+function getSpecsURL() {
+  return '{{ url_for("styles.info_json", id=id, specs=specs) }}'.replace('ID', $('#style').val());
+}
+</script>
+{% endmacro %}
+
 {#
   Used to render a form for creating/updating a recipe
 #}
@@ -30,8 +43,8 @@
     <div class="col-sm-3">{{ render_field_with_errors(form.volume, 'ingredient-field') }}</div>
   </div>
   <div class="row">
-    <div class="col-sm">{{ render_field_with_errors(form.style) }}</div>
-    <div class="col-sm">{{ render_field_with_errors(form.type) }}</div>
+    <div class="col-sm">{{ render_field_with_errors(form.style, 'ingredient-field', base_class='custom-select') }}</div>
+    <div class="col-sm">{{ render_field_with_errors(form.type, base_class='custom-select') }}</div>
   </div>
   {#-
     Fermentable Ingredients
@@ -46,7 +59,7 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-sm">{{ render_field_with_errors(fermentable.form.type, 'form-control-sm ingredient-field') }}</div>
+        <div class="col-sm">{{ render_field_with_errors(fermentable.form.type, 'ingredient-field custom-select-sm', base_class='custom-select') }}</div>
         <div class="col-sm">{{ render_field_with_errors(fermentable.form.amount, 'form-control-sm ingredient-field') }}</div>
         <div class="col-sm">{{ render_field_with_errors(fermentable.form.ppg, 'form-control-sm ingredient-field') }}</div>
         <div class="col-sm">{{ render_field_with_errors(fermentable.form.color, 'form-control-sm ingredient-field') }}</div>
@@ -77,7 +90,7 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-sm">{{ render_field_with_errors(hop.form.use, 'form-control-sm ingredient-field') }}</div>
+        <div class="col-sm">{{ render_field_with_errors(hop.form.use, 'ingredient-field custom-select-sm', base_class='custom-select') }}</div>
         <div class="col-sm">{{ render_field_with_errors(hop.form.alpha, 'form-control-sm ingredient-field') }}</div>
         <div class="col-sm">{{ render_field_with_errors(hop.form.duration, 'form-control-sm ingredient-field') }}</div>
         <div class="col-sm">{{ render_field_with_errors(hop.form.amount, 'form-control-sm ingredient-field') }}</div>
@@ -103,14 +116,14 @@
     <div class="border pl-2 pr-2 pt-1 pb-1 yeast-form">
       <div class="row">
         <div class="col-sm-6">{{ render_field_with_errors(form.yeast.form.name, 'form-control-sm') }}</div>
-        <div class="col-sm-2">{{ render_field_with_errors(form.yeast.form.type, 'form-control-sm') }}</div>
+        <div class="col-sm-2">{{ render_field_with_errors(form.yeast.form.type, 'custom-select-sm', base_class='custom-select') }}</div>
         <div class="col-sm-2">{{ render_field_with_errors(form.yeast.form.lab, 'form-control-sm') }}</div>
         <div class="col-sm-2">{{ render_field_with_errors(form.yeast.form.code, 'form-control-sm') }}</div>
       </div>
       <div class="row">
         <div class="col-sm">{{ render_field_with_errors(form.yeast.form.low_attenuation, 'form-control-sm ingredient-field') }}</div>
         <div class="col-sm">{{ render_field_with_errors(form.yeast.form.high_attenuation, 'form-control-sm ingredient-field') }}</div>
-        <div class="col-sm">{{ render_field_with_errors(form.yeast.form.flocculation, 'form-control-sm') }}</div>
+        <div class="col-sm">{{ render_field_with_errors(form.yeast.form.flocculation, 'custom-select-sm', base_class='custom-select') }}</div>
         <div class="col-sm">{{ render_field_with_errors(form.yeast.form.min_temperature, 'form-control-sm') }}</div>
         <div class="col-sm">{{ render_field_with_errors(form.yeast.form.max_temperature, 'form-control-sm') }}</div>
         <div class="col-sm">{{ render_field_with_errors(form.yeast.form.abv_tolerance, 'form-control-sm') }}</div>
@@ -130,6 +143,7 @@
     <div class="col"><button type="submit" class="btn btn-primary">{{ button_content }}</button></div>
   </div>
 </form>
+{{ get_specs_url() }}
 <script src="{{ url_for('static', filename='recipes.js') }}"></script>
 {% endmacro %}
 
diff --git a/src/humulus/templates/recipes/info.html b/src/humulus/templates/recipes/info.html
index cce2c60..368e282 100644
--- a/src/humulus/templates/recipes/info.html
+++ b/src/humulus/templates/recipes/info.html
@@ -30,7 +30,7 @@
 -#}
 <div class="row border-top"><h2>Details</h2></div>
 <div class="row">
-  <div class="col">
+  <div class="col-sm">
     <dl>
       <dt>Recipe Type</dt>
       <dd>{{ recipe.type }}</dd>
@@ -40,7 +40,7 @@
       <dd>{{ recipe.volume|float|round(1) }} gal.</dd>
     </dl>
   </div>
-  <div class="col">
+  <div class="col-sm">
     <dl>
       {% if 'created' in recipe %}
       <dt>Created</dt>
@@ -55,7 +55,7 @@
 </div>
 <div class="row"><h3>Estimated Specifications</h3></div>
 <div class="row">
-  <div class="col">
+  <div class="col-sm">
     <dl>
       <dt>Original Gravity</dt>
       <dd>
@@ -75,7 +75,7 @@
       </dd>
     </dl>
   </div>
-  <div class="col">
+  <div class="col-sm">
     <dl>
       <dt>Alcohol</dt>
       <dd>
@@ -95,7 +95,7 @@
       </dd>
     </dl>
   </div>
-  <div class="col">
+  <div class="col-sm">
     <dl>
       <dt>Bitterness</dt>
       <dd>
diff --git a/tests/test_styles.py b/tests/test_styles.py
index 80a07bc..4afc118 100644
--- a/tests/test_styles.py
+++ b/tests/test_styles.py
@@ -226,3 +226,23 @@ def test_recipes(client):
     response = client.get('/styles/info/1A/recipes')
     assert response.status_code == 200
     assert b'Awesome Beer' in response.data
+
+
+def test_info_json(auth, client):
+    """Test success in retrieving a style's json document."""
+    # Test not logged in
+    response = client.get('/styles/info/1A/json')
+    assert response.status_code == 302
+
+    # Login and test
+    auth.login()
+    response = client.get('/styles/info/1A/json')
+    assert response.status_code == 200
+    assert response.is_json
+    assert response.get_json()['name'] == 'Test Style'
+
+    # Test for specs only
+    response = client.get('/styles/info/1A/json?specs=y')
+    assert response.status_code == 200
+    assert response.is_json
+    assert 'name' not in response.get_json()