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

Adding basic grid and fixing the firefox notice.

pull/249/head
connors 11 years ago
parent
74c42075fb
commit
31ad2d960e
3 changed files with 151 additions and 83 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. 167
      components.html
  2. 34
      docs-assets/css/docs.css
  3. 33
      lib/sass/docs.scss

167
components.html
Unescape View File

@ -5,43 +5,44 @@ base_url: "../"
--- ---
<!-- Banner for Mozilla/IE --> <!-- Banner for Mozilla/IE -->
<div class="notice-banner"> <p class="notice-banner">
<p><strong>Heads up!</strong> Ratchet components are written only for iPhone, so many are broken in non-Webkit browsers.</p> <strong>Heads up!</strong> Ratchet components are written only for iPhone, so many are broken in non-Webkit browsers.
</div> </p>
<div class="container">
<!--[if IE]>
<div class="notice-banner">
<p><strong>Heads up!</strong> Ratchet components are written only for iPhone, so many are broken in non-Webkit browsers.</p>
</div>
<![endif]-->
<!-- Components -->
<div class="column-group">
<div class="column units-2">
<div class="section-header">
<h2 class="section-title">Components</h2>
<p class="section-description">Design patterns that serve as basic building blocks.</p>
</div>
<div class="iphone">
<div class="iphone-content">
<div id="iwindow">
<header class="bar-nav">
<h1 class="title">Title</h1>
</header>
</div>
</div>
</div>
<!--[if IE]> <!-- Bars -->
<div class="notice-banner"> <article class="component active" id="bars">
<p><strong>Heads up!</strong> Ratchet components are written only for iPhone, so many are broken in non-Webkit browsers.</p> <h3 class="component-title">Title bar</h3>
</div> <p class="component-description">Title bars are full width and docked to the top of the viewport.</p>
<![endif]-->
<div class="component-example component-example-fullbleed">
<!-- Components -->
<section class="docs-outer-wrapper content-section section-components">
<div class="docs-inner-wrapper">
<div class="section-header">
<h2 class="section-title">Components</h2>
<p class="section-description">Design patterns that serve as basic building blocks.</p>
</div>
<div class="iphone">
<div class="iphone-content">
<div id="iwindow">
<header class="bar-nav"> <header class="bar-nav">
<h1 class="title">Title</h1> <h1 class="title">Title</h1>
</header> </header>
</div> </div>
</div>
</div>
<!-- Bars -->
<article class="component active" id="bars">
<h3 class="component-title">Title bar</h3>
<p class="component-description">Title bars are full width and docked to the top of the viewport.</p>
<div class="component-example component-example-fullbleed">
<header class="bar-nav">
<h1 class="title">Title</h1>
</header>
</div>
{% highlight html %} {% highlight html %}
<header class="bar-nav"> <header class="bar-nav">
@ -344,20 +345,20 @@ base_url: "../"
</div> </div>
{% highlight html %} {% highlight html %}
<ul class="table-view"> <ul class="table-view">
<li> <li class="table-view-cell">
<a> <a>
Item 1 Item 1
<span class="chevron"></span> <span class="chevron"></span>
</a> </a>
</li> </li>
<li> <li class="table-view-cell">
<a> <a>
Item 2 Item 2
<span class="chevron"></span> <span class="chevron"></span>
</a> </a>
</li> </li>
<li> <li class="table-view-cell">
<a> <a>
Item 3 Item 3
<span class="chevron"></span> <span class="chevron"></span>
@ -930,27 +931,27 @@ document
</article> </article>
<!-- Slider --> <!-- Slider -->
<article class="component" id="sliders"> <article class="component" id="sliders">
<h3 class="component-title">Sliders</h3> <h3 class="component-title">Sliders</h3>
<p class="component-description">Can be used with any number of slides with any type of content.</p> <p class="component-description">Can be used with any number of slides with any type of content.</p>
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<div class="slider" id="mySlider"> <div class="slider" id="mySlider">
<ul> <ul>
<li> <li>
<img src="{{ page.base_url }}docs-assets/img/slide-1.jpg"> <img src="{{ page.base_url }}docs-assets/img/slide-1.jpg">
<span class="slide-text">&larr; Slide me</span> <span class="slide-text">&larr; Slide me</span>
</li> </li>
<li> <li>
<img src="{{ page.base_url }}docs-assets/img/slide-2.jpg"> <img src="{{ page.base_url }}docs-assets/img/slide-2.jpg">
</li> </li>
<li> <li>
<img src="{{ page.base_url }}docs-assets/img/slide-3.jpg"> <img src="{{ page.base_url }}docs-assets/img/slide-3.jpg">
</li> </li>
</ul> </ul>
</div>
</div> </div>
</div>
{% highlight html %} {% highlight html %}
<div class="slider" id="mySlider"> <div class="slider" id="mySlider">
@ -969,7 +970,7 @@ document
</div> </div>
{% endhighlight %} {% endhighlight %}
<p class="component-description">Sliders.js binds an event to the document that returns a detail object and can be used to fire a callback.</p> <p class="component-description">Sliders.js binds an event to the document that returns a detail object and can be used to fire a callback.</p>
{% highlight js %} {% highlight js %}
// Only needed if you want to fire a callback // Only needed if you want to fire a callback
@ -978,44 +979,44 @@ document
.addEventListener('slide', myFunction) .addEventListener('slide', myFunction)
{% endhighlight %} {% endhighlight %}
</article> </article>
<!-- Push docs --> <!-- Push docs -->
<article class="component" id="push"> <article class="component" id="push">
<h3 class="component-title">Push</h3> <h3 class="component-title">Push</h3>
<p class="component-description">Push.js is the engine that connects Ratchet pages together with AJAX and the history api. Push.js is listening to all clicks on a page, so just make sure it's included and link something in your Ratchet project up.</p> <p class="component-description">Push.js is the engine that connects Ratchet pages together with AJAX and the history api. Push.js is listening to all clicks on a page, so just make sure it's included and link something in your Ratchet project up.</p>
{% highlight html %} {% highlight html %}
<!-- A one.html link --> <!-- A one.html link -->
<a href="two.html">Two</a> <a href="two.html">Two</a>
{% endhighlight %} {% endhighlight %}
<p class="component-note">This will use push to replace everything in the .content div with the .content of two.html. Also, it will either update or remove .bar-nav and .bar-tab according to their presences in two.html.</p> <p class="component-note">This will use push to replace everything in the .content div with the .content of two.html. Also, it will either update or remove .bar-nav and .bar-tab according to their presences in two.html.</p>
<p class="component-description">Now that pages are being loaded through push, it's easy to specify transitions for animations between pages. There are three different transitions to chose from: <code>fade</code>, <code>slide-in</code>, or <code>slide-out</code>.</p> <p class="component-description">Now that pages are being loaded through push, it's easy to specify transitions for animations between pages. There are three different transitions to chose from: <code>fade</code>, <code>slide-in</code>, or <code>slide-out</code>.</p>
{% highlight html %} {% highlight html %}
<!-- An one.html link that animates to two.html --> <!-- An one.html link that animates to two.html -->
<a href="two.html" data-transition="fade">Two</a> <a href="two.html" data-transition="fade">Two</a>
{% endhighlight %} {% endhighlight %}
<p class="component-description">A working version of push:</p> <p class="component-description">A working version of push:</p>
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<header class="bar-nav"> <header class="bar-nav">
<h1 class="title">Push</h1> <h1 class="title">Push</h1>
</header> </header>
<div class="content"> <div class="content">
<ul class="table-view"> <ul class="table-view">
<li> <li>
<a href="{{ page.base_url }}two.html" data-transition="slide-in"> <a href="{{ page.base_url }}two.html" data-transition="slide-in">
Load new page with push Load new page with push
</a> </a>
<span class="chevron"></span> <span class="chevron"></span>
</li> </li>
</ul> </ul>
</div>
</div> </div>
</div>
{% highlight html %} {% highlight html %}
<header class="bar-nav"> <header class="bar-nav">
@ -1033,21 +1034,21 @@ document
</div> </div>
{% endhighlight %} {% endhighlight %}
<p class="component-description">Have a link you don't want to intercepted by push? Try this:</p> <p class="component-description">Have a link you don't want to intercepted by push? Try this:</p>
{% highlight html %} {% highlight html %}
<!-- Use data-ignore="push" to prevent the push.js interception --> <!-- Use data-ignore="push" to prevent the push.js interception -->
<a href="http://www.google.com" data-ignore="push">Google<a> <a href="http://www.google.com" data-ignore="push">Google<a>
{% endhighlight %} {% endhighlight %}
<p class="component-description">Push.js binds an event to the document that returns a detail object and can be used to fire a callback.</p> <p class="component-description">Push.js binds an event to the document that returns a detail object and can be used to fire a callback.</p>
{% highlight js %} {% highlight js %}
// Only needed if you want to fire a callback // Only needed if you want to fire a callback
window.addEventListener('push', myFunction); window.addEventListener('push', myFunction);
{% endhighlight %} {% endhighlight %}
</article> </article>
</div>
</div> </div>
</section> </div>

34
docs-assets/css/docs.css
Unescape View File

@ -83,6 +83,12 @@ h1, h2, h3, h4, h5, h6 {
position: relative; position: relative;
} }
.component-example-fullbleed,
.highlight {
margin-left: -15px;
margin-right: -15px;
}
.component-example .bar-header-secondary { .component-example .bar-header-secondary {
top: 0; top: 0;
} }
@ -267,6 +273,18 @@ h1, h2, h3, h4, h5, h6 {
margin-right: -30px; margin-right: -30px;
} }
} }
.notice-banner {
height: 0;
margin: 0;
padding: 0;
color: #333;
font-size: 16px;
text-align: center;
background-color: #fff9c4;
-webkit-animation: shownotice 1s infinite;
opacity: 0;
}
.iphone { .iphone {
display: none; display: none;
} }
@ -336,3 +354,19 @@ hr {
-webkit-transform: scale(1); -webkit-transform: scale(1);
} }
} }
@-webkit-keyframes shownotice {
0% {
height: auto;
min-height: 30px;
padding: 20px 0;
opacity: 1;
}
100% {
height: auto;
min-height: 30px;
padding: 20px 0;
opacity: 1;
}
}

33
lib/sass/docs.scss
Unescape View File

@ -89,6 +89,11 @@ h1, h2, h3, h4, h5, h6 {
.component-example .content { .component-example .content {
position: relative; position: relative;
} }
.component-example-fullbleed,
.highlight {
margin-left: -15px;
margin-right: -15px;
}
.component-example .bar-header-secondary { .component-example .bar-header-secondary {
top: 0; top: 0;
} }
@ -209,6 +214,18 @@ h1, h2, h3, h4, h5, h6 {
// Misc // Misc
// -------------------------------------------------- // --------------------------------------------------
.notice-banner {
height: 0;
margin: 0;
padding: 0;
color: #333;
font-size: 16px;
text-align: center;
background-color: #fff9c4;
opacity: 0;
-moz-animation: shownotice 1s infinite;
}
.iphone { .iphone {
display: none; display: none;
} }
@ -276,3 +293,19 @@ hr {
-webkit-transform: scale(1); -webkit-transform: scale(1);
} }
} }
// Only visible to Mozilla browsers. Sneaky huh?
@-moz-keyframes shownotice {
0% {
height: auto;
min-height: 30px;
padding: 20px 0;
opacity: 1;
}
100% {
height: auto;
min-height: 30px;
padding: 20px 0;
opacity: 1;
}
}

Write Preview
Loading…
Cancel
Save