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
Split 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 -->
<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>
<p class="notice-banner">
<strong>Heads up!</strong> Ratchet components are written only for iPhone, so many are broken in non-Webkit browsers.
</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]>
<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 -->
<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">
<!-- 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>
</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 %}
<header class="bar-nav">
@ -344,20 +345,20 @@ base_url: "../"
</div>
{% highlight html %}
<ul class="table-view">
<li>
<ul class="table-view">
<li class="table-view-cell">
<a>
Item 1
<span class="chevron"></span>
</a>
</li>
<li>
<li class="table-view-cell">
<a>
Item 2
<span class="chevron"></span>
</a>
</li>
<li>
<li class="table-view-cell">
<a>
Item 3
<span class="chevron"></span>
@ -930,27 +931,27 @@ document
</article>
<!-- Slider -->
<article class="component" id="sliders">
<h3 class="component-title">Sliders</h3>
<p class="component-description">Can be used with any number of slides with any type of content.</p>
<!-- Slider -->
<article class="component" id="sliders">
<h3 class="component-title">Sliders</h3>
<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="slider" id="mySlider">
<ul>
<li>
<img src="{{ page.base_url }}docs-assets/img/slide-1.jpg">
<span class="slide-text">&larr; Slide me</span>
</li>
<li>
<img src="{{ page.base_url }}docs-assets/img/slide-2.jpg">
</li>
<li>
<img src="{{ page.base_url }}docs-assets/img/slide-3.jpg">
</li>
</ul>
<div class="component-example component-example-fullbleed">
<div class="slider" id="mySlider">
<ul>
<li>
<img src="{{ page.base_url }}docs-assets/img/slide-1.jpg">
<span class="slide-text">&larr; Slide me</span>
</li>
<li>
<img src="{{ page.base_url }}docs-assets/img/slide-2.jpg">
</li>
<li>
<img src="{{ page.base_url }}docs-assets/img/slide-3.jpg">
</li>
</ul>
</div>
</div>
</div>
{% highlight html %}
<div class="slider" id="mySlider">
@ -969,7 +970,7 @@ document
</div>
{% 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 %}
// Only needed if you want to fire a callback
@ -978,44 +979,44 @@ document
.addEventListener('slide', myFunction)
{% endhighlight %}
</article>
</article>
<!-- Push docs -->
<article class="component" id="push">
<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>
<!-- Push docs -->
<article class="component" id="push">
<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>
{% highlight html %}
<!-- A one.html link -->
<a href="two.html">Two</a>
{% 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 %}
<!-- An one.html link that animates to two.html -->
<a href="two.html" data-transition="fade">Two</a>
{% 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">
<header class="bar-nav">
<h1 class="title">Push</h1>
</header>
<div class="content">
<ul class="table-view">
<li>
<a href="{{ page.base_url }}two.html" data-transition="slide-in">
Load new page with push
</a>
<span class="chevron"></span>
</li>
</ul>
<div class="component-example component-example-fullbleed">
<header class="bar-nav">
<h1 class="title">Push</h1>
</header>
<div class="content">
<ul class="table-view">
<li>
<a href="{{ page.base_url }}two.html" data-transition="slide-in">
Load new page with push
</a>
<span class="chevron"></span>
</li>
</ul>
</div>
</div>
</div>
{% highlight html %}
<header class="bar-nav">
@ -1033,21 +1034,21 @@ document
</div>
{% 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 %}
<!-- Use data-ignore="push" to prevent the push.js interception -->
<a href="http://www.google.com" data-ignore="push">Google<a>
{% 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 %}
// Only needed if you want to fire a callback
window.addEventListener('push', myFunction);
{% endhighlight %}
</article>
</article>
</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;
}
.component-example-fullbleed,
.highlight {
margin-left: -15px;
margin-right: -15px;
}
.component-example .bar-header-secondary {
top: 0;
}
@ -267,6 +273,18 @@ h1, h2, h3, h4, h5, h6 {
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 {
display: none;
}
@ -336,3 +354,19 @@ hr {
-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 {
position: relative;
}
.component-example-fullbleed,
.highlight {
margin-left: -15px;
margin-right: -15px;
}
.component-example .bar-header-secondary {
top: 0;
}
@ -209,6 +214,18 @@ h1, h2, h3, h4, h5, h6 {
// 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 {
display: none;
}
@ -276,3 +293,19 @@ hr {
-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