-
-## Cross-device by default
-
-Develop with a single underlying system for your site that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, mouse, and keyboard are all first-class input methods.
-
-## Built with BEM & Sass
-
-Material Design Lite provides vanilla CSS. Our source utilises Sass, the popular CSS preprocessor and BEM - [the front-end naming methodology](https://github.com/google/material-design-lite/wiki/Understanding-BEM). Quickly get started with the pre-built CSS or build the source yourself.
-
-## Components
-
-With Material Design Lite, you get dozens of custom HTML and CSS components. They're documented, lightweight and bring the beauty of Material Design to content sites.
+
-
-
- 
-
- Material Design Lite
-
-
-
-
-
-
+
+
+{% endfor %}
+{% endblock %}
diff --git a/gulpfile.js b/gulpfile.js
index 7381411f..458fd041 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -245,14 +245,6 @@ gulp.task('test:visual', function() {
*/
var site = {};
-
-/**
- * Compiled swig templates cache.
- * @type {Object}
- */
-var templates = {};
-
-
/**
* Generates an HTML file based on a template and file metadata.
*/
@@ -263,14 +255,10 @@ function applyTemplate() {
page: file.page,
content: file.contents.toString()
};
- // If template not in template cache, compile and add it.
- if (!templates[file.page.layout]) {
- var templateFile = path.join(
- __dirname, 'docs', '_templates', file.page.layout + '.html');
- $.util.log('Compiling template:', $.util.colors.yellow(file.page.layout));
- templates[file.page.layout] = swig.compileFile(templateFile);
- }
- var tpl = templates[file.page.layout];
+
+ var templateFile = path.join(
+ __dirname, 'docs', '_templates', file.page.layout + '.html');
+ var tpl = swig.compileFile(templateFile, {cache: false});
file.contents = new Buffer(tpl(data), 'utf8');
this.push(file);
cb();
@@ -284,7 +272,7 @@ function applyTemplate() {
gulp.task('components', function() {
return gulp.src('./src/**/README.md', {base: './src'})
// Add basic front matter.
- .pipe($.header('---\nlayout: component\n---\n\n'))
+ .pipe($.header('---\nlayout: component\nbodyclass: components\n---\n\n'))
.pipe($.frontMatter({property: 'page', remove: true}))
.pipe($.marked())
.pipe((function () {
@@ -351,6 +339,10 @@ gulp.task('pages', ['components'], function() {
*/
gulp.task('assets', function () {
return gulp.src(['docs/_assets/**'])
+ .pipe($.if(/\.(svg|jpg|png)$/i, $.imagemin({
+ progressive: true,
+ interlaced: true
+ })))
.pipe(gulp.dest('docs/out/assets'));
});
@@ -358,7 +350,7 @@ gulp.task('assets', function () {
/**
* Serves the landing page from "out" directory.
*/
-gulp.task('serve', ['assets', 'pages', 'demos', 'templates'], function () {
+gulp.task('serve', ['scripts', 'styles', 'assets', 'pages', 'demos', 'templates'], function () {
browserSync({
notify: false,
server: {
@@ -375,6 +367,7 @@ gulp.task('serve', ['assets', 'pages', 'demos', 'templates'], function () {
gulp.watch(['src/**/*.html'], ['demos', reload]);
gulp.watch(['src/**/README.md'], ['components', reload]);
gulp.watch(['templates/**/*'], ['templates', reload]);
+ gulp.watch(['docs/**/*', '!docs/out/**/*'], ['pages', 'assets', reload]);
});
gulp.task('publish', ['default', 'templates', 'assets', 'pages', 'demos'], function() {
-
- Material Design Lite
-
-
-
-
-
- Material Design Lite
-
+
+
+
+ Download Kit
+
+
+
diff --git a/docs/_templates/templates.html b/docs/_templates/templates.html
new file mode 100644
index 00000000..e97b6078
--- /dev/null
+++ b/docs/_templates/templates.html
@@ -0,0 +1,27 @@
+{% extends 'layout.html' %}
+{% block content %}
+{% for template in page.templates %}
+
+
+ Material
Design
Lite + + -
- {% block content %}{% endblock %}
-
-
+
+
+ Design
Lite + + -
+ {% block content %}
+ {{content|safe}}
+ {% endblock %}
+
+
+
+