playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

fixing some examples

pull/249/head
connors 11 years ago
parent
5813de7a58
commit
aae9d94f9d
1 changed files with 105 additions and 121 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 226
      components.html

226
components.html
Unescape View File

@ -58,26 +58,26 @@ base_url: "../"
<p class="component-description">Buttons in a title bar are left or right aligned and should be used for actions.</p> <p class="component-description">Buttons in a title bar are left or right aligned and should be used for actions.</p>
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<header class="bar-nav"> <header class="bar-nav pull-left">
<a class="button"> <a class="button">
Left Left
</a> </a>
<h1 class="title">Title</h1> <a class="button pull-right">
<a class="button">
Right Right
</a> </a>
<h1 class="title">Title</h1>
</header> </header>
</div> </div>
{% highlight html %} {% highlight html %}
<header class="bar-nav"> <header class="bar-nav">
<a class="button"> <a class="button pull-left">
Left Left
</a> </a>
<h1 class="title">Title</h1> <a class="button pull-right">
<a class="button">
Right Right
</a> </a>
<h1 class="title">Title</h1>
</header> </header>
{% endhighlight %} {% endhighlight %}
@ -88,25 +88,25 @@ base_url: "../"
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<header class="bar-nav"> <header class="bar-nav">
<a class="button-prev"> <a class="button-prev pull-left">
Previous Previous
</a> </a>
<h1 class="title">Title</h1> <a class="button pull-right">
<a class="button-next">
Next Next
</a> </a>
<h1 class="title">Title</h1>
</header> </header>
</div> </div>
{% highlight html %} {% highlight html %}
<header class="bar-nav"> <header class="bar-nav">
<a class="button-prev"> <a class="button-prev pull-left">
Previous Previous
</a> </a>
<h1 class="title">Title</h1> <a class="button pull-right">
<a class="button-next">
Next Next
</a> </a>
<h1 class="title">Title</h1>
</header> </header>
{% endhighlight %} {% endhighlight %}
@ -118,9 +118,12 @@ base_url: "../"
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<header class="bar-nav"> <header class="bar-nav">
<a class="button"> <a class="button pull-left">
Left Left
</a> </a>
<a class="button pull-right">
Right
</a>
<ul class="segmented-controller"> <ul class="segmented-controller">
<li class="selected"> <li class="selected">
<a>One</a> <a>One</a>
@ -132,17 +135,17 @@ base_url: "../"
<a>Three</a> <a>Three</a>
</li> </li>
</ul> </ul>
<a class="button">
Right
</a>
</header> </header>
</div> </div>
{% highlight html %} {% highlight html %}
<header class="bar-nav"> <header class="bar-nav">
<a class="button"> <a class="button pull-left">
Left Left
</a> </a>
<a class="button pull-right">
Right
</a>
<ul class="segmented-controller"> <ul class="segmented-controller">
<li class="selected"> <li class="selected">
<a>One</a> <a>One</a>
@ -154,9 +157,6 @@ base_url: "../"
<a>Three</a> <a>Three</a>
</li> </li>
</ul> </ul>
<a class="button">
Right
</a>
</header> </header>
{% endhighlight %} {% endhighlight %}
@ -168,75 +168,51 @@ base_url: "../"
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<nav class="bar-tab"> <nav class="bar-tab">
<ul class="tab-inner"> <a class="tab-item active" href="#">
<li class="tab-item active"> <span class="icon icon-share"></span>
<a href="#"> <div class="tab-label">Label</div>
<span class="icon icon-share"></span> </a>
<div class="tab-label">Label</div> <a class="tab-item" href="#">
</a> <span class="icon icon-share"></span>
</li> <div class="tab-label">Label</div>
<li class="tab-item"> </a>
<a href="#"> <a class="tab-item" href="#">
<span class="icon icon-share"></span> <span class="icon icon-share"></span>
<div class="tab-label">Label</div> <div class="tab-label">Label</div>
</a> </a>
</li> <a class="tab-item" href="#">
<li class="tab-item"> <span class="icon icon-share"></span>
<a href="#"> <div class="tab-label">Label</div>
<span class="icon icon-share"></span> </a>
<div class="tab-label">Label</div> <a class="tab-item" href="#">
</a> <span class="icon icon-share"></span>
</li> <div class="tab-label">Label</div>
<li class="tab-item"> </a>
<a href="#">
<span class="icon icon-share"></span>
<div class="tab-label">Label</div>
</a>
</li>
<li class="tab-item">
<a href="#">
<span class="icon icon-share"></span>
<div class="tab-label">Label</div>
</a>
</li>
</ul>
</nav> </nav>
</div> </div>
{% highlight html %} {% highlight html %}
<nav class="bar-tab"> <nav class="bar-tab">
<ul class="tab-inner"> <a class="tab-item active" href="#">
<li class="tab-item active"> <span class="icon icon-share"></span>
<a href="#"> <div class="tab-label">Label</div>
<span class="icon icon-share"></span> </a>
<div class="tab-label">Label</div> <a class="tab-item" href="#">
</a> <span class="icon icon-share"></span>
</li> <div class="tab-label">Label</div>
<li class="tab-item"> </a>
<a href="#"> <a class="tab-item" href="#">
<span class="icon icon-share"></span> <span class="icon icon-share"></span>
<div class="tab-label">Label</div> <div class="tab-label">Label</div>
</a> </a>
</li> <a class="tab-item" href="#">
<li class="tab-item"> <span class="icon icon-share"></span>
<a href="#"> <div class="tab-label">Label</div>
<span class="icon icon-share"></span> </a>
<div class="tab-label">Label</div> <a class="tab-item" href="#">
</a> <span class="icon icon-share"></span>
</li> <div class="tab-label">Label</div>
<li class="tab-item"> </a>
<a href="#">
<span class="icon icon-share"></span>
<div class="tab-label">Label</div>
</a>
</li>
<li class="tab-item">
<a href="#">
<span class="icon icon-share"></span>
<div class="tab-label">Label</div>
</a>
</li>
</ul>
</nav> </nav>
{% endhighlight %} {% endhighlight %}
@ -523,26 +499,30 @@ base_url: "../"
</article> </article>
<article class="component"> <article class="component">
<h3 class="component-title">Inset table views</h3> <h3 class="component-title">Carded table views</h3>
<div class="component-example"> <div class="component-example">
<ul class="table-view inset"> <div class="card">
<li class="table-view-cell">Item 1</li> <ul class="table-view">
<li class="table-view-cell">Item 2</li> <li class="table-view-cell">Item 1</li>
<li class="table-view-cell table-view-divider">Divider</li> <li class="table-view-cell">Item 2</li>
<li class="table-view-cell">Item 3</li> <li class="table-view-cell table-view-divider">Divider</li>
<li class="table-view-cell">Item 4</li> <li class="table-view-cell">Item 3</li>
</ul> <li class="table-view-cell">Item 4</li>
</ul>
</div>
</div> </div>
{% highlight html %} {% highlight html %}
<ul class="table-view inset"> <div class="card">
<li class="table-view-cell">Item 1</li> <ul class="table-view">
<li class="table-view-cell">Item 2</li> <li class="table-view-cell">Item 1</li>
<li class="table-view-cell table-view-divider">Divider</li> <li class="table-view-cell">Item 2</li>
<li class="table-view-cell">Item 3</li> <li class="table-view-cell table-view-divider">Divider</li>
<li class="table-view-cell">Item 4</li> <li class="table-view-cell">Item 3</li>
</ul> <li class="table-view-cell">Item 4</li>
</ul>
</div>
{% endhighlight %} {% endhighlight %}
</article> </article>
@ -638,17 +618,19 @@ base_url: "../"
<a href="#item3mobile">Thing three</a> <a href="#item3mobile">Thing three</a>
</li> </li>
</ul> </ul>
<ul class="inset table-view"> <div class="card">
<li id="item1mobile" class="table-view-cell segmented-controller-item selected"> <ul class="table-view">
Item 1 <li id="item1mobile" class="table-view-cell segmented-controller-item selected">
</li> Item 1
<li id="item2mobile" class="table-view-cell segmented-controller-item"> </li>
Item 2 <li id="item2mobile" class="table-view-cell segmented-controller-item">
</li> Item 2
<li id="item3mobile" class="table-view-cell segmented-controller-item"> </li>
Item 3 <li id="item3mobile" class="table-view-cell segmented-controller-item">
</li> Item 3
</ul> </li>
</ul>
</div>
</div> </div>
{% highlight html %} {% highlight html %}
@ -663,17 +645,19 @@ base_url: "../"
<a href="#item3mobile">Thing three</a> <a href="#item3mobile">Thing three</a>
</li> </li>
</ul> </ul>
<ul class="inset table-view"> <div class="card">
<li id="item1mobile" class="table-view-cell segmented-controller-item selected"> <ul class="table-view">
Item 1 <li id="item1mobile" class="table-view-cell segmented-controller-item selected">
</li> Item 1
<li id="item2mobile" class="table-view-cell segmented-controller-item"> </li>
Item 2 <li id="item2mobile" class="table-view-cell segmented-controller-item">
</li> Item 2
<li id="item3mobile" class="table-view-cell segmented-controller-item"> </li>
Item 3 <li id="item3mobile" class="table-view-cell segmented-controller-item">
</li> Item 3
</ul> </li>
</ul>
</div>
{% endhighlight %} {% endhighlight %}
</article> </article>

Write Preview
Loading…
Cancel
Save