Make sure we show developers to include the MD Font after the MDL libs

master
Nicolas Garnier 2015-06-29 14:51:39 +02:00
parent d631e81365
commit 16e745460d
3 changed files with 24 additions and 25 deletions

View File

@ -29,15 +29,15 @@ CodeBlockCodePen.prototype.init = function() {
// Also insert the MDL Library. // Also insert the MDL Library.
var mdlLibs = [ var mdlLibs = [
// TODO: Remove below before launch. For testing only.
'<!-- For testing. TODO: Remove before launch -->',
'<link rel="stylesheet" href="https://storage.googleapis.com/materialdesignlite/material.css">',
'<script src="https://storage.googleapis.com/materialdesignlite/material.min.js"></script>',
'<!-- Material Design Lite -->', '<!-- Material Design Lite -->',
'<script src="$$hosted_libs_prefix$$/$$version$$/material.min.js"></script>', '<script src="$$hosted_libs_prefix$$/$$version$$/material.min.js"></script>',
'<link rel="stylesheet" href="$$hosted_libs_prefix$$/$$version$$/material.indigo-pink.min.css">', '<link rel="stylesheet" href="$$hosted_libs_prefix$$/$$version$$/material.indigo-pink.min.css">',
'<!-- Material Design icon font -->', '<!-- Material Design icon font -->',
'<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">', '<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">'
// TODO: Remove below before launch. For testing only.
'<!-- For testing. TODO: Remove before launch -->',
'<link rel="stylesheet" href="https://storage.googleapis.com/materialdesignlite/material.css">',
'<script src="https://storage.googleapis.com/materialdesignlite/material.min.js"></script>'
]; ];
for (var i = 0, len = this.htmlCodeBlocks.length; i < len; i++) { for (var i = 0, len = this.htmlCodeBlocks.length; i < len; i++) {

View File

@ -33,16 +33,15 @@
<link rel="canonical" href="http://www.example.com/"> <link rel="canonical" href="http://www.example.com/">
--> -->
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!-- Page styles --> <!-- Page styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css">
<link rel="stylesheet" href="{{page.include_prefix}}material.min.css"> <link rel="stylesheet" href="{{page.include_prefix}}material.min.css">
<link rel="stylesheet" href="{{page.include_prefix}}assets/main.css"> <link rel="stylesheet" href="{{page.include_prefix}}assets/main.css">
<script src="{{page.include_prefix}}material.min.js"></script> <script src="{{page.include_prefix}}material.min.js"></script>
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head> </head>
<body class="{{page.bodyclass}}"> <body class="{{page.bodyclass}}">
<div class="docs-layout mdl-layout mdl-js-layout"> <div class="docs-layout mdl-layout mdl-js-layout">

View File

@ -37,9 +37,9 @@
<div class="mdl-tabs__panel is-active" id="tab1"> <div class="mdl-tabs__panel is-active" id="tab1">
<div class="code-with-text"> <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: Just add the following <code>&lt;link&gt;</code> and <code>&lt;script&gt;</code> elements into your HTML pages:
<pre class="language-markup codepen-button-disabled"><code>&lt;link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"&gt; <pre class="language-markup codepen-button-disabled"><code>&lt;link rel="stylesheet" href="$$hosted_libs_prefix$$/$$version$$/material.indigo-pink.min.css"&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;
&lt;script src="$$hosted_libs_prefix$$/$$version$$/material.min.js"&gt;&lt;/script&gt;</code></pre> &lt;link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"&gt;</code></pre>
</div> </div>
<h4>Choose color scheme</h4> <h4>Choose color scheme</h4>
<p> <p>
@ -52,9 +52,9 @@
</p> </p>
<div class="code-with-text"> <div class="code-with-text">
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: 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 codepen-button-disabled"><code>&lt;link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"&gt; <pre class="language-markup codepen-button-disabled"><code>&lt;link rel="stylesheet" href="./material.min.css"&gt;
&lt;link rel="stylesheet" href="./material.min.css"&gt; &lt;script src="./material.min.js"&gt;&lt;/script&gt;
&lt;script src="./material.min.js"&gt;&lt;/script&gt;</code></pre> &lt;link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"&gt;</code></pre>
</div> </div>
</div> </div>
<div class="mdl-tabs__panel" id="tab3"> <div class="mdl-tabs__panel" id="tab3">
@ -76,9 +76,9 @@ gulp</code></pre>
</p> </p>
<div class="code-with-text"> <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 and also include the Material Icon font: 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 codepen-button-disabled"><code>&lt;link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"&gt; <pre class="language-markup codepen-button-disabled"><code>&lt;link rel="stylesheet" href="./material.min.css"&gt;
&lt;link rel="stylesheet" href="./material.min.css"&gt; &lt;script src="./material.min.js"&gt;&lt;/script&gt;
&lt;script src="./material.min.js"&gt;&lt;/script&gt;</code></pre> &lt;link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"&gt;</code></pre>
</div> </div>
<div class="caption"> <div class="caption">
<h4> <h4>
@ -100,9 +100,9 @@ gulp</code></pre>
</p> </p>
<div class="code-with-text"> <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 and also include the Material Icon font: 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 codepen-button-disabled"><code>&lt;link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"&gt; <pre class="language-markup codepen-button-disabled"><code>&lt;link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css"&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;
&lt;script src="/node_modules/material-design-lite/material.min.js"&gt;&lt;/script&gt;</code></pre> &lt;link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"&gt;</code></pre>
</div> </div>
<div class="caption"> <div class="caption">
<h4> <h4>
@ -124,9 +124,9 @@ gulp</code></pre>
</p> </p>
<div class="code-with-text"> <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 and also include the Material Icon font: 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 codepen-button-disabled"><code>&lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"&gt; <pre class="language-markup codepen-button-disabled"><code>&lt;link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css"&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;
&lt;script src="/node_modules/material-design-lite/material.min.js"&gt;&lt;/script&gt;</code></pre> &lt;link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"&gt;</code></pre>
</div> </div>
<div class="caption"> <div class="caption">
<h4> <h4>