mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-10-31 07:57:45 +03:00
docs: improvements
This commit is contained in:
FezVrasta
parent
82b85f1967
commit
f5deec0124
BIN
.jekyll-metadata
BIN
.jekyll-metadata
Binary file not shown.
|
|
@ -42,14 +42,14 @@ download:
|
|||
|
||||
blog: https://blog.getbootstrap.com
|
||||
expo: https://expo.getbootstrap.com
|
||||
themes: https://themes.getbootstrap.com
|
||||
jobs: https://jobs.getbootstrap.com
|
||||
mkp: https://www.creative-tim.com/product/material-kit-pro?affiliate_id=87385
|
||||
mdp: https://www.creative-tim.com/product/material-dashboard-pro?affiliate_id=87385
|
||||
|
||||
cdn:
|
||||
# See https://www.srihash.org for info on how to generate the hashes
|
||||
css: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css
|
||||
css: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap-material-design.min.css
|
||||
css_hash: "sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
|
||||
js: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js
|
||||
js: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap-material-design.min.js
|
||||
js_hash: "sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
|
||||
jquery: https://code.jquery.com/jquery-3.2.1.slim.min.js
|
||||
jquery_hash: "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
|
||||
|
|
|
|||
|
|
@ -15,16 +15,10 @@
|
|||
<a class="nav-link {% if page.title == "Examples" %}active{% endif %}" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ site.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
<a class="nav-link" href="{{ site.mdp }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Dashboard Pro');" target="_blank" rel="noopener">Material Dashboard</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ site.jobs }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Jobs');" target="_blank" rel="noopener">Jobs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
<a class="nav-link" href="{{ site.mkp }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Kit Pro');" target="_blank" rel="noopener">Material Kit</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<script src="{{ site.baseurl }}/assets/js/vendor/popper.min.js"></script>
|
||||
|
||||
{% if site.github %}
|
||||
<script src="{{ site.baseurl }}/dist/js/bootstrap.min.js"></script>
|
||||
<script src="{{ site.baseurl }}/dist/js/bootstrap-material-design.min.js"></script>
|
||||
{% else %}
|
||||
<script src="{{ site.baseurl }}/dist/js/bootstrap-material-design.js"></script>
|
||||
{% endif %}
|
||||
|
|
|
|||
1347
assets/css/docs.css
Normal file
1347
assets/css/docs.css
Normal file
File diff suppressed because it is too large
Load Diff
3
assets/css/docs.min.css
vendored
Executable file → Normal file
3
assets/css/docs.min.css
vendored
Executable file → Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
61
assets/img/MD4B.svg
Normal file
61
assets/img/MD4B.svg
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="475px" height="421px" viewBox="0 0 475 421" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 46.1 (44463) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Untitled</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<polygon id="path-1" points="171.285341 147.434439 436.724395 240.057155 303.714659 358.923161 38.2756053 266.300446"></polygon>
|
||||
<filter x="-14.8%" y="-16.5%" width="129.6%" height="155.8%" filterUnits="objectBoundingBox" id="filter-2">
|
||||
<feOffset dx="0" dy="14" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="14" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
|
||||
<feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
|
||||
<feGaussianBlur stdDeviation="5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.26 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<polygon id="path-3" points="171.009735 83.2812324 436.448789 173.674869 303.439054 289.680218 38 199.286582"></polygon>
|
||||
<filter x="-10.3%" y="-12.1%" width="120.6%" height="139.7%" filterUnits="objectBoundingBox" id="filter-4">
|
||||
<feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="10" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.106091486 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
|
||||
<feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
|
||||
<feGaussianBlur stdDeviation="3" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0918817935 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<polygon id="path-5" points="171.009735 6.84374714 436.448789 98.303243 303.439054 215.676448 38 124.216952"></polygon>
|
||||
<filter x="-4.1%" y="-5.0%" width="108.3%" height="115.8%" filterUnits="objectBoundingBox" id="filter-6">
|
||||
<feOffset dx="0" dy="3" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0767946105 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
|
||||
<feOffset dx="0" dy="3" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
|
||||
<feGaussianBlur stdDeviation="3" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.105383832 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Rectangle">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
|
||||
<use fill="#1A237E" fill-rule="evenodd" xlink:href="#path-1"></use>
|
||||
</g>
|
||||
<g id="Rectangle">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
|
||||
<use fill="#283593" fill-rule="evenodd" xlink:href="#path-3"></use>
|
||||
</g>
|
||||
<g id="Rectangle">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
|
||||
<use fill="#3F51B5" fill-rule="evenodd" xlink:href="#path-5"></use>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.6 KiB |
BIN
assets/img/mk-pro-banner.jpg
Normal file
BIN
assets/img/mk-pro-banner.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 286 KiB |
BIN
assets/img/mk-pro-banner.png
Normal file
BIN
assets/img/mk-pro-banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 913 KiB |
|
|
@ -73,4 +73,8 @@
|
|||
background-position: .4rem .6rem;
|
||||
background-size: .75rem .75rem;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
// Local docs variables
|
||||
$brand-primary: #3F51B5;
|
||||
$bd-purple: #3F51B5;
|
||||
$bd-purple-bright: red; // lighten(saturate($bd-purple, 5%), 15%);
|
||||
$bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%);
|
||||
$bd-purple-light: #cdbfe3;
|
||||
$bd-purple-lightest: #f5f2f9;
|
||||
$bd-graphite: #2a2730;
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
// Load Bootstrap variables and mixins
|
||||
@import "../../scss/functions";
|
||||
@import "../../scss/variables";
|
||||
@import "bootstrap/scss/mixins";
|
||||
@import "../../scss/mixins";
|
||||
|
||||
// Load docs components
|
||||
|
|
|
|||
47
index.html
47
index.html
|
|
@ -4,21 +4,26 @@ layout: home
|
|||
|
||||
<main class="bd-masthead" id="content" role="main">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-12 mx-auto col-md-12">
|
||||
<h1 class="mb-3 bd-text-purple-bright text-center">Material Design for Bootstrap</h1>
|
||||
<br /><br />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-6 mx-auto col-md-6 order-md-2">
|
||||
<img src="{{ site.baseurl }}/assets/img/bootstrap-stack.png" alt="" class="img-fluid mb-3 mb-md-0">
|
||||
<img src="{{ site.baseurl }}/assets/img/MD4B.svg" alt="" class="img-fluid mb-3 mb-md-0">
|
||||
</div>
|
||||
<div class="col-md-6 order-md-1 text-center text-md-left pr-md-5">
|
||||
<h1 class="mb-3 bd-text-purple-bright">Bootstrap<br />Material Design</h1>
|
||||
<p class="lead">
|
||||
Build responsive, mobile-first projects on the web with the world's most popular front-end component library.
|
||||
Build responsive, mobile-first projects on the web with the world's most popular Material Design front-end component library.
|
||||
</p>
|
||||
<p class="lead mb-4">
|
||||
Bootstrap Material Design is an open source toolkit based on Bootstrap for developing Material Design apps with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
|
||||
Material Design for Bootstrap is an open source toolkit based on Bootstrap for developing Material Design apps with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
|
||||
</p>
|
||||
<div class="d-flex flex-column flex-md-row lead mb-3">
|
||||
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/" class="btn btn-lg btn-bd-purple mb-3 mb-md-0 mr-md-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">Get started</a>
|
||||
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/" class="btn btn-lg btn-outline-secondary" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download</a>
|
||||
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/" class="btn btn-lg btn-primary" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">Get started</a>
|
||||
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/" class="btn btn-lg btn-secondary" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download</a>
|
||||
</div>
|
||||
<p class="text-muted mb-0">
|
||||
Currently v{{ site.current_version }}
|
||||
|
|
@ -30,28 +35,28 @@ layout: home
|
|||
</main>
|
||||
|
||||
<div class="masthead-followup row m-0 border border-white">
|
||||
<div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
|
||||
<div class="col-12 col-md-6 p-3 p-md-5 bg-light border border-white">
|
||||
<!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
|
||||
{% include icons/import.svg width="32" height="32" class="text-primary mb-2" %}
|
||||
<h3>Installation</h3>
|
||||
<p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our build system and readme.</p>
|
||||
|
||||
{% highlight sh %}
|
||||
npm install bootstrap@{{ site.current_version }}
|
||||
npm install bootstrap-material-design@{{ site.current_version }}
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight sh %}
|
||||
gem install bootstrap -v 4.0.0.beta
|
||||
gem install bootstrap-material-design -v 4.0.0.beta
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight sh %}
|
||||
bower install bootstrap#v{{ site.current_version }}
|
||||
bower install bootstrap-material-design#v{{ site.current_version }}
|
||||
{% endhighlight %}
|
||||
<hr class="half-rule">
|
||||
<a class="btn btn-outline-primary" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download">Read installation docs</a>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
|
||||
<div class="col-12 col-md-6 p-3 p-md-5 bg-light border border-white">
|
||||
<!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
|
||||
{% include icons/download.svg width="32" height="32" class="text-primary mb-2" %}
|
||||
<h3>Bootstrap CDN</h3>
|
||||
|
|
@ -62,7 +67,7 @@ bower install bootstrap#v{{ site.current_version }}
|
|||
<link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
|
||||
{% endhighlight %}
|
||||
|
||||
<h5>JS, Popper, and jQuery</h5>
|
||||
<h5>JS, Popper.js, and jQuery</h5>
|
||||
{% highlight html %}
|
||||
<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
|
||||
<script src="{{ site.cdn.popper }}" integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"></script>
|
||||
|
|
@ -71,16 +76,20 @@ bower install bootstrap#v{{ site.current_version }}
|
|||
<hr class="half-rule">
|
||||
<a class="btn btn-outline-primary" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/layout/overview/">Explore the docs</a>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
|
||||
</div>
|
||||
<div class="masthead-followup row m-0 border border-white">
|
||||
<div class="col-12 col-md-12 p-3 p-md-5 bg-white border border-white text-center">
|
||||
<!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
|
||||
{% include icons/lightning.svg width="32" height="32" class="text-primary mb-2" %}
|
||||
<h3>Official Themes</h3>
|
||||
<h3>Official Pro Kits</h3>
|
||||
<p>
|
||||
Take Bootstrap 4 to the next level with official premium themes—toolkits built on Bootstrap with new components and plugins, docs, and build tools.
|
||||
Take Material Design for Bootstrap 4 to the next level with official Material Kit Pro and Material Dashboard Pro.
|
||||
</p>
|
||||
<img class="img-fluid mt-3 mx-auto" src="{{ site.baseurl }}/assets/img/bootstrap-themes.png" alt="Bootstrap Themes" width="1024" height="388">
|
||||
<hr class="half-rule">
|
||||
<a href="{{ site.themes }}" class="btn btn-outline-primary">Browse themes</a>
|
||||
<a href="{{ site.mkp }}">
|
||||
<img class="img-fluid mt-3 mx-auto" src="{{ site.baseurl }}/assets/img/mk-pro-banner.jpg" alt="Bootstrap Themes" width="1024" height="388">
|
||||
</a>
|
||||
<br /><br />
|
||||
<a href="{{ site.mkp }}" class="btn btn-outline-primary">Material Kit Pro</a>
|
||||
<a href="{{ site.mdp }}" class="btn btn-outline-primary">Material Dashboard Pro</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
"scripts": {
|
||||
"docs-compile": "bundle exec jekyll build",
|
||||
"docs-serve": "bundle exec jekyll serve",
|
||||
"docs:assets": "node-sass --include-path node_modules assets/scss/docs.scss > assets/css/docs.css && cssnano assets/css/docs.css assets/css/docs.min.css",
|
||||
"prepare": "npm run build",
|
||||
"build": "npm run build:js && npm run build:css",
|
||||
"build:js": "rollup js/index.js --output=dist/js/bootstrap-material-design.js -m --config=rollup.config.js && npm run build:js-min",
|
||||
|
|
|
|||
|
|
@ -1,34 +1,34 @@
|
|||
//// case where behavior is responsive, or with a marker class
|
||||
//@mixin media-breakpoint-down-or($breakpoint, $name) {
|
||||
// #{unquote($name)} {
|
||||
// @content
|
||||
// }
|
||||
// case where behavior is responsive, or with a marker class
|
||||
@mixin media-breakpoint-down-or($breakpoint, $name) {
|
||||
#{unquote($name)} {
|
||||
@content;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// case where behavior is responsive, or with a marker class
|
||||
@mixin media-breakpoint-up-or($breakpoint, $name) {
|
||||
#{unquote($name)} {
|
||||
@content;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Name of the previous breakpoint, or null
|
||||
//
|
||||
// @include media-breakpoint-down($breakpoint) {
|
||||
// @content
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//// case where behavior is responsive, or with a marker class
|
||||
//@mixin media-breakpoint-up-or($breakpoint, $name) {
|
||||
// #{unquote($name)} {
|
||||
// @content
|
||||
// }
|
||||
//
|
||||
// @include media-breakpoint-up($breakpoint) {
|
||||
// @content
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//// Name of the previous breakpoint, or null
|
||||
////
|
||||
//// >> breakpoint-next(sm)
|
||||
//// xs
|
||||
//// >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px))
|
||||
//// xs
|
||||
//// >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
|
||||
//// xs
|
||||
//@function breakpoint-previous($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
||||
// $n: index($breakpoint-names, $name);
|
||||
// @return if($n > 1, nth($breakpoint-names, $n - 1), null);
|
||||
//}
|
||||
// >> breakpoint-next(sm)
|
||||
// xs
|
||||
// >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px))
|
||||
// xs
|
||||
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
|
||||
// xs
|
||||
@function breakpoint-previous($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
||||
$n: index($breakpoint-names, $name);
|
||||
@return if($n > 1, nth($breakpoint-names, $n - 1), null);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user