mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-11-04 09:57:36 +03:00
Switch examples to .html extensions to get syntax highlighting in editor
This commit is contained in:
Kevin Ross
parent
089109b5a2
commit
d54249d778
21
Gruntfile.js
21
Gruntfile.js
|
|
@ -395,24 +395,21 @@ module.exports = function (grunt) {
|
|||
},
|
||||
|
||||
watch: {
|
||||
src: {
|
||||
files: '<%= jscs.core.src %>',
|
||||
tasks: ['babel:core', 'babel:docs'] // only watch/gen local non-minified sources (quicker)
|
||||
corejs: {
|
||||
files: 'js/src/*.js',
|
||||
tasks: ['dist-js']
|
||||
},
|
||||
|
||||
docsjs: {
|
||||
files: ['docs/assets/js/src/*.js'],
|
||||
tasks: ['babel:docs']
|
||||
tasks: ['docs-js']
|
||||
},
|
||||
core: {
|
||||
files: 'scss/**/*.scss',
|
||||
tasks: ['dist-css']
|
||||
},
|
||||
|
||||
// FIXME: restore this after getting fundamentals done, just trying to reduce churn while developing
|
||||
//sass: {
|
||||
// files: 'scss/**/*.scss',
|
||||
// tasks: ['dist-css', 'docs']
|
||||
//},
|
||||
docs: { // watch both the source and docs scss
|
||||
files: ['docs/assets/scss/**/*.scss', 'scss/**/*.scss'],
|
||||
tasks: ['scsslint:docs', 'sass:docs', 'postcss:docs'] //FIXME: docs-css yanks sourcemap from local docs.css, working around just doing the minimal compile here ['docs-css'] //['dist-css', 'docs']
|
||||
tasks: ['scsslint:docs', 'sass:docs', 'postcss:docs']
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ group: material-design
|
|||
</div-->
|
||||
<div class="navbar navbar-light bg-faded navbar-static-top">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<i class="material-icons">menu</i>
|
||||
</button>
|
||||
|
||||
117
docs/examples/drawer/drawer.scss
Normal file
117
docs/examples/drawer/drawer.scss
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
---
|
||||
---
|
||||
|
||||
body {
|
||||
/* Show it's not fixed to the top */
|
||||
min-height: 75rem;
|
||||
padding-top: 6rem;
|
||||
}
|
||||
|
||||
//
|
||||
///*
|
||||
// * Base structure
|
||||
// */
|
||||
//
|
||||
///* Move down content because we have a fixed navbar that is 50px tall */
|
||||
//body {
|
||||
// padding-top: 50px;
|
||||
//}
|
||||
//
|
||||
//
|
||||
///*
|
||||
// * Global add-ons
|
||||
// */
|
||||
//
|
||||
//.sub-header {
|
||||
// padding-bottom: 10px;
|
||||
// border-bottom: 1px solid #eee;
|
||||
//}
|
||||
//
|
||||
///*
|
||||
// * Top navigation
|
||||
// * Hide default border to remove 1px line.
|
||||
// */
|
||||
//.navbar-fixed-top {
|
||||
// border: 0;
|
||||
//}
|
||||
//
|
||||
///*
|
||||
// * Sidebar
|
||||
// */
|
||||
//
|
||||
///* Hide for mobile, show later */
|
||||
//.sidebar {
|
||||
// display: none;
|
||||
//}
|
||||
//@media (min-width: 768px) {
|
||||
// .sidebar {
|
||||
// position: fixed;
|
||||
// top: 51px;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// z-index: 1000;
|
||||
// display: block;
|
||||
// padding: 20px;
|
||||
// overflow-x: hidden;
|
||||
// overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
|
||||
// background-color: #f5f5f5;
|
||||
// border-right: 1px solid #eee;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
///* Sidebar navigation */
|
||||
//.nav-sidebar {
|
||||
// margin-right: -21px; /* 20px padding + 1px border */
|
||||
// margin-bottom: 20px;
|
||||
// margin-left: -20px;
|
||||
//}
|
||||
//.nav-sidebar > li > a {
|
||||
// padding-right: 20px;
|
||||
// padding-left: 20px;
|
||||
//}
|
||||
//.nav-sidebar > .active > a {
|
||||
// &,
|
||||
// &:hover,
|
||||
// &:focus {
|
||||
// color: #fff;
|
||||
// background-color: #428bca;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//
|
||||
///*
|
||||
// * Main content
|
||||
// */
|
||||
//
|
||||
//.main {
|
||||
// padding: 20px;
|
||||
//}
|
||||
//@media (min-width: 768px) {
|
||||
// .main {
|
||||
// padding-right: 40px;
|
||||
// padding-left: 40px;
|
||||
// }
|
||||
//}
|
||||
//.main .page-header {
|
||||
// margin-top: 0;
|
||||
//}
|
||||
//
|
||||
//
|
||||
///*
|
||||
// * Placeholder dashboard ideas
|
||||
// */
|
||||
//
|
||||
//.placeholders {
|
||||
// margin-bottom: 30px;
|
||||
// text-align: center;
|
||||
//}
|
||||
//.placeholders h4 {
|
||||
// margin-bottom: 0;
|
||||
//}
|
||||
//.placeholder {
|
||||
// margin-bottom: 20px;
|
||||
//}
|
||||
//.placeholder img {
|
||||
// display: inline-block;
|
||||
// border-radius: 50%;
|
||||
//}
|
||||
48
docs/examples/drawer/index.html
Normal file
48
docs/examples/drawer/index.html
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
---
|
||||
layout: example
|
||||
title: Drawer Template
|
||||
group: material-design
|
||||
---
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="drawer.css" rel="stylesheet">
|
||||
|
||||
<div class="pos-f-t">
|
||||
<!--div class="collapse" id="navbar-header">
|
||||
<div class="container-fluid bg-inverse p-a-1">
|
||||
<h3>Collapsed content</h3>
|
||||
<p>Toggleable via the navbar brand.</p>
|
||||
</div>
|
||||
</div-->
|
||||
<div class="navbar navbar-light bg-faded navbar-static-top">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<i class="material-icons">menu</i>
|
||||
</button>
|
||||
|
||||
<ul class="nav navbar-nav pull-xs-right">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">
|
||||
<i class="material-icons">search</i>
|
||||
</a>
|
||||
<!--form class="form-inline pull-xs-right">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form-->
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="jumbotron">
|
||||
<h1>Navbar example</h1>
|
||||
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p>
|
||||
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -24,12 +24,12 @@ group: material-design
|
|||
<div class="row row-offcanvas row-offcanvas-right">
|
||||
|
||||
<div class="col-xs-12 col-sm-9">
|
||||
<p class="pull-xs-right hidden-sm-up">
|
||||
<p class="pull-xs-right">
|
||||
<button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
|
||||
</p>
|
||||
<div class="jumbotron">
|
||||
<div class="alert alert-danger">Not sure this will be useful</div>
|
||||
<h1>Hello, world!</h1>
|
||||
<p>This doesn't seem very as-is because the main content never uses all the space when shrunk. It also pushes content instead of overlaying, like you might want with a drawer.</p>
|
||||
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
@ -37,51 +37,30 @@ group: material-design
|
|||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!--/span-->
|
||||
</div>
|
||||
<div class="col-xs-6 col-lg-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!--/span-->
|
||||
</div>
|
||||
<div class="col-xs-6 col-lg-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!--/span-->
|
||||
<div class="col-xs-6 col-lg-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!--/span-->
|
||||
<div class="col-xs-6 col-lg-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!--/span-->
|
||||
<div class="col-xs-6 col-lg-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
</div><!--/span-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
|
||||
<div class="list-group">
|
||||
<a href="#" class="list-group-item active">Link</a>
|
||||
<a href="#" class="list-group-item">Link</a>
|
||||
<a href="#" class="list-group-item">Link</a>
|
||||
<a href="#" class="list-group-item">Link</a>
|
||||
<a href="#" class="list-group-item">Link</a>
|
||||
<a href="#" class="list-group-item">Link</a>
|
||||
<a href="#" class="list-group-item">Link</a>
|
||||
<a href="#" class="list-group-item">Link</a>
|
||||
<a href="#" class="list-group-item">Link</a>
|
||||
<a href="#" class="list-group-item">Link</a>
|
||||
<a href="#" class="list-group-item">Link</a>
|
||||
</div>
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<footer>
|
||||
|
|
@ -1,3 +1,6 @@
|
|||
---
|
||||
---
|
||||
|
||||
/*
|
||||
* Style tweaks
|
||||
* -------
|
||||
|
|
|
|||
12
docs/examples/starter-template/index.html
Normal file
12
docs/examples/starter-template/index.html
Normal 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>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
---
|
||||
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>
|
||||
Loading…
Reference in New Issue
Block a user