mirror of
https://github.com/google/material-design-lite.git
synced 2024-09-11 12:25:38 +03:00
Templating the URL prefix of the Hosted libs
Add MD font to getting tarted guide snippets
This commit is contained in:
parent
f79861f0c6
commit
6577c697a7
@ -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
2
docs/_templates/embedded_customizer.html
vendored
@ -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"> <link rel="stylehsheet" href="http://getmdl.io/1.0.0/material.$primary-$accent.min.css" /> </code></pre>
|
||||
<pre class="demo-code language-markup"><code class="language-markup" data-language="markup"> <link rel="stylehsheet" href="$$hosted_libs_prefix$$/$$version$$/material.$primary-$accent.min.css" /> </code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<script src="{{page.include_prefix}}assets/customizer.js"></script>
|
||||
|
30
docs/_templates/started.html
vendored
30
docs/_templates/started.html
vendored
@ -34,9 +34,9 @@
|
||||
<div class="mdl-tabs__panel is-active" id="tab1">
|
||||
<div class="code-with-text">
|
||||
Just add the following <code><link></code> and <code><script></code> elements into your HTML pages:
|
||||
<pre class="language-markup"><code><link rel="stylesheet" href="https://storage.googleapis.com/materialdesignlite/$$version$$/material.indigo-pink.min.css">
|
||||
<script src="https://storage.googleapis.com/materialdesignlite/$$version$$/material.min.js">
|
||||
</script></code></pre>
|
||||
<pre class="language-markup"><code><link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
|
||||
<link rel="stylesheet" href="$$hosted_libs_prefix$$/$$version$$/material.indigo-pink.min.css">
|
||||
<script src="$$hosted_libs_prefix$$/$$version$$/material.min.js"></script></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><link></code> and a <code><script></code> element into your HTML pages:
|
||||
<pre class="language-markup"><code><link rel="stylesheet" href="./material.min.css">
|
||||
Refer to these files by adding a <code><link></code> and a <code><script></code> elements into your HTML pages and also include the Material Icon font:
|
||||
<pre class="language-markup"><code><link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
|
||||
<link rel="stylesheet" href="./material.min.css">
|
||||
<script src="./material.min.js"></script></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><link></code> and a <code><script></code> element into your HTML pages:
|
||||
<pre class="language-markup"><code><link rel="stylesheet" href="./material.min.css">
|
||||
Refer to these files by adding a <code><link></code> and a <code><script></code> element into your HTML pages and also include the Material Icon font:
|
||||
<pre class="language-markup"><code><link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
|
||||
<link rel="stylesheet" href="./material.min.css">
|
||||
<script src="./material.min.js"></script></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><link></code> and a <code><script></code> element into your HTML pages:
|
||||
<pre class="language-markup"><code><link rel="stylesheet" href="/node_modules/material-design-lite//material.min.css">
|
||||
<script src="/node_modules/material-design-lite//material.min.js"></script></code></pre>
|
||||
Refer to these files by adding a <code><link></code> and a <code><script></code> element into your HTML pages and also include the Material Icon font:
|
||||
<pre class="language-markup"><code><link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
|
||||
<link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css">
|
||||
<script src="/node_modules/material-design-lite/material.min.js"></script></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><link></code> and a <code><script></code> element into your HTML pages:
|
||||
<pre class="language-markup"><code><link rel="stylesheet" href="/node_modules/material-design-lite//material.min.css">
|
||||
<script src="/node_modules/material-design-lite//material.min.js"></script></code></pre>
|
||||
Refer to these files by adding a <code><link></code> and a <code><script></code> element into your HTML pages and also include the Material Icon font:
|
||||
<pre class="language-markup"><code><link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
<link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css">
|
||||
<script src="/node_modules/material-design-lite/material.min.js"></script></code></pre>
|
||||
</div>
|
||||
<div class="caption">
|
||||
<h4>
|
||||
|
@ -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. */
|
||||
|
Loading…
Reference in New Issue
Block a user