mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-09-21 03:19:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/assets/scss/docs.scss
View File

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

2
docs/assets/scss/mdb/_booticon.scss
View File

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

2
docs/examples/dashboard/index.html
View File

@ -134,7 +134,7 @@ js: example.js
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.
<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>
<!-- round charts -->

4
docs/getting-started/customization.md
View File

@ -4,7 +4,7 @@ title: Customization options
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 %}
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
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. `npm install` or `bower install` depending on your tool of choice

2
docs/index.html
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">
<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">
<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>

2
docs/material-design/collapse-inline.md
View File

@ -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

4
docs/material-design/drawers.md
View File

@ -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 `<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 %}
<div class="bmd-layout-container">

14
docs/migration.md
View File

@ -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.

8
js/src/base.js
View File

@ -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
}

26
js/src/baseInput.js
View File

@ -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: `<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
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
}

2
js/src/baseSelection.js
View File

@ -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