`)
+ $tr.append($td)
+ $td.append($text)
+
+ }, false, true)
+
+ // lead headings
+ Style.displayFontSizeWeightColor($('h2#lead').next().next().find('p'), ($element, $text) => {
+ $element.append($text)
+
+ }, false, true)
+
+ // inline text elements
+ Style.displayFontSizeWeightColor($(`p:contains(Styling for common inline HTML5 elements.)`).next().find('p > *'), ($element, $text) => {
+
+ let $p = $element.parent()
+ let $parent = $p.parent()
+ $p.detach()
+
+ // create a row with two columns to display the text properties
+ let $row = $(``)
+ $parent.append($row)
+
+ let $col = $(``)
+ $col.append($p)
+ $row.append($col)
+
+ $col = $(``)
+ $col.append($text)
+ $row.append($col)
+ }, false, true)
}
- clipboard() {
+ initializeClipboard() {
// Insert copy to clipboard button before .highlight
$('.highlight').each(function () {
let btnHtml = '
Copy
'
@@ -73,7 +112,7 @@ class Application {
$(() => {
let app = new Application()
app.displayTypographyProperties()
- app.clipboard()
+ app.initializeClipboard()
// $.bootstrapMaterialDesign()
-
+ $('body').bootstrapMaterialDesign()
})
diff --git a/docs/assets/js/src/style.js b/docs/assets/js/src/style.js
index 40680a72..8a566ba5 100644
--- a/docs/assets/js/src/style.js
+++ b/docs/assets/js/src/style.js
@@ -26,10 +26,10 @@ const Style = (($) => {
return hex
}
- static displayFontSizeWeightColor(selector, targetFn, after = false, bg = false, wrapWithMark = false) {
- return $(selector).each((index, element) => {
+ // Function to display font properties dynamically discovered
+ static displayFontSizeWeightColor($elements, writeFn, bg = false, wrapWithMark = false) {
+ return $elements.each((index, element) => {
let $element = $(element)
- let $target = targetFn($element)
let rgbaBgColor = $element.css('background-color')
// let hexBgColor = Style.rgbToHex(rgbaBgColor)
@@ -40,10 +40,11 @@ const Style = (($) => {
let text = ''
if (wrapWithMark) {
- text += ``
+ text += ``
}
+
// text += `${$element.css('font-size')} ${$element.css('font-weight')} ${hexColor}`
- text += `${$element.css('font-size')} ${$element.css('font-weight')} ${rgbaColor}`
+ text += `${$element.css('font-size')} ${$element.css('font-weight')} ${rgbaColor}`
if (bg) {
// text += ` bg: ${hexBgColor} `
text += ` bg: ${rgbaBgColor} `
@@ -53,8 +54,7 @@ const Style = (($) => {
text += ``
}
- $target.text('')
- $target.append($(text))
+ writeFn($element, $(text))
})
}
diff --git a/docs/assets/scss/.READONLY-MOSTLY.txt b/docs/assets/scss/.READONLY-MOSTLY.txt
index 8183bac9..a7844356 100644
--- a/docs/assets/scss/.READONLY-MOSTLY.txt
+++ b/docs/assets/scss/.READONLY-MOSTLY.txt
@@ -1,6 +1,6 @@
DO NOT edit files in this folder EXCEPT docs.scss.
These files are copied using
- grunt copy:bs-docs-scss
+ grunt docs-copy-bootstrap
This is done to keep samples in sync with the upstream bs4.
diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 4e3dc73b..fa3651c0 100644
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -1,4 +1,6 @@
-// This is the only customized file in this directory.
+// This is the only customized file in this immediate directory, the rest are copied with:
+// grunt docs-copy-bootstrap
+// (perhaps add customizations in subdirectories)
/*!
* Bootstrap Docs (http://getbootstrap.com)
@@ -25,9 +27,9 @@
// Happy Bootstrapping!
// Load Bootstrap variables and mixins
-//@import "../../../scss/includes/variables";
-//@import "../../../scss/includes/mixins";
-@import "../../../scss/includes/colors";
+//@import '../../../scss/includes/variables';
+//@import '../../../scss/includes/mixins';
+@import '../../../scss/includes/colors';
//http://www.materialpalette.com/indigo/light-blue
$brand-primary: $indigo-500; // #3F51B5
@@ -53,30 +55,33 @@ $bd-danger: #d9534f;
$bd-warning: #f0ad4e;
$bd-info: #5bc0de;
-@import "../../../scss/includes/bootstrap-material-design";
+@import '../../../scss/includes/bootstrap-material-design';
// Load docs components
-@import "booticon";
-@import "nav";
-@import "masthead";
-@import "featurettes";
-@import "featured-sites";
-@import "ads";
-@import "content";
-@import "page-header";
-@import "skiplink";
-@import "sidebar";
-@import "footer";
-@import "component-examples";
-@import "responsive-tests";
-@import "buttons";
-@import "callouts";
-@import "examples";
-@import "team";
-@import "browser-bugs";
-@import "brand";
-@import "clipboard-js";
+@import 'booticon';
+@import 'nav';
+@import 'masthead';
+@import 'featurettes';
+@import 'featured-sites';
+@import 'ads';
+@import 'content';
+@import 'page-header';
+@import 'skiplink';
+@import 'sidebar';
+@import 'footer';
+@import 'component-examples';
+@import 'responsive-tests';
+@import 'buttons';
+@import 'callouts';
+@import 'examples';
+@import 'team';
+@import 'browser-bugs';
+@import 'brand';
+@import 'clipboard-js';
// Load docs dependencies
-@import "syntax";
-@import "anchor";
+@import 'syntax';
+@import 'anchor';
+
+// MDB customizatinos
+@import 'mdb/booticon';
diff --git a/docs/assets/scss/mdb/_booticon.scss b/docs/assets/scss/mdb/_booticon.scss
new file mode 100644
index 00000000..8e4c9784
--- /dev/null
+++ b/docs/assets/scss/mdb/_booticon.scss
@@ -0,0 +1,8 @@
+//
+// "MDB" icon
+//
+
+.bd-booticon {
+ width: 16rem;
+ border-radius: 1rem;
+}
diff --git a/docs/components/.READONLY.txt b/docs/components/.READONLY.txt
index 42548f0b..08e70e0b 100644
--- a/docs/components/.READONLY.txt
+++ b/docs/components/.READONLY.txt
@@ -1,6 +1,6 @@
DO NOT edit files in this folder.
These files are copied using
- grunt copy:bs-docs-components
+ grunt docs-copy-bootstrap
This is done to keep samples in sync with the upstream bs4.
diff --git a/docs/content/.READONLY.txt b/docs/content/.READONLY.txt
index c0a06422..08e70e0b 100644
--- a/docs/content/.READONLY.txt
+++ b/docs/content/.READONLY.txt
@@ -1,6 +1,6 @@
DO NOT edit files in this folder.
These files are copied using
- grunt copy:bs-docs-content
+ grunt docs-copy-bootstrap
This is done to keep samples in sync with the upstream bs4.
diff --git a/docs/index.html b/docs/index.html
index 8f0b4567..1b2c8875 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -31,11 +31,9 @@ title: Material Design for Bootstrap, the world's most popular mobile-first and
Material Design for Bootstrap CDN
When you just need to include Material Design for Bootstrap's compiled CSS and JS, use the Material Design for Bootstrap CDN, free from the Max CDN folks.