- MDB + BMD

Material Design for Bootstrap, the world's most popular mobile-first and responsive front-end framework.

Download diff --git a/docs/material-design/collapse-inline.md b/docs/material-design/collapse-inline.md index 4a2e3d34..1cee0a97 100644 --- a/docs/material-design/collapse-inline.md +++ b/docs/material-design/collapse-inline.md @@ -4,7 +4,7 @@ title: Collapse inline group: material-design --- -The Material Design for Bootstrap `CollapseInline` plugin allows you to toggle inline content on your pages with a bit of JavaScript and some classes. This plugin utilizes a handful of classes from the [Bootstrap collapse plugin]({{ site.baseurl }}/components/collapse/) for easy toggle behavior. Since most functionality and documentation (including a rich set of Javascript events) is already provided by the [Bootstrap collapse plugin]({{ site.baseurl }}/components/collapse/), the following will focus only on some samples utilizing the MDB `CollapseInline` component. +The Material Design for Bootstrap `CollapseInline` plugin allows you to toggle inline content on your pages with a bit of JavaScript and some classes. This plugin utilizes a handful of classes from the [Bootstrap collapse plugin]({{ site.baseurl }}/components/collapse/) for easy toggle behavior. Since most functionality and documentation (including a rich set of Javascript events) is already provided by the [Bootstrap collapse plugin]({{ site.baseurl }}/components/collapse/), the following will focus only on some samples utilizing the BMD `CollapseInline` component. ## Contents diff --git a/docs/material-design/drawers.md b/docs/material-design/drawers.md index 7b20f574..3be734c8 100644 --- a/docs/material-design/drawers.md +++ b/docs/material-design/drawers.md @@ -4,7 +4,7 @@ title: Drawers group: material-design --- -The Material Design for Bootstrap `Drawer` provides a markup structure and plugin that allows you to display content on the bounds of any containing element. Drawers are commonly referred to as a side nav or offcanvas nav. The MDB implementation allows for positioning top, left, bottom, right, as well as two styles including push (default) as well as overlay. Both the drawer position and style can be set statically or responsively with the provided classes. +The Material Design for Bootstrap `Drawer` provides a markup structure and plugin that allows you to display content on the bounds of any containing element. Drawers are commonly referred to as a side nav or offcanvas nav. The BMD implementation allows for positioning top, left, bottom, right, as well as two styles including push (default) as well as overlay. Both the drawer position and style can be set statically or responsively with the provided classes. ## Contents @@ -26,7 +26,7 @@ The default behavior for any drawer is to be _out_ of the frame of view. It can ### Markup -In order to use the drawer component you must use MDB's flex based layout structure. If this layout structure is not a direct child of ``, be sure that the containing element has set `position: relative` as this layout structure utilizes an outer element that is absolutely positioned in order to enable features such as content scrolling and sticky header. +In order to use the drawer component you must use BMD's flex based layout structure. If this layout structure is not a direct child of ``, be sure that the containing element has set `position: relative` as this layout structure utilizes an outer element that is absolutely positioned in order to enable features such as content scrolling and sticky header. {% highlight html %}

diff --git a/docs/migration.md b/docs/migration.md index 287d3858..e7f5113a 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -12,12 +12,12 @@ The most notable changes are summarized immediately below, followed by more spec {% endcallout %} {% callout info %} -These migration changes are for MDB, and should be considered **in addition** to the [Bootstrap migration guidelines](http://v4-alpha.getbootstrap.com/migration/). +These migration changes are for BMD, and should be considered **in addition** to the [Bootstrap migration guidelines](http://v4-alpha.getbootstrap.com/migration/). {% endcallout %} ## Summary -Here are the big ticket items you'll want to be aware of when moving from MDB v3 to v4. +Here are the big ticket items you'll want to be aware of when moving from BMD v3 to v4. ### Browser support @@ -31,10 +31,10 @@ Here are the big ticket items you'll want to be aware of when moving from MDB v3 - Switched from `px` to `rem` as our primary CSS unit. - Global font-size increased from `14px` to `16px`. - Switched Javascript to ES6 classes -- Globally switched MDB variables and classes to the prefix `bmd-` to avoid confusion with Bootstrap variables. +- Globally switched BMD variables and classes to the prefix `bmd-` to avoid confusion with Bootstrap variables. - Added strong scss-lint and eslint rules from Bootstrap - Adopted Bootstrap project organization and Build structure -- Reference documentation is now synced from Bootstrap, rendered with MDB to show default rendering examples +- Reference documentation is now synced from Bootstrap, rendered with BMD to show default rendering examples - File renaming to be equivalent to Bootstrap files ### Components @@ -65,10 +65,10 @@ This list highlights key changes by component between v3.x.x and v4.0.0. - Simpler selectors - Introduced `.bmd-form-group` to provide demarcation for label/input combinations, disconnecting it explicitly from `.form-group` so that they can be used independently. - Spec review for sizing -- Bootstrap removed `.help-block`, MDB added `.bmd-help` class to mark added behaviors. +- Bootstrap removed `.help-block`, BMD added `.bmd-help` class to mark added behaviors. - Inverted marker class to use `.is-filled` instead of `.is-empty` for simpler css matches - Bootstrap removed `.form-group-sm` and `.form-group-lg`. `.bmd-form-group-*` variants added to address sizing combinations of label/input/help -- V3 MDB `toggle` is now `bmd-switch` for more consistent naming with the spec +- V3 BMD `toggle` is now `bmd-switch` for more consistent naming with the spec - TODO - File Input ### [Labels](../material-design/labels) @@ -80,7 +80,7 @@ This list highlights key changes by component between v3.x.x and v4.0.0. - Utilized Bootstrap mixins for plain/hover/focus/active - Introduced mixin `bmd-hover-focus-active` to address `.active` in addition to Bootstraps `hover-focus-active` - Refactored shadow behaviors, now more consistent -- Changed `btn-fab` to `bmd-btn-fab` to denote MDB only component +- Changed `btn-fab` to `bmd-btn-fab` to denote BMD only component - `btn-fab-mini` is now `btn-fab-sm` for consistency with Bootstrap size naming - Introduced shadow behaviors to `bmd-btn-fab`. Spec is silent on this. diff --git a/js/src/base.js b/js/src/base.js index 34536adf..8bc9774c 100644 --- a/js/src/base.js +++ b/js/src/base.js @@ -3,13 +3,13 @@ import Util from './util' const Base = (($) => { const ClassName = { - MDB_FORM_GROUP: 'bmd-form-group', + BMD_FORM_GROUP: 'bmd-form-group', IS_FILLED: 'is-filled', IS_FOCUSED: 'is-focused' } const Selector = { - MDB_FORM_GROUP: `.${ClassName.MDB_FORM_GROUP}` + BMD_FORM_GROUP: `.${ClassName.BMD_FORM_GROUP}` } const Default = {} @@ -66,9 +66,9 @@ const Base = (($) => { // Find bmd-form-group findMdbFormGroup(raiseError = true) { - let mfg = this.$element.closest(Selector.MDB_FORM_GROUP) + let mfg = this.$element.closest(Selector.BMD_FORM_GROUP) if (mfg.length === 0 && raiseError) { - $.error(`Failed to find ${Selector.MDB_FORM_GROUP} for ${Util.describe(this.$element)}`) + $.error(`Failed to find ${Selector.BMD_FORM_GROUP} for ${Util.describe(this.$element)}`) } return mfg } diff --git a/js/src/baseInput.js b/js/src/baseInput.js index 95268e26..56b8e7b8 100644 --- a/js/src/baseInput.js +++ b/js/src/baseInput.js @@ -5,11 +5,11 @@ const BaseInput = (($) => { const ClassName = { FORM_GROUP: 'form-group', - MDB_FORM_GROUP: 'bmd-form-group', - MDB_LABEL: 'bmd-label', - MDB_LABEL_STATIC: 'bmd-label-static', - MDB_LABEL_PLACEHOLDER: 'bmd-label-placeholder', - MDB_LABEL_FLOATING: 'bmd-label-floating', + BMD_FORM_GROUP: 'bmd-form-group', + BMD_LABEL: 'bmd-label', + BMD_LABEL_STATIC: 'bmd-label-static', + BMD_LABEL_PLACEHOLDER: 'bmd-label-placeholder', + BMD_LABEL_FLOATING: 'bmd-label-floating', HAS_DANGER: 'has-danger', IS_FILLED: 'is-filled', IS_FOCUSED: 'is-focused' @@ -17,8 +17,8 @@ const BaseInput = (($) => { const Selector = { FORM_GROUP: `.${ClassName.FORM_GROUP}`, - MDB_FORM_GROUP: `.${ClassName.MDB_FORM_GROUP}`, - MDB_LABEL_WILDCARD: `label[class^='${ClassName.MDB_LABEL}'], label[class*=' ${ClassName.MDB_LABEL}']` // match any label variant if specified + BMD_FORM_GROUP: `.${ClassName.BMD_FORM_GROUP}`, + BMD_LABEL_WILDCARD: `label[class^='${ClassName.BMD_LABEL}'], label[class*=' ${ClassName.BMD_LABEL}']` // match any label variant if specified } const Default = { @@ -27,7 +27,7 @@ const BaseInput = (($) => { required: false }, mdbFormGroup: { - template: ``, + template: ``, create: true, // create a wrapper if form-group not found required: true // not recommended to turn this off, only used for inline components }, @@ -38,13 +38,13 @@ const BaseInput = (($) => { // - a function(thisComponent); or // - a string selector used like $mdbFormGroup.find(selector) // - // Note this only runs if $mdbFormGroup.find(Selector.MDB_LABEL_WILDCARD) fails to find a label (as authored in the markup) + // Note this only runs if $mdbFormGroup.find(Selector.BMD_LABEL_WILDCARD) fails to find a label (as authored in the markup) // selectors: [ `.form-control-label`, // in the case of horizontal or inline forms, this will be marked `> label` // usual case for text inputs, first child. Deeper would find toggle labels so don't do that. ], - className: ClassName.MDB_LABEL_STATIC + className: ClassName.BMD_LABEL_STATIC }, requiredClasses: [], invalidComponentMatches: [], @@ -179,7 +179,7 @@ const BaseInput = (($) => { this.outerElement().wrap(this.config.mdbFormGroup.template) } else { // a form-group does exist, add our marker class to it - this.$formGroup.addClass(ClassName.MDB_FORM_GROUP) + this.$formGroup.addClass(ClassName.BMD_FORM_GROUP) // OLD: may want to implement this after all, see how the styling turns out, but using an existing form-group is less manipulation of the dom and therefore preferable // A form-group does exist, so add an bmd-form-group wrapping it's internal contents @@ -201,7 +201,7 @@ const BaseInput = (($) => { // Will add bmd-label to bmd-form-group if not already specified resolveMdbLabel() { - let label = this.$mdbFormGroup.find(Selector.MDB_LABEL_WILDCARD) + let label = this.$mdbFormGroup.find(Selector.BMD_LABEL_WILDCARD) if (label === undefined || label.length === 0) { // we need to find it based on the configured selectors label = this.findMdbLabel(this.config.label.required) @@ -235,7 +235,7 @@ const BaseInput = (($) => { } if (label.length === 0 && raiseError) { - $.error(`Failed to find ${Selector.MDB_LABEL_WILDCARD} within form-group for ${Util.describe(this.$element)}`) + $.error(`Failed to find ${Selector.BMD_LABEL_WILDCARD} within form-group for ${Util.describe(this.$element)}`) } return label } diff --git a/js/src/baseSelection.js b/js/src/baseSelection.js index 8a22bbe1..24ff0afe 100644 --- a/js/src/baseSelection.js +++ b/js/src/baseSelection.js @@ -16,7 +16,7 @@ const BaseSelection = (($) => { // - a function(thisComponent); or // - a string selector used like $mdbFormGroup.find(selector) // - // Note this only runs if $mdbFormGroup.find(Selector.MDB_LABEL_WILDCARD) fails to find a label (as authored in the markup) + // Note this only runs if $mdbFormGroup.find(Selector.BMD_LABEL_WILDCARD) fails to find a label (as authored in the markup) // //selectors: [ // `.form-control-label`, // in the case of horizontal or inline forms, this will be marked