mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-02-02 21:04:13 +03:00
docs focused, add more dynamic display of typography properties
This commit is contained in:
Kevin Ross
parent
b06051e179
commit
ea3a520b11
|
|
@ -1,20 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 180 612 612" enable-background="new 0 180 612 612" xml:space="preserve">
|
||||
<g id="outline" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
|
||||
<g id="bg_1_">
|
||||
<path fill="#FFFFFF" d="M510,186c25.5,0,49.6,10,67.8,28.2S606,256.5,606,282v408c0,25.5-10,49.6-28.2,67.8S535.5,786,510,786H102
|
||||
c-25.5,0-49.6-10-67.8-28.2S6,715.5,6,690V282c0-25.5,10-49.6,28.2-67.8S76.5,186,102,186H510 M510,180H102
|
||||
C45.9,180,0,225.9,0,282v408c0,56.1,45.9,102,102,102h408c56.1,0,102-45.9,102-102V282C612,225.9,566.1,180,510,180L510,180z"/>
|
||||
</g>
|
||||
<g id="B_2_" enable-background="new ">
|
||||
<path fill="#FFFFFF" d="M166.3,313h173.5c32,0,57.7,7.3,77,22s29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
|
||||
c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
|
||||
c-5,12.2-12.8,22.7-23.5,31.5s-24.3,15.8-41,21s-36.5,7.8-59.5,7.8h-164L166.3,313L166.3,313z M228.8,462.5h102
|
||||
c15,0,27.5-4.2,37.5-12.8s15-20.8,15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102L228.8,462.5L228.8,462.5z M228.8,619h110.5
|
||||
c19,0,33.8-4.9,44.2-14.8c10.5-9.8,15.8-23.8,15.8-41.8c0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V619z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB |
|
|
@ -1,18 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 180 612 612" enable-background="new 0 180 612 612" xml:space="preserve">
|
||||
<g id="punchout" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
|
||||
<g>
|
||||
<path fill="#FFFFFF" d="M383.5,521.8c-10.5-9.5-25.2-14.2-44.2-14.2H228.8V619h110.5c19,0,33.8-4.9,44.2-14.8
|
||||
c10.5-9.8,15.8-23.8,15.8-41.8C399.2,544.8,394,531.2,383.5,521.8z"/>
|
||||
<path fill="#FFFFFF" d="M368.2,449.8c10-8.5,15-20.8,15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.5h102
|
||||
C345.7,462.5,358.2,458.2,368.2,449.8z"/>
|
||||
<path fill="#FFFFFF" d="M510,180H102C45.9,180,0,225.9,0,282v408c0,56.1,45.9,102,102,102h408c56.1,0,102-45.9,102-102V282
|
||||
C612,225.9,566.1,180,510,180z M454.2,609.8c-5,12.2-12.8,22.7-23.5,31.5s-24.3,15.8-41,21s-36.5,7.8-59.5,7.8h-164V313h173.5
|
||||
c32,0,57.7,7.3,77,22s29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2
|
||||
c11.3,16.2,17,36.4,17,60.8C461.7,584.5,459.2,597.6,454.2,609.8z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
|
|
@ -1,17 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve">
|
||||
<g id="solid" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
|
||||
<path id="bg" fill="#563D7C" d="M612,510c0,56.1-45.9,102-102,102H102C45.9,612,0,566.1,0,510V102C0,45.9,45.9,0,102,0h408
|
||||
c56.1,0,102,45.9,102,102V510z"/>
|
||||
<g id="B" enable-background="new ">
|
||||
<path fill="#FFFFFF" d="M166.3,133h173.5c32,0,57.7,7.3,77,22s29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
|
||||
c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
|
||||
c-5,12.2-12.8,22.7-23.5,31.5s-24.3,15.8-41,21s-36.5,7.8-59.5,7.8h-164L166.3,133L166.3,133z M228.8,282.5h102
|
||||
c15,0,27.5-4.2,37.5-12.8s15-20.8,15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102L228.8,282.5L228.8,282.5z M228.8,439h110.5
|
||||
c19,0,33.8-4.9,44.2-14.8c10.5-9.8,15.8-23.8,15.8-41.8c0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
|
|
@ -27,12 +27,51 @@ class Application {
|
|||
}
|
||||
|
||||
displayTypographyProperties() {
|
||||
Style.displayFontSizeWeightColor('.bd-example-type td > *:not(.type-info)', ($element) => {
|
||||
return $element.closest('tr').find('td.type-info')
|
||||
})
|
||||
// headers
|
||||
Style.displayFontSizeWeightColor($('.bd-example-type td > *:not(.type-info)'), ($element, $text) => {
|
||||
let $target = $element.closest('tr').find('td.type-info')
|
||||
$target.text('')
|
||||
$target.append($text)
|
||||
}, false, true)
|
||||
|
||||
|
||||
// display headings
|
||||
Style.displayFontSizeWeightColor($('h2#display-headings').next().next().find('h1'), ($element, $text) => {
|
||||
let $tr = $element.closest('tr')
|
||||
let $td = $(`<td class="type-info">`)
|
||||
$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 = $(`<div class='row'></div>`)
|
||||
$parent.append($row)
|
||||
|
||||
let $col = $(`<div class='col-sm-9'></div>`)
|
||||
$col.append($p)
|
||||
$row.append($col)
|
||||
|
||||
$col = $(`<div class='col-sm-3'></div>`)
|
||||
$col.append($text)
|
||||
$row.append($col)
|
||||
}, false, true)
|
||||
}
|
||||
|
||||
clipboard() {
|
||||
initializeClipboard() {
|
||||
// Insert copy to clipboard button before .highlight
|
||||
$('.highlight').each(function () {
|
||||
let btnHtml = '<div class="bd-clipboard"><span class="btn-clipboard" title="Copy to clipboard">Copy</span></div>'
|
||||
|
|
@ -73,7 +112,7 @@ class Application {
|
|||
$(() => {
|
||||
let app = new Application()
|
||||
app.displayTypographyProperties()
|
||||
app.clipboard()
|
||||
app.initializeClipboard()
|
||||
// $.bootstrapMaterialDesign()
|
||||
|
||||
$('body').bootstrapMaterialDesign()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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 += `<mark style='font-size: 10px; font-weight: normal; letter-spacing: normal'>`
|
||||
text += `<mark style='font-size: 10px; font-weight: 500; letter-spacing: normal'>`
|
||||
}
|
||||
|
||||
// text += `${$element.css('font-size')} ${$element.css('font-weight')} ${hexColor}`
|
||||
text += `<span>${$element.css('font-size')} ${$element.css('font-weight')} <small style='white-space: nowrap'>${rgbaColor}</small></span>`
|
||||
text += `<span>${$element.css('font-size')} ${$element.css('font-weight')} <span style='white-space: nowrap'>${rgbaColor}</span></span>`
|
||||
if (bg) {
|
||||
// text += ` bg: ${hexBgColor} `
|
||||
text += ` bg: ${rgbaBgColor} `
|
||||
|
|
@ -53,8 +54,7 @@ const Style = (($) => {
|
|||
text += `</mark>`
|
||||
}
|
||||
|
||||
$target.text('')
|
||||
$target.append($(text))
|
||||
writeFn($element, $(text))
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
8
docs/assets/scss/mdb/_booticon.scss
Normal file
8
docs/assets/scss/mdb/_booticon.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
//
|
||||
// "MDB" icon
|
||||
//
|
||||
|
||||
.bd-booticon {
|
||||
width: 16rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -31,11 +31,9 @@ title: Material Design for Bootstrap, the world's most popular mobile-first and
|
|||
<div class="col-sm-6 m-b-lg">
|
||||
<h4>Material Design for Bootstrap CDN</h4>
|
||||
<p>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.</p>
|
||||
{% highlight html %}
|
||||
<link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
|
||||
<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
|
||||
{% endhighlight %}
|
||||
<p class="text-muted">Not yet available, but hopefully soon!</p>
|
||||
<p>
|
||||
<a class="btn btn-bs btn-outline" href="{{ site.baseurl }}/getting-started/introduction">See Getting Started</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "bootstrap-material-design",
|
||||
"description": "Material Design for Bootstrap 4",
|
||||
"version": "4.0.0-alpha",
|
||||
"version": "4.0.0-prealpha",
|
||||
"keywords": [
|
||||
"material",
|
||||
"design",
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ $mdb-font-weight-base: 400;
|
|||
$icon-color: rgba(0, 0, 0, 0.5) !default;
|
||||
|
||||
|
||||
// redefine ? TODO: do we need this mdb variant?
|
||||
// redefine ? TODO: do we need this mdb variant? This is used as $body-color
|
||||
$gray-dark: $mdb-text-color-primary;
|
||||
|
||||
//---
|
||||
|
|
|
|||
|
|
@ -2,5 +2,5 @@
|
|||
//
|
||||
// Settings for the `<body>` element.
|
||||
|
||||
$body-bg: #EEEEEE !default;
|
||||
$body-bg: #fafafa !default;
|
||||
//$body-color: $gray-dark !default;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user