diff --git a/Gruntfile.js b/Gruntfile.js index 21cdf87d..ec125f06 100644 --- a/Gruntfile.js +++ b/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'] } }, diff --git a/docs/examples/dashboard-bs4/index.md b/docs/examples/dashboard-bs4/index.html similarity index 100% rename from docs/examples/dashboard-bs4/index.md rename to docs/examples/dashboard-bs4/index.html diff --git a/docs/examples/dashboard/index.md b/docs/examples/dashboard/index.html similarity index 96% rename from docs/examples/dashboard/index.md rename to docs/examples/dashboard/index.html index af2d313d..6bd5146e 100644 --- a/docs/examples/dashboard/index.md +++ b/docs/examples/dashboard/index.html @@ -17,6 +17,7 @@ group: material-design
diff --git a/docs/examples/drawer/drawer.scss b/docs/examples/drawer/drawer.scss new file mode 100644 index 00000000..ae09f045 --- /dev/null +++ b/docs/examples/drawer/drawer.scss @@ -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%; +//} diff --git a/docs/examples/drawer/index.html b/docs/examples/drawer/index.html new file mode 100644 index 00000000..d50f07aa --- /dev/null +++ b/docs/examples/drawer/index.html @@ -0,0 +1,48 @@ +--- +layout: example +title: Drawer Template +group: material-design +--- + + + + +
+ +
+ + + +
+
+ +
+
+

Navbar example

+

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.

+ View navbar docs » +
+
diff --git a/docs/examples/offcanvas/index.md b/docs/examples/offcanvas/index.html similarity index 61% rename from docs/examples/offcanvas/index.md rename to docs/examples/offcanvas/index.html index 35d2fd38..17bb8073 100644 --- a/docs/examples/offcanvas/index.md +++ b/docs/examples/offcanvas/index.html @@ -24,12 +24,12 @@ group: material-design
-

+

-
Not sure this will be useful

Hello, world!

+

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.

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.

@@ -37,51 +37,30 @@ group: material-design

Heading

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.

View details »

-
+

Heading

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.

View details »

-
+

Heading

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.

View details »

-
-
-

Heading

-

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.

-

View details »

-
-
-

Heading

-

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.

-

View details »

-
-
-

Heading

-

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.

-

View details »

-
-
- - + + + + - - + + +