dikshya/exploRUGComponent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a static site generator

Browse Source 
There is no build for the element or site utilities like PrismJS yet, so this site only works locally at the moment.
This commit is contained in:
Justin Fagnani
2019-12-19 20:48:45 -08:00
committed by Justin Fagnani
parent 2b3e914666
commit fc662728eb
28 changed files with 5770 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
docs/examples/basic/index.html Normal file
View File

@@ -0,0 +1,54 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><my-element> ⌲ Examples ⌲ Basic</title>
<link rel="stylesheet" href="/docs/docs.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
<link href="/node_modules/prismjs/themes/prism-okaidia.css" rel="stylesheet" />
<script type="module" src="/my-element.js"></script>
</head>
<body>
<header>
<h1>&lt;my-element></h1>
<h2>A web component just for me.</h2>
</header>
<nav>
<a href="/docs/">Home</a>
<a href="/docs/examples/">Examples</a>
<a href="/docs/api/">API</a>
<a href="/docs/install/">Install</a>
</nav>
<div id="main-wrapper">
<main>
<h2>Basic Use</h2>
<style>
my-element p {
border: solid 1px blue;
padding: 8px;
}
</style>
<my-element>
<p>This is child content</p>
</my-element>
<h3>CSS</h3>
<pre class="language-css"><code class="language-css"><span class="highlight-line"> <span class="token selector">p</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token property">border</span><span class="token punctuation">:</span> solid 1px blue<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">padding</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token punctuation">}</span></span></code></pre>
<h3>HTML</h3>
<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>This is child content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></span></code></pre>
</main>
</div>
<footer>
<p>
Made with
<a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
</p>
</footer>
</body>
</html>