form helpers

_config.yml

@@ -111,14 +111,3 @@ socials: [facebook, twitter, google, youtube, vimeo, dribbble, github, instagram
 
 months_short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
 months_long: ['January', 'Febuary', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-
-
-docs-menu:
-  intro:
-    title: Getting started
-    pages: [index]
-  components:
-    title: Components
-    pages: [alerts, avatars, badges, buttons, cards, carousel, ribbons, spinners, steps, tabs, toasts, tooltips, typography]
-
-

pages/_data/docs.yml

+- page: alerts
+- page: avatars
+- page: badges
+- page: buttons
+- page: cards
+- page: carousel
+- page: ribbons
+- page: spinners
+- page: steps
+- page: tabs
+- page: toasts
+- page: tooltips
+- page: typography
+- page: form-helpers

pages/_data/menu.yml

@@ -20,7 +20,7 @@ level-1:
 docs:
   title: Documentation
   icon: file-text
-  docs: components
+  docs: true
 
 changelog:
   url: changelog.html

pages/_docs/alerts.md

@@ -7,7 +7,7 @@ Bootstrap provides an easy way to create predefined alert messages.
 
 ## Default markup
 
-{% example html %}
+{% example %}
 {% for variant in site.variants %}
 	{% capture variant-text %}
 		This is a {{ variant.name }} alert — check it out!
@@ -21,7 +21,7 @@ Bootstrap provides an easy way to create predefined alert messages.
 
 Add the `alert-link` class to any links inside the alert box to create "matching colored links":
 
-{% example html %}
+{% example %}
 {% for variant in site.variants %}
 	{% capture variant-text %}
 		This is a {{ variant.name }} alert — <a href="#">check it out!</a>
@@ -33,7 +33,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching
 
 ## Closing Alerts
 
-{% example html %}
+{% example %}
 {% for variant in site.variants %}
 	{% capture variant-text %}
 		This is a {{ variant.name }} alert — check it out!
@@ -44,7 +44,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching
 
 ## Alerts with icons
 
-{% example html %}
+{% example %}
 {% for variant in site.variants %}
 	{% capture variant-text %}
 		This is a {{ variant.name }} alert — check it out!

pages/_docs/avatars.md

@@ -83,7 +83,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
 
 ## Avatars list
 
-{% example html %}
+{% example %}
 <div class="avatar-list">
 {% for person in site.data.people limit: 5 offset: 20 %}
   {% include ui/avatar.html person=person %}
@@ -91,7 +91,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
 </div>
 {% endexample %}
 
-{% example html %}
+{% example %}
 <div class="avatar-list avatar-list-stacked">
   {% for person in site.data.people limit: 5 offset: 30 %}
   {% include ui/avatar.html person=person element="a" %}

pages/_docs/badges.md

@@ -7,7 +7,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
 
 ## Default markup
 
-{% example html %}
+{% example %}
 {% for color in site.colors %}
 <span class="badge text-white bg-{{ color[0] }}">{{ color[0] }}</span>
 {% endfor %}
@@ -15,7 +15,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
 
 ## Pill badges
 
-{% example html %}
+{% example %}
 {% for color in site.colors %}
 <span class="badge badge-pill text-white bg-{{ color[0] }}">{{ forloop.index }}</span>
 {% endfor %}
@@ -24,7 +24,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
 
 ## Soft badges
 
-{% example html %}
+{% example %}
 {% for color in site.colors %}
 <span class="badge bg-{{ color[0] }}-lt">{{ color[0] }}</span>
 {% endfor %}
@@ -33,7 +33,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
 
 ## Links
 
-{% example html %}
+{% example %}
 {% for color in site.colors %}
 <a href="#" class="badge bg-{{ color[0] }}">{{ color[0] }}</a>
 {% endfor %}
@@ -42,7 +42,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
 
 ## Empty badges
 
-{% example html %}
+{% example %}
 {% for color in site.colors %}
 <a href="#" class="badge bg-{{ color[0] }}"></a>
 {% endfor %}

pages/_docs/form-helpers.md

+---
+title: Form helpers
+---
+
+## Input help
+
+{% example %}
+<span class="form-help" data-toggle="popover" data-placement="top" data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
+{% endexample %}

pages/_docs/spinners.md

@@ -5,14 +5,14 @@ menu: docs.spinners
 
 ## Default markup
 
-{% example html %}
+{% example %}
 {% include ui/spinner.html %}
 {% endexample %}
 
 
 ## Colors
 
-{% example html %}
+{% example %}
 {% for color in site.colors %}
 {% assign c = color[0] %}
 {% include ui/spinner.html color=c %}
@@ -21,18 +21,18 @@ menu: docs.spinners
 
 ## Size
 
-{% example html %}
+{% example %}
 {% include ui/spinner.html %}
 {% include ui/spinner.html size="sm" %}
 {% endexample %}
 
 ## Growing spinner
 
-{% example html %}
+{% example %}
 {% include ui/spinner.html type="grow" %}
 {% endexample %}
 
-{% example html %}
+{% example %}
 {% for color in site.colors %}
 {% assign c = color[0] %}
 {% include ui/spinner.html color=c type="grow" %}

pages/_docs/steps.md

@@ -7,31 +7,31 @@ Steps are progress indicators of a sequence of task steps.
 
 ## Default markup
 
-{% example html %}
+{% example %}
 {% include ui/steps.html show-title=true %}
 {% endexample %}
 
 ## Tooltips
 
-{% example html %}
+{% example %}
 {% include ui/steps.html show-title=true show-tooltip=true %}
 {% endexample %}
 
 ## Color
 
-{% example html %}
+{% example %}
 {% include ui/steps.html color="green" show-title=true %}
 {% include ui/steps.html color="red" show-title=true %}
 {% endexample %}
 
 ## Steps without title
 
-{% example html %}
+{% example %}
 {% include ui/steps.html show-tooltip=true %}
 {% endexample %}
 
 ## Steps with numbers
 
-{% example html %}
+{% example %}
 {% include ui/steps.html count=5 active=2 numbers=true color="lime" %}
 {% endexample %}

pages/_docs/tables.md

@@ -9,7 +9,7 @@ A basic Bootstrap table has a light padding and only horizontal dividers.
 
 The `.table` class adds basic styling to a table:
 
-{% example html %}
+{% example %}
 {% include ui/table.html %}
 {% endexample %}
 
@@ -17,6 +17,6 @@ The `.table` class adds basic styling to a table:
 
 Prevents table cell content from wrapping to another line.
 
-{% example html %}
+{% example %}
 {% include ui/table.html nowrap=true responsive=true %}
 {% endexample %}

pages/_docs/toasts.md

@@ -7,6 +7,6 @@ The toast component is like an alert box that is only shown for a couple of seco
 
 ## Default markup
 
-{% example html %}
+{% example %}
 {% include ui/toast.html %}
 {% endexample %}

pages/_docs/typography.md

@@ -8,7 +8,7 @@ description: Documentation and examples for common text utilities to control ali
 
 Easily realign text to components with text alignment classes.
 
-{% example html %}
+{% example %}
 <p class="text-left">Left aligned text on all viewport sizes.</p>
 <p class="text-center">Center aligned text on all viewport sizes.</p>
 <p class="text-right">Right aligned text on all viewport sizes.</p>
@@ -19,7 +19,7 @@ Easily realign text to components with text alignment classes.
 
 Transform text in components with text capitalization classes.
 
-{% example html %}
+{% example %}
 <p class="text-lowercase">Lowercased text.</p>
 <p class="text-uppercase">Uppercased text.</p>
 <p class="text-capitalize">Capitalized text.</p>
@@ -29,7 +29,7 @@ Transform text in components with text capitalization classes.
 
 Utilities for controlling the tracking (letter spacing) of an element.
 
-{% example html %}
+{% example %}
 <p class="tracking-tight">Lorem ipsum dolor sit amet. Tight letter spacing.</p>
 <p class="tracking-normal">Lorem ipsum dolor sit amet. Normal letter spacing.</p>
 <p class="tracking-wide">Lorem ipsum dolor sit amet. Wide letter spacing.</p>
@@ -39,18 +39,29 @@ Utilities for controlling the tracking (letter spacing) of an element.
 
 Utilities for controlling the leading (line height) of an element.
 
-{% example html %}
+{% example %}
 <p class="leading-none">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
 <p class="leading-tight">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
 <p class="leading-normal">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
 <p class="leading-loose">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
 {% endexample %}
 
-## Basic elements
+## Antialiasing
+
+Utilities for controlling the font smoothing of an element.
+
+Use the `.antialiased` utility to render text using subpixel antialiasing or use the `.subpixel-antialiased` render without antialiasing.
+
+{% example %}
+<div class="antialiased">Text with antialiasing</div>
+<div class="subpixel-antialiased">Text without antialiasing</div>
+{% endexample %}
+
+## Markdown elements
 
 When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use `.markdown` as container. It can handle almost any HTML tag.
 
-{% example html %}
+{% example %}
 <div class="markdown">
    <h1>Hello World</h1>
    <p>Lorem ipsum<sup><a>[1]</a></sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub> works as well!</p>

pages/_includes/layout/menu.html

@@ -19,9 +19,9 @@
          <ul class="nav nav-sm flex-column">
 
             {% if level-1[1].docs %}
-            {% assign docs-key = level-1[1].docs %}
-            {% for doc-slug in site.docs-menu[docs-key].pages %}
-            {% assign doc = site.docs | where: "slug", doc-slug | first %}
+            {% for d in site.data.docs %}
+            {% assign doc = site.docs | where: "slug", d.page | first %}
+            {% if doc %}
             <li class="nav-item">
                <a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="nav-link{% if current-page[0] == 'docs' and current-page[1] == doc.slug %} active{% endif %}">
                   <span class="nav-link-title">
@@ -33,6 +33,7 @@
                   </span>
                </a>
             </li>
+            {% endif %}
             {% endfor %}
             {% endif %}
 

pages/_layouts/docs.html

@@ -37,5 +37,6 @@ title: Documentation
 <script>
    $(document).ready(function(){
       $('[data-toggle="tooltip"]').tooltip();
+      $('[data-toggle="popover"]').popover();
    });
 </script>

pages/_plugins/jekyll-example.rb

@@ -14,6 +14,10 @@ module Jekyll
 
       def initialize(tag_name, markup, tokens)
         super
+        if markup.strip == ""
+          markup = 'html'
+        end
+
         if markup.strip =~ SYNTAX
           @lang = $1.downcase
           @options = {}

scss/ui/_inputs.scss

@@ -16,6 +16,10 @@ textarea {
 }
 
 .form-control {
+  &:-webkit-autofill {
+    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
+  }
+
   &:disabled,
   &.disabled {
     color: $text-muted;
@@ -48,3 +52,27 @@ textarea {
   border: 1px solid $border-color;
 }
 
+/**
+Form help
+ */
+.form-help {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  text-align: center;
+  line-height: 1rem;
+  color: $text-muted;
+  background: $gray-100;
+  border-radius: 50%;
+  font-size: px2rem(12px);
+  transition: .3s background-color, .3s color;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+
+  &:hover,
+  &[aria-describedby] {
+    background: $primary;
+    color: #fff;
+  }
+}

scss/utils/_text.scss

@@ -45,11 +45,23 @@
 .font-extrabold	{ font-weight: 800 !important; }
 .font-black		{ font-weight: 900 !important; }
 
+
+/**
+Antialiasing
+ */
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+.subpixel-antialiased {
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+
+/**
+Markdown
+ */
 .markdown {
   line-height: 1.66;