google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Templating the URL prefix of the Hosted libs 

Add MD font to getting tarted guide snippets
master
Nicolas Garnier 2015-06-24 15:57:57 +01:00
parent f79861f0c6
commit 6577c697a7
4 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_assets/main.css
View File

@ -522,7 +522,7 @@ body:not(.about) .docs-special .download > button {
.docs-layout pre {
padding: 16px;
padding-right: 65px;
font-size: 12px;
font-size: 87%;
word-wrap: break-word;
}
.docs-layout code:before,

2
docs/_templates/embedded_customizer.html vendored
View File

@ -80,7 +80,7 @@
</div>
</div>
<div class="mdl-gen__cdn mdl-cell mdl-cell--12-col">
<pre class="demo-code language-markup"><code class="language-markup" data-language="markup"> &lt;link rel="stylehsheet" href="http://getmdl.io/1.0.0/material.$primary-$accent.min.css" /&gt; </code></pre>
<pre class="demo-code language-markup"><code class="language-markup" data-language="markup"> &lt;link rel="stylehsheet" href="$$hosted_libs_prefix$$/$$version$$/material.$primary-$accent.min.css" /&gt; </code></pre>
</div>
</div>
<script src="{{page.include_prefix}}assets/customizer.js"></script>

30
docs/_templates/started.html vendored
View File

@ -34,9 +34,9 @@
<div class="mdl-tabs__panel is-active" id="tab1">
<div class="code-with-text">
Just add the following <code>&lt;link&gt;</code> and <code>&lt;script&gt;</code> elements into your HTML pages:
<pre class="language-markup"><code>&lt;link rel="stylesheet" href="https://storage.googleapis.com/materialdesignlite/$$version$$/material.indigo-pink.min.css"&gt;
&lt;script src="https://storage.googleapis.com/materialdesignlite/$$version$$/material.min.js"&gt;
&lt;/script&gt;</code></pre>
<pre class="language-markup"><code>&lt;link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"&gt;
&lt;link rel="stylesheet" href="$$hosted_libs_prefix$$/$$version$$/material.indigo-pink.min.css"&gt;
&lt;script src="$$hosted_libs_prefix$$/$$version$$/material.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
<h4>Choose color scheme</h4>
<p>
@ -48,8 +48,9 @@
Use the <a href="../customize">Customize and Preview tool</a> to select and preview primary and accent colors combinations for your site. Then download the Material Design Lite files using the button. The zip file downloaded should contain a CSS and a JS file.
</p>
<div class="code-with-text">
Refer to these files by adding a <code>&lt;link&gt;</code> and a <code>&lt;script&gt;</code> element into your HTML pages:
<pre class="language-markup"><code>&lt;link rel="stylesheet" href="./material.min.css"&gt;
Refer to these files by adding a <code>&lt;link&gt;</code> and a <code>&lt;script&gt;</code> elements into your HTML pages and also include the Material Icon font:
<pre class="language-markup"><code>&lt;link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"&gt;
&lt;link rel="stylesheet" href="./material.min.css"&gt;
&lt;script src="./material.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
@ -71,8 +72,9 @@ gulp</code></pre>
<p>You'll find the Material Design Lite library's file in the <code>dist</code> folder. Copy them to your project.
</p>
<div class="code-with-text">
Refer to these files by adding a <code>&lt;link&gt;</code> and a <code>&lt;script&gt;</code> element into your HTML pages:
<pre class="language-markup"><code>&lt;link rel="stylesheet" href="./material.min.css"&gt;
Refer to these files by adding a <code>&lt;link&gt;</code> and a <code>&lt;script&gt;</code> element into your HTML pages and also include the Material Icon font:
<pre class="language-markup"><code>&lt;link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"&gt;
&lt;link rel="stylesheet" href="./material.min.css"&gt;
&lt;script src="./material.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
<div class="caption">
@ -94,9 +96,10 @@ gulp</code></pre>
This will install the Material Design Lite library files in your project's <code>node_modules</code> folder.
</p>
<div class="code-with-text">
Refer to these files by adding a <code>&lt;link&gt;</code> and a <code>&lt;script&gt;</code> element into your HTML pages:
<pre class="language-markup"><code>&lt;link rel="stylesheet" href="/node_modules/material-design-lite//material.min.css"&gt;
&lt;script src="/node_modules/material-design-lite//material.min.js"&gt;&lt;/script&gt;</code></pre>
Refer to these files by adding a <code>&lt;link&gt;</code> and a <code>&lt;script&gt;</code> element into your HTML pages and also include the Material Icon font:
<pre class="language-markup"><code>&lt;link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"&gt;
&lt;link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css"&gt;
&lt;script src="/node_modules/material-design-lite/material.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
<div class="caption">
<h4>
@ -117,9 +120,10 @@ gulp</code></pre>
This will install the Material Design Lite library files in your project's <code>node_modules</code> folder.
</p>
<div class="code-with-text">
Refer to these files by adding a <code>&lt;link&gt;</code> and a <code>&lt;script&gt;</code> element into your HTML pages:
<pre class="language-markup"><code>&lt;link rel="stylesheet" href="/node_modules/material-design-lite//material.min.css"&gt;
&lt;script src="/node_modules/material-design-lite//material.min.js"&gt;&lt;/script&gt;</code></pre>
Refer to these files by adding a <code>&lt;link&gt;</code> and a <code>&lt;script&gt;</code> element into your HTML pages and also include the Material Icon font:
<pre class="language-markup"><code>&lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"&gt;
&lt;link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css"&gt;
&lt;script src="/node_modules/material-design-lite/material.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
<div class="caption">
<h4>

2
gulpfile.js
View File

@ -30,6 +30,7 @@ var path = require('path');
var pkg = require('./package.json');
var through = require('through2');
var swig = require('swig');
var hostedLibsUrlPrefix = 'http://code.getmdl.io';
var bucket_prod = 'gs://www.getmdl.io';
var bucket_staging = 'gs://mdl-staging';
var banner = ['/**',
@ -368,6 +369,7 @@ gulp.task('pages', ['components'], function() {
.pipe($.marked())
.pipe(applyTemplate())
.pipe($.replace('$$version$$', pkg.version))
.pipe($.replace('$$hosted_libs_prefix$$', hostedLibsUrlPrefix))
/* Replacing code blocks class name to match Prism's. */
.pipe($.replace('class="lang-', 'class="language-'))
/* Translate html code blocks to "markup" because that's what Prism uses. */