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

wip #803 examples section in the docs

Browse Source
This commit is contained in:
Kevin Ross 2016-01-05 15:24:50 -06:00
parent 6e03725f44
commit a4473d8a00
14 changed files with 100 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
Gruntfile.js
View File

@ -73,7 +73,7 @@ module.exports = function (grunt) {
'dist-css': 'dist/css',
'dist-js': 'dist/js',
'docs-dist-js': 'docs/dist/js',
'docs-dist-css': 'docs/dist/css',
'docs-dist-css': 'docs/dist/css'
},
eslint: {
@ -263,6 +263,15 @@ module.exports = function (grunt) {
},
copy: {
'dist-to-docs': { // for example templates
expand: true,
cwd: 'dist',
src: [
'js/*.iife*',
'css/*.*'
],
dest: 'docs/dist/'
},
'bs-docs-js-vendor': {
expand: true,
cwd: '../bootstrap/docs/assets/js/vendor',
@ -276,9 +285,7 @@ module.exports = function (grunt) {
'bs-docs-plugins': {
expand: true,
cwd: '../bootstrap/docs/_plugins',
src: [
'**/*', '!bridge.rb'
],
src: ['**/*', '!bridge.rb'],
dest: 'docs/_plugins/'
},
@ -346,20 +353,6 @@ module.exports = function (grunt) {
'**/*'
],
dest: 'docs/content/'
},
'bs-docs-examples': {
options: {
// //https://regex101.com/r/cZ7aO8/2
process: function (content, srcpath) {
return content.replace(/(---[\s\S]+?---)([\s\S]+)/mg, referenceDocNotice);
}
},
expand: true,
cwd: '../bootstrap/docs/examples',
src: [
'**/*'
],
dest: 'docs/examples/'
}
},
@ -608,7 +601,6 @@ module.exports = function (grunt) {
'copy:bs-docs-getting-started',
'copy:bs-docs-components',
'copy:bs-docs-content',
'copy:bs-docs-examples',
'copy:bs-docs-plugins'
]);

19
docs/_includes/footer-example.html Normal file
View File

@ -0,0 +1,19 @@
<script src="{{ site.data.cdn.jquery }}"></script>
<script src="{{ site.data.cdn.tether }}"></script>
<script src="{{ site.data.cdn.bootstrap }}"></script>
{% if site.data.minified %}
<script src="{{ site.baseurl }}/dist/js/bootstrap-material-design.iife.min.js"></script>
{% else %}
<script src="{{ site.baseurl }}/dist/js/bootstrap-material-design.iife.js"></script>
{% endif %}
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="{{ site.baseurl }}/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="{{ site.baseurl }}/assets/js/ie-emulation-modes-warning.js"></script>
<script>
$(function() {
$('body').bootstrapMaterialDesign()
});
</script>

12
docs/_includes/header-example.html Normal file
View File

@ -0,0 +1,12 @@
{% include meta.html %}
<!-- Material Design fonts -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Material Design for Bootstrap generic -->
{% if site.data.minified %}
<link href="{{ site.baseurl }}/dist/css/bootstrap-material-design.min.css" rel="stylesheet">
{% else %}
<link href="{{ site.baseurl }}/dist/css/bootstrap-material-design.css" rel="stylesheet">
{% endif %}

15
docs/_includes/header.html
View File

@ -1,17 +1,4 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Material Design for Bootstrap">
<meta name="keywords" content="Material Design for Bootstrap, Sass">
<meta name="author" content="Federico Zivolo, Kevin Ross, and Bootstrap Material Design contributors">
<title>
{% if page.layout == "home" %}
{{ page.title }}
{% else %}
{{ page.title }} &middot; Bootstrap Material Design
{% endif %}
</title>
{% include meta.html %}
<!-- Material Design fonts -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700">

14
docs/_includes/meta.html Normal file
View File

@ -0,0 +1,14 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Material Design for Bootstrap">
<meta name="keywords" content="Material Design for Bootstrap, Sass">
<meta name="author" content="Federico Zivolo, Kevin Ross, and Bootstrap Material Design contributors">
<title>
{% if page.layout == "home" %}
{{ page.title }}
{% else %}
{{ page.title }} &middot; Bootstrap Material Design
{% endif %}
</title>

11
docs/_layouts/example.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
{% include header-example.html %}
</head>
<body>
{{ content }}
{% include footer-example.html %}
</body>
</html>

28
docs/examples/index.md
View File

@ -3,31 +3,29 @@ layout: simple
title: Examples
---
[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
{% callout info %}
**Bootstrap Reference Documentation**
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
{% endcallout %}
[Download the Bootstrap source code]({{ site.download.source }}) to snag these examples.
## Framework
Examples that focus on implementing uses of built-in components provided by Bootstrap.
<div class="row bd-examples">
<div class="card card-block col-xs-6 col-md-4">
<h4 class="card-title">Starter Template</h4>
<p class="card-text">Nothing but the basics: compiled CSS and JavaScript.</p>
<!--a href="{{ site.baseurl }}/examples/starter-template/" class="card-link"><i class="material-icons">launch</i></a-->
<a href="{{ site.baseurl }}/examples/starter-template/" class="btn btn-primary"><i class="material-icons">launch</i> Launch</a>
</div>
<!--
<div class="col-xs-6 col-md-4">
<a href="{{ site.baseurl }}/examples/starter-template/">
<img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/starter-template.jpg" alt="">
<h4>Starter template</h4>
<p>Nothing but the basics: compiled CSS and JavaScript.</p>
</a>
<h4>Starter template</h4>
<p>Nothing but the basics: compiled CSS and JavaScript.</p>
</div>
-->
<div class="col-xs-6 col-md-4">
<a href="{{ site.baseurl }}/examples/grid/">
<img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/grid.jpg" alt="">

BIN
docs/examples/screenshots/blog.jpg
View File

Binary file not shown.

BIN
docs/examples/screenshots/equal-height-columns.jpg
View File

Binary file not shown.

BIN
docs/examples/screenshots/offcanvas.jpg
View File

Binary file not shown.

58
docs/examples/starter-template/index.html
View File

@ -1,58 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<a class="navbar-brand" href="#">Project name</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</nav>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

12
docs/examples/starter-template/index.md Normal file
View File

@ -0,0 +1,12 @@
---
layout: example
title: Starter Template
group: material-design
---
<div class="container">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>

7
docs/examples/starter-template/starter-template.css
View File

@ -1,7 +0,0 @@
body {
padding-top: 5rem;
}
.starter-template {
padding: 3rem 1.5rem;
text-align: center;
}

7
docs/examples/test/index.md Normal file
View File

@ -0,0 +1,7 @@
---
layout: example
title: Test
group: material-design
---
<button type="button" class="btn btn-primary">Primary</button>