#886 - more prefix renaming - this time MDB -> BMD

This commit is contained in:
Kevin Ross 2016-03-28 11:13:18 -05:00
parent 0c4f0df848
commit 08a049466f
11 changed files with 34 additions and 34 deletions

View File

@ -87,7 +87,7 @@ $bd-info: $brand-info; // #5bc0de;
@import 'syntax'; @import 'syntax';
@import 'anchor'; @import 'anchor';
// MDB customizatinos // BMD customizatinos
@import 'mdb/booticon'; @import 'mdb/booticon';
@import 'mdb/component-examples'; @import 'mdb/component-examples';
@import 'mdb/clipboard-js'; @import 'mdb/clipboard-js';

View File

@ -1,5 +1,5 @@
// //
// "MDB" icon // "BMD" icon
// //
.bd-booticon { .bd-booticon {

View File

@ -134,7 +134,7 @@ js: example.js
This is an implementation of This is an implementation of
<a href="http://www.getmdl.io/templates/dashboard/index.html">Material Design Lite's dashboard template</a>. It provides a simple way to compare approaches with source code. Original design and assets credited to the MDL team. <a href="http://www.getmdl.io/templates/dashboard/index.html">Material Design Lite's dashboard template</a>. It provides a simple way to compare approaches with source code. Original design and assets credited to the MDL team.
<small>(see license)</small> <small>(see license)</small>
. Additional functionality showing drawer placement is an MDB only feature. See the icons in the navbar. . Additional functionality showing drawer placement is an BMD only feature. See the icons in the navbar.
</div> </div>
<!-- round charts --> <!-- round charts -->

View File

@ -4,7 +4,7 @@ title: Customization options
group: getting-started group: getting-started
--- ---
Material Design for Bootstrap 4 is designed to be customized via Sass variables. You may customize any Bootstrap or MDB variable. Material Design for Bootstrap 4 is designed to be customized via Sass variables. You may customize any Bootstrap or BMD variable.
{% callout info %} {% callout info %}
The following assumes you have [setup your Build tools](../build-tools) The following assumes you have [setup your Build tools](../build-tools)
@ -18,7 +18,7 @@ Here are some ways to customize:
## 1. (Recommended) Include the source in your application ## 1. (Recommended) Include the source in your application
Installing via npm (recommended) or bower, customizing MDB is a breeze. Installing via npm (recommended) or bower, customizing BMD is a breeze.
1. Add `bootstrap-material-design` as a dependency to your `package.json` or your `bower.json` 1. Add `bootstrap-material-design` as a dependency to your `package.json` or your `bower.json`
1. `npm install` or `bower install` depending on your tool of choice 1. `npm install` or `bower install` depending on your tool of choice

View File

@ -5,7 +5,7 @@ title: Material Design for Bootstrap, the world's most popular mobile-first and
<main class="bd-masthead" id="content" role="main"> <main class="bd-masthead" id="content" role="main">
<div class="container"> <div class="container">
<span class="bd-booticon outline">MDB</span> <span class="bd-booticon outline">BMD</span>
<p class="lead">Material Design for Bootstrap, the world's most popular mobile-first and responsive front-end framework.</p> <p class="lead">Material Design for Bootstrap, the world's most popular mobile-first and responsive front-end framework.</p>
<p class="lead"> <p class="lead">
<a href="{{ site.baseurl }}/getting-started/download" class="btn btn-outline-inverse btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.data.version }}');">Download</a> <a href="{{ site.baseurl }}/getting-started/download" class="btn btn-outline-inverse btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.data.version }}');">Download</a>

View File

@ -4,7 +4,7 @@ title: Collapse inline
group: material-design 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 ## Contents

View File

@ -4,7 +4,7 @@ title: Drawers
group: material-design 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 ## Contents
@ -26,7 +26,7 @@ The default behavior for any drawer is to be _out_ of the frame of view. It can
### Markup ### 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 `<body>`, 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 `<body>`, 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 %} {% highlight html %}
<div class="bmd-layout-container"> <div class="bmd-layout-container">

View File

@ -12,12 +12,12 @@ The most notable changes are summarized immediately below, followed by more spec
{% endcallout %} {% endcallout %}
{% callout info %} {% 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 %} {% endcallout %}
## Summary ## 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 ### 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. - Switched from `px` to `rem` as our primary CSS unit.
- Global font-size increased from `14px` to `16px`. - Global font-size increased from `14px` to `16px`.
- Switched Javascript to ES6 classes - 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 - Added strong scss-lint and eslint rules from Bootstrap
- Adopted Bootstrap project organization and Build structure - 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 - File renaming to be equivalent to Bootstrap files
### Components ### Components
@ -65,10 +65,10 @@ This list highlights key changes by component between v3.x.x and v4.0.0.
- Simpler selectors - 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. - 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 - 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 - 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 - 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 - TODO - File Input
### [Labels](../material-design/labels) ### [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 - Utilized Bootstrap mixins for plain/hover/focus/active
- Introduced mixin `bmd-hover-focus-active` to address `.active` in addition to Bootstraps `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 - 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 - `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. - Introduced shadow behaviors to `bmd-btn-fab`. Spec is silent on this.

View File

@ -3,13 +3,13 @@ import Util from './util'
const Base = (($) => { const Base = (($) => {
const ClassName = { const ClassName = {
MDB_FORM_GROUP: 'bmd-form-group', BMD_FORM_GROUP: 'bmd-form-group',
IS_FILLED: 'is-filled', IS_FILLED: 'is-filled',
IS_FOCUSED: 'is-focused' IS_FOCUSED: 'is-focused'
} }
const Selector = { const Selector = {
MDB_FORM_GROUP: `.${ClassName.MDB_FORM_GROUP}` BMD_FORM_GROUP: `.${ClassName.BMD_FORM_GROUP}`
} }
const Default = {} const Default = {}
@ -66,9 +66,9 @@ const Base = (($) => {
// Find bmd-form-group // Find bmd-form-group
findMdbFormGroup(raiseError = true) { 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) { 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 return mfg
} }

View File

@ -5,11 +5,11 @@ const BaseInput = (($) => {
const ClassName = { const ClassName = {
FORM_GROUP: 'form-group', FORM_GROUP: 'form-group',
MDB_FORM_GROUP: 'bmd-form-group', BMD_FORM_GROUP: 'bmd-form-group',
MDB_LABEL: 'bmd-label', BMD_LABEL: 'bmd-label',
MDB_LABEL_STATIC: 'bmd-label-static', BMD_LABEL_STATIC: 'bmd-label-static',
MDB_LABEL_PLACEHOLDER: 'bmd-label-placeholder', BMD_LABEL_PLACEHOLDER: 'bmd-label-placeholder',
MDB_LABEL_FLOATING: 'bmd-label-floating', BMD_LABEL_FLOATING: 'bmd-label-floating',
HAS_DANGER: 'has-danger', HAS_DANGER: 'has-danger',
IS_FILLED: 'is-filled', IS_FILLED: 'is-filled',
IS_FOCUSED: 'is-focused' IS_FOCUSED: 'is-focused'
@ -17,8 +17,8 @@ const BaseInput = (($) => {
const Selector = { const Selector = {
FORM_GROUP: `.${ClassName.FORM_GROUP}`, FORM_GROUP: `.${ClassName.FORM_GROUP}`,
MDB_FORM_GROUP: `.${ClassName.MDB_FORM_GROUP}`, BMD_FORM_GROUP: `.${ClassName.BMD_FORM_GROUP}`,
MDB_LABEL_WILDCARD: `label[class^='${ClassName.MDB_LABEL}'], label[class*=' ${ClassName.MDB_LABEL}']` // match any label variant if specified BMD_LABEL_WILDCARD: `label[class^='${ClassName.BMD_LABEL}'], label[class*=' ${ClassName.BMD_LABEL}']` // match any label variant if specified
} }
const Default = { const Default = {
@ -27,7 +27,7 @@ const BaseInput = (($) => {
required: false required: false
}, },
mdbFormGroup: { mdbFormGroup: {
template: `<span class='${ClassName.MDB_FORM_GROUP}'></span>`, template: `<span class='${ClassName.BMD_FORM_GROUP}'></span>`,
create: true, // create a wrapper if form-group not found create: true, // create a wrapper if form-group not found
required: true // not recommended to turn this off, only used for inline components required: true // not recommended to turn this off, only used for inline components
}, },
@ -38,13 +38,13 @@ const BaseInput = (($) => {
// - a function(thisComponent); or // - a function(thisComponent); or
// - a string selector used like $mdbFormGroup.find(selector) // - 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: [ selectors: [
`.form-control-label`, // in the case of horizontal or inline forms, this will be marked `.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. `> 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: [], requiredClasses: [],
invalidComponentMatches: [], invalidComponentMatches: [],
@ -179,7 +179,7 @@ const BaseInput = (($) => {
this.outerElement().wrap(this.config.mdbFormGroup.template) this.outerElement().wrap(this.config.mdbFormGroup.template)
} else { } else {
// a form-group does exist, add our marker class to it // 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 // 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 // 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 // Will add bmd-label to bmd-form-group if not already specified
resolveMdbLabel() { 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) { if (label === undefined || label.length === 0) {
// we need to find it based on the configured selectors // we need to find it based on the configured selectors
label = this.findMdbLabel(this.config.label.required) label = this.findMdbLabel(this.config.label.required)
@ -235,7 +235,7 @@ const BaseInput = (($) => {
} }
if (label.length === 0 && raiseError) { 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 return label
} }

View File

@ -16,7 +16,7 @@ const BaseSelection = (($) => {
// - a function(thisComponent); or // - a function(thisComponent); or
// - a string selector used like $mdbFormGroup.find(selector) // - 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: [ //selectors: [
// `.form-control-label`, // in the case of horizontal or inline forms, this will be marked // `.form-control-label`, // in the case of horizontal or inline forms, this will be marked