Permalink
Browse files

reverted to default styles

  • Loading branch information...
1 parent 2db6cd1 commit 3b06062c34ea5b8056dda89a001ad74533aa4e80 @pennyfx pennyfx committed Jul 27, 2012
Showing with 327 additions and 303 deletions.
  1. +13 −3 public/README.md
  2. +89 −65 public/demo.html
  3. +8 −99 public/demo/css/demo.css
  4. +154 −100 public/demo/css/global.css
  5. +62 −35 public/index.html
  6. +1 −1 public/x-tag.js
View
@@ -1,12 +1,22 @@
X-Tag - Custom Elements for Modern Browsers
=====
-Based on the current W3 Web Components [draft][1], X-Tag enables the custom element portion of the proposal.
-Custom elements let you register new tags/elements with the parser so they are recognized and inflated with
+Based on the current W3 Web Components [draft][1], X-Tag enables the custom element portion of the proposal.
+Custom elements let you register new tags/elements with the parser so they are recognized and inflated with
special abilities you define.
Find out more about what X-Tag does, where it works, and how to use it, on the project page here: http://mozilla.github.com/x-tag/
X-Tag (excluding third-party icons or images) is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/.
- [1]: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html "W3 Web Components Spec (Draft)"
+ [1]: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html "W3 Web Components Spec (Draft)"
+
+Developers
+==========
+
+To get started hacking on X-Tag, first check out the code and be sure you also
+clone the elements submodule:
+
+ git clone --recursive https://github.com/mozilla/x-tag
+
+Open up demo.html in your browser to see how things work.
View
@@ -9,64 +9,55 @@
<link href="demo/images/shortcut.png" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="demo/css/reset.css" />
- <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Josefin+Sans:600" />
+ <link href='http://fonts.googleapis.com/css?family=Days+One|Righteous' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="demo/highlight/styles/vs.css" />
<link rel="stylesheet" type="text/css" href="demo/css/global.css"/>
<link rel="stylesheet" type="text/css" href="demo/css/demo.css"/>
- <link rel="stylesheet" type="text/css" href="elements/actionbar/actionbar.css"/>
- <link rel="stylesheet" type="text/css" href="elements/panel/panel.css"/>
- <link rel="stylesheet" type="text/css" href="elements/tabbox/tabbox.css"/>
- <link rel="stylesheet" type="text/css" href="elements/accordion/accordion.css"/>
- <link rel="stylesheet" type="text/css" href="elements/slidebox/slidebox.css"/>
- <link rel="stylesheet" type="text/css" href="elements/modal/modal.css"/>
- <link rel="stylesheet" type="text/css" href="elements/map/map.css"/>
- <link rel="stylesheet" type="text/css" href="elements/autosuggest/autosuggest.css"/>
- <link rel="stylesheet" type="text/css" href="elements/pager/pager.css"/>
- <link rel="stylesheet" type="text/css" href="elements/flipbox/flipbox.css"/>
- <link rel="stylesheet" type="text/css" href="elements/overlay/overlay.css"/>
+ <link rel="stylesheet" type="text/css" href="https://raw.github.com/csuwldcat/moz-x-tags/master/actionbar/actionbar.css"/>
+ <link rel="stylesheet" type="text/css" href="https://raw.github.com/csuwldcat/moz-x-tags/master/panel/panel.css"/>
+ <link rel="stylesheet" type="text/css" href="https://raw.github.com/csuwldcat/moz-x-tags/master/tabbox/tabbox.css"/>
+ <link rel="stylesheet" type="text/css" href="https://raw.github.com/csuwldcat/moz-x-tags/master/accordion/accordion.css"/>
+ <link rel="stylesheet" type="text/css" href="https://raw.github.com/csuwldcat/moz-x-tags/master/slidebox/slidebox.css"/>
+ <link rel="stylesheet" type="text/css" href="https://raw.github.com/csuwldcat/moz-x-tags/master/modal/modal.css"/>
+ <link rel="stylesheet" type="text/css" href="https://raw.github.com/csuwldcat/moz-x-tags/master/map/map.css"/>
+ <link rel="stylesheet" type="text/css" href="https://raw.github.com/csuwldcat/moz-x-tags/master/autosuggest/autosuggest.css"/>
+ <link rel="stylesheet" type="text/css" href="https://raw.github.com/csuwldcat/moz-x-tags/master/pager/pager.css"/>
+ <link rel="stylesheet" type="text/css" href="https://raw.github.com/csuwldcat/moz-x-tags/master/flipbox/flipbox.css"/>
+ <link rel="stylesheet" type="text/css" href="https://raw.github.com/csuwldcat/moz-x-tags/master/overlay/overlay.css"/>
+
<script type="text/javascript" src="x-tag.js"></script>
- <script type="text/javascript" src="elements/actionbar/actionbar.js"></script>
- <script type="text/javascript" src="elements/panel/panel.js"></script>
- <script type="text/javascript" src="elements/tabbox/tabbox.js"></script>
- <script type="text/javascript" src="elements/accordion/accordion.js"></script>
- <script type="text/javascript" src="elements/slidebox/slidebox.js"></script>
- <script type="text/javascript" src="elements/modal/modal.js"></script>
- <script type="text/javascript" src="elements/map/map.js"></script>
- <script type="text/javascript" src="elements/autosuggest/autosuggest.js"></script>
- <script type="text/javascript" src="elements/pager/pager.js"></script>
- <script type="text/javascript" src="elements/flipbox/flipbox.js"></script>
- <script type="text/javascript" src="elements/overlay/overlay.js"></script>
+ <script type="text/javascript" src="https://raw.github.com/csuwldcat/moz-x-tags/master/actionbar/actionbar.js"></script>
+ <script type="text/javascript" src="https://raw.github.com/csuwldcat/moz-x-tags/master/panel/panel.js"></script>
+ <script type="text/javascript" src="https://raw.github.com/csuwldcat/moz-x-tags/master/tabbox/tabbox.js"></script>
+ <script type="text/javascript" src="https://raw.github.com/csuwldcat/moz-x-tags/master/accordion/accordion.js"></script>
+ <script type="text/javascript" src="https://raw.github.com/csuwldcat/moz-x-tags/master/slidebox/slidebox.js"></script>
+ <script type="text/javascript" src="https://raw.github.com/csuwldcat/moz-x-tags/master/modal/modal.js"></script>
+ <script type="text/javascript" src="https://raw.github.com/csuwldcat/moz-x-tags/master/map/map.js"></script>
+ <script type="text/javascript" src="https://raw.github.com/csuwldcat/moz-x-tags/master/autosuggest/autosuggest.js"></script>
+ <script type="text/javascript" src="https://raw.github.com/csuwldcat/moz-x-tags/master/pager/pager.js"></script>
+ <script type="text/javascript" src="https://raw.github.com/csuwldcat/moz-x-tags/master/flipbox/flipbox.js"></script>
+ <script type="text/javascript" src="https://raw.github.com/csuwldcat/moz-x-tags/master/overlay/overlay.js"></script>
</head>
<body>
-<header class="container">
- <h1 id="logo">X-Tag <code>&lt;X&gt;</code></h1>
-
+<header>
+ <h1 id="logo">&lt;<span>x</span>&gt;</h1>
<nav id="global_menu">
- <ul>
- <li>
- <a href="#structural">Structural</a>
- </li>
- <li>
- <a href="#media">Media</a>
- </li>
- <li>
- <a href="#input">Input</a>
- </li>
- <li>
- <a href="#navigation">Navigation</a>
- </li>
- <li>
- <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://mozilla.github.com/x-tag/" data-via="csuwldcat" data-hashtags="WebComponents">Tweet</a>
- </li>
- </ul>
+ <a href="#menu">
+ <div>&#9552;</div><br /><div>&#9552;</div>
+ <nav id="global_nav">
+ <a href="#structural">Structural Elements</a>
+ <a href="#media">Media Elements</a>
+ <a href="#input">Input Elements</a>
+ <a href="#navigation">Navigation Elements</a>
+ </nav>
+ </a>
</nav>
</header>
-<div id="tags" class="container max-width">
- <h2 id="tag_line">Demos that put X-Tag in action.</h2>
+<div id="tags" class="max-width">
<h3>
Structural Elements
@@ -88,7 +79,11 @@ <h2 id="tag_line">Demos that put X-Tag in action.</h2>
<x-panel id="panel_demo" rel="demo/html/panel-content.html"></x-panel>
<h4>The Markup:</h4>
-<pre><code><x-panel src="demo/html/panel-content.html"></x-panel></code></pre>
+<pre>
+<code>
+<x-panel src="demo/html/panel-content.html"></x-panel>
+</code>
+</pre>
</dd>
<dt>Tab Box</dt>
@@ -140,7 +135,9 @@ <h2 id="tag_line">Demos that put X-Tag in action.</h2>
</x-tabbox>
<h4>The Markup:</h4>
-<pre><code><x-tabbox>
+<pre>
+<code>
+<x-tabbox>
<x-tabs>
<x-tab>Tab 1</x-tab>
<x-tab>Tab 2</x-tab>
@@ -151,7 +148,9 @@ <h2 id="tag_line">Demos that put X-Tag in action.</h2>
<x-tabpanel>Panel 2</x-tabpanel>
<x-tabpanel>Panel 3</x-tabpanel>
</x-tabpanels>
-</x-tabbox></code></pre>
+</x-tabbox>
+</code>
+</pre>
<dt>Accordion</dt>
<dd id="accordion">
@@ -190,7 +189,9 @@ <h2 id="tag_line">Demos that put X-Tag in action.</h2>
</div>
</x-accordion>
<h4>The Markup:</h4>
-<pre><code><x-accordion>
+<pre>
+<code>
+<x-accordion>
<x-toggler selected="true">Toggler 1</x-toggler>
<div>Panel 1</div>
@@ -199,7 +200,9 @@ <h2 id="tag_line">Demos that put X-Tag in action.</h2>
<x-toggler>Toggler 3</x-toggler>
<div>Panel 3</div>
-</x-accordion></code></pre>
+</x-accordion>
+</code>
+</pre>
</dd>
</dd>
@@ -227,13 +230,17 @@ <h2 id="tag_line">Demos that put X-Tag in action.</h2>
</x-slidebox>
<h4>The Markup:</h4>
-<pre><code><x-slidebox>
+<pre>
+<code>
+<x-slidebox>
<x-slides>
<x-slide>Slide 1</x-slide>
<x-slide>Slide 2</x-slide>
<x-slide>Slide 3</x-slide>
</x-slides>
-</x-slidebox></code></pre>
+</x-slidebox>
+</code>
+</pre>
</dd>
<dt>Flip Box</dt>
@@ -255,12 +262,16 @@ <h2 id="tag_line">Demos that put X-Tag in action.</h2>
</x-flipbox>
<h4>The Markup:</h4>
-<pre><code><x-flipbox>
+<pre>
+<code>
+<x-flipbox>
<x-card>
<div>Side 1</div>
<div>Side 2</div>
</x-card>
-</x-flipbox></code></pre>
+</x-flipbox>
+</code>
+</pre>
</dd>
<dt>Modal<span feature="data-bound" title="This element has data request bindings"></span></dt>
@@ -275,7 +286,11 @@ <h2 id="tag_line">Demos that put X-Tag in action.</h2>
</nav>
<h4>The Markup:</h4>
-<pre><code><x-modal> YOUR CONTENT HERE </x-modal></code></pre>
+<pre>
+<code>
+<x-modal> YOUR CONTENT HERE </x-modal>
+</code>
+</pre>
</dd>
</dl>
@@ -294,7 +309,11 @@ <h2 id="tag_line">Demos that put X-Tag in action.</h2>
<x-map id="map_demo" data-key="39d2b66f0d5d49dbb52a5b7ad87aea9b"></x-map>
<h4>The Markup:</h4>
-<pre><code><x-map data-key="Cloudmade/OpenStreetMaps-API-Key"></x-map></code></pre>
+<pre>
+<code>
+<x-map data-key="Cloudmade/OpenStreetMaps-API-Key"></x-map>
+</code>
+</pre>
</dd>
</dl>
@@ -312,7 +331,11 @@ <h2 id="tag_line">Demos that put X-Tag in action.</h2>
<x-autosuggest id="autosuggest_demo" data-padding="2" data-url="http://api.rottentomatoes.com/api/public/v1.0/movies.json?apikey=v695ukwehrcb5q8kwkrgjmbd&page_limit=10&page=1"></x-autosuggest>
<h4>The Markup:</h4>
-<pre><code><x-autosuggest data-url="SOME-API-URL-HERE"></x-autosuggest></code></pre>
+<pre>
+<code>
+<x-autosuggest data-url="SOME-API-URL-HERE"></x-autosuggest>
+</code>
+</pre>
</dd>
</dl>
@@ -344,7 +367,11 @@ <h2 id="tag_line">Demos that put X-Tag in action.</h2>
</x-pager>
<h4>The Markup:</h4>
-<pre><code><x-pager data-pages="10" data-url="/posts?p={current-page}"></x-pager></code></pre>
+<pre>
+<code>
+<x-pager data-pages="10" data-url="/posts?p={current-page}"></x-pager>
+</code>
+</pre>
</dd>
<dt>Action Bar</dt>
@@ -423,12 +450,11 @@ <h2 id="tag_line">Demos that put X-Tag in action.</h2>
<script type="text/javascript" src="demo/highlight/highlight.pack.js"></script>
<script type="text/javascript">
+
xtag.query(document.body, 'code').forEach(function(el){
- if (el.parentNode.id != 'logo') {
- var text = el.innerHTML;
- el.innerHTML = '';
- el.textContent = text;
- }
+ var text = el.innerHTML;
+ el.innerHTML = '';
+ el.textContent = text;
});
hljs.tabReplace = ' ';
@@ -601,6 +627,4 @@ <h2 id="tag_line">Demos that put X-Tag in action.</h2>
</script>
-<script id="twitter-wjs" type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
-
</html>
Oops, something went wrong.

0 comments on commit 3b06062

Please sign in to comment.