diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 07255816..7e20c7b3 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -221,8 +221,8 @@ Bootstrap checked out in parallel to this project, running three different termi bundle install npm install - # this is all you need after initial setup - jekyll serve + # update docs and serve + grunt dist docs && jekyll serve ``` 1. Initial build and watch @@ -244,6 +244,7 @@ This performs an initial build and watches both the core and docs sources for ch ```bash jekyll serve + ``` ## Releasing diff --git a/docs/_data/nav.yml b/docs/_data/nav.yml index b9239d2f..7f101146 100644 --- a/docs/_data/nav.yml +++ b/docs/_data/nav.yml @@ -23,6 +23,10 @@ - title: Tables - title: Figures +- title: Material Design + pages: + - title: Forms + - title: Components pages: - title: Buttons diff --git a/docs/_includes/page-headers.html b/docs/_includes/page-headers.html index ac06d192..1b2a67d5 100644 --- a/docs/_includes/page-headers.html +++ b/docs/_includes/page-headers.html @@ -13,6 +13,11 @@

Styles for displaying content with some of the most commonly used HTML elements, including typography, tables, and more.

+{% elsif page.group == "material-design" %} +

Material Design

+

+ A quick reference display for Material Design for Bootstrap components with additional options. +

{% elsif page.group == "components" %}

Components

diff --git a/docs/material-design/forms.md b/docs/material-design/forms.md new file mode 100644 index 00000000..d3bd205a --- /dev/null +++ b/docs/material-design/forms.md @@ -0,0 +1,193 @@ +--- +layout: docs +title: Forms +group: material-design +--- + +Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms. + +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + +## Form controls + +Form controls flavored by Material Design for Bootstrap customizations such as `label-floating`. +{% example html %} +

+
+ + + We'll never share your email with anyone else. +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + + This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line. +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+{% endexample %} + +Below is a complete list of options supported by Material Design for Bootstrap and the classes that customize them. Additional documentation is available for each group. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassesUsed forNotes
+ {% markdown %}`.mdb-form-group`{% endmarkdown %} + + Any group of form controls + + {% markdown %}This is automatically added by javascript, but if your code is templated, adding `.mdb-form-group` + to your form groups or otherwise your groups of controls can reduce rendering churn since the javascript will not + add the class after the initial page rendering.{% endmarkdown %} +
+ {% markdown %}`.label-floating`{% endmarkdown %} + + + + {% markdown %}TODO{% endmarkdown %} +
+ {% markdown %}`.label-static`{% endmarkdown %} + + + + {% markdown %}TODO{% endmarkdown %} +
+ {% markdown %}`.label-placeholder`{% endmarkdown %} + + + + {% markdown %}TODO{% endmarkdown %} +
+ + +### Form groups + +The `.mdb-form-group` class is usually added to the `.form-group` element. Whereas the `.form-group` adds structure to forms by providing `margin-bottom` around a label and control pairing, + the only purpose of the `.mdb-form-group` is to demarcate Material Design behaviors. Decorations and size variations are intended to be specified on + this element e.g. `.label-floating`. Focus/hover styling for the label/input is determined based on the `.mdb-form-group`. + +The `.mdb-form-group` is added automatically by javascript through basic discovery of the outer demarcation of the component defined by the Bootstrap standard +markup. If your code is templated, you may want to add `.mdb-form-group` to the markup directly to prevent any rendering churn from the javascript determining +and adding the class to the markup. In custom situations, the javascript may not be able to properly resolve the location for the `.mdb-form-group`, so in rare cases +you may need to wrap your markup in an `.mdb-form-group` to get appropriate focus/hover behavior. + +{% example html %} +
+
+ + +
+
+ + +
+
+{% endexample %} + +### Inline forms + +Use the `.form-inline` class to to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms behave differently: + +- Controls are `display: inline-block` to provide alignment control via `vertical-align` and `margin`. +- Controls receive `width: auto` to override the Bootstrap default `width: 100%`. +- Controls **only appear inline in viewports that are at least 768px wide** to account for narrow viewports on mobile devices. + +Because of this, you may need to manually address the width and alignment of individual form controls. Lastly, as shown below, you should always include a `