mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-10 19:57:13 +03:00
#886 - more prefix renaming - this time MDB -> BMD
This commit is contained in:
parent
0c4f0df848
commit
08a049466f
|
@ -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';
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
//
|
//
|
||||||
// "MDB" icon
|
// "BMD" icon
|
||||||
//
|
//
|
||||||
|
|
||||||
.bd-booticon {
|
.bd-booticon {
|
||||||
|
|
|
@ -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 -->
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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.
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue
Block a user