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

Merge pull request #404 from twbs/docs-cleanup 

Docs cleanup
pull/411/head
Connor Sears 11 years ago
parent
910d655a50 28f682616c
commit
d0a06855cc
7 changed files with 31 additions and 187 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. 2
      docs/_includes/masthead.html
  2. 113
      docs/assets/css/docs.css
  3. 2
      docs/assets/css/docs.min.css
  4. 14
      docs/components.html
  5. 22
      docs/examples.html
  6. 18
      docs/getting-started.html
  7. 47
      sass/docs.scss

2
docs/_includes/masthead.html
Unescape View File

@ -1,6 +1,6 @@
<header class="docs-masthead clearfix"> <header class="docs-masthead clearfix">
<div class="container"> <div class="container">
<div class="column units-2"> <div class="column">
<h1 class="docs-title"> <h1 class="docs-title">
<a href="/" data-ignore="push">Ratchet</a> <a href="/" data-ignore="push">Ratchet</a>
</h1> </h1>

113
docs/assets/css/docs.css
Unescape View File

@ -393,8 +393,7 @@ body {
.docs-sub-content { .docs-sub-content {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
padding-top: 55px; padding: 55px 15px 65px;
padding-bottom: 65px;
color: #fff; color: #fff;
text-align: center; text-align: center;
} }
@ -824,10 +823,10 @@ code {
} }
} }
.device { .device {
display: none;
font-family: "Helvetica Neue", Helvetica, sans-serif; font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 17px; font-size: 17px;
line-height: 21px; line-height: 21px;
display: none;
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
@ -890,17 +889,10 @@ hr {
clear: both; clear: both;
} }
.column-group { .column-group:before, .column-group:after {
*zoom: 1; content: " ";
}
.column-group:before,
.column-group:after {
display: table; display: table;
line-height: 0;
content: "";
} }
.column-group:after { .column-group:after {
clear: both; clear: both;
} }
@ -921,6 +913,7 @@ hr {
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
float: left; float: left;
width: 100%;
} }
.column.pull-right { .column.pull-right {
float: right; float: right;
@ -931,44 +924,12 @@ hr {
margin-right: -15px; margin-right: -15px;
} }
.units-1 {
width: 50%;
}
.units-2 {
width: 100%;
}
.offset-1 {
margin-left: 50%;
}
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.container { .container {
padding: 0; padding: 0;
max-width: 940px; max-width: 940px;
} }
.units-1 {
width: 50%;
}
.units-2 {
width: 100%;
}
.lg-units-1 {
width: 8.333%;
}
.lg-units-2 {
width: 16.666%;
}
.lg-units-3 {
width: 25%;
}
.lg-units-4 { .lg-units-4 {
width: 33.333%; width: 33.333%;
} }
@ -977,10 +938,6 @@ hr {
width: 41.666%; width: 41.666%;
} }
.lg-units-6 {
width: 50%;
}
.lg-units-7 { .lg-units-7 {
width: 58.333%; width: 58.333%;
} }
@ -988,66 +945,6 @@ hr {
.lg-units-8 { .lg-units-8 {
width: 66.666%; width: 66.666%;
} }
.lg-units-9 {
width: 75%;
}
.lg-units-10 {
width: 83.333%;
}
.lg-units-11 {
width: 91.666%;
}
.lg-units-12 {
width: 100%;
}
.lg-offset-1 {
margin-left: 8.333%;
}
.lg-offset-2 {
margin-left: 16.666%;
}
.lg-offset-3 {
margin-left: 25%;
}
.lg-offset-4 {
margin-left: 33.333%;
}
.lg-offset-5 {
margin-left: 41.666%;
}
.lg-offset-6 {
margin-left: 50%;
}
.lg-offset-7 {
margin-left: 58.333%;
}
.lg-offset-8 {
margin-left: 66.666%;
}
.lg-offset-9 {
margin-left: 75%;
}
.lg-offset-10 {
margin-left: 83.333%;
}
.lg-offset-11 {
margin-left: 91.666%;
}
} }
@media screen and (min-width: 1200px) { @media screen and (min-width: 1200px) {
.container { .container {

2
docs/assets/css/docs.min.css vendored
View File

File diff suppressed because one or more lines are too long

14
docs/components.html
Unescape View File

@ -6,13 +6,9 @@ title: Components &middot; Ratchet
<div class="docs-sub-header"> <div class="docs-sub-header">
{% include masthead.html %} {% include masthead.html %}
<div class="container"> <div class="container">
<div class="column-group"> <div class="docs-sub-content">
<div class="column units-2"> <h2 class="page-title">Components</h2>
<div class="docs-sub-content"> <p class="page-description">Design patterns that serve as basic building blocks.</p>
<h2 class="page-title">Components</h2>
<p class="page-description">Design patterns that serve as basic building blocks.</p>
</div>
</div>
</div> </div>
{% include ad.html %} {% include ad.html %}
</div> </div>
@ -22,7 +18,7 @@ title: Components &middot; Ratchet
<div class="container"> <div class="container">
<!-- Components --> <!-- Components -->
<div class="docs-components column-group"> <div class="docs-components column-group">
<div class="device-column column units-2 lg-units-5 pull-right"> <div class="device-column column lg-units-5 pull-right">
<!-- In phone examples --> <!-- In phone examples -->
<div class="device js-device"> <div class="device js-device">
<div class="device-content"> <div class="device-content">
@ -35,7 +31,7 @@ title: Components &middot; Ratchet
</div> </div>
</div> </div>
<div class="column units-2 lg-units-7 docs-content"> <div class="column lg-units-7 docs-content">
<!-- Bars --> <!-- Bars -->
<article class="component active" id="bars"> <article class="component active" id="bars">
<h3 class="component-title">Title bar</h3> <h3 class="component-title">Title bar</h3>

22
docs/examples.html
Unescape View File

@ -6,13 +6,9 @@ title: Examples &middot; Ratchet
<div class="docs-sub-header"> <div class="docs-sub-header">
{% include masthead.html %} {% include masthead.html %}
<div class="container"> <div class="container">
<div class="column-group"> <div class="docs-sub-content">
<div class="column units-2"> <h2 class="page-title">Examples</h2>
<div class="docs-sub-content"> <p class="page-description">Take a look at some of these example apps built on Ratchet.</p>
<h2 class="page-title">Examples</h2>
<p class="page-description">Take a look at some of these example apps built on Ratchet.</p>
</div>
</div>
</div> </div>
{% include ad.html %} {% include ad.html %}
</div> </div>
@ -20,12 +16,12 @@ title: Examples &middot; Ratchet
<div class="container"> <div class="container">
<div class="column-group"> <div class="column-group">
<div class="column units-2 lg-units-8 docs-examples docs-content"> <div class="column lg-units-8 docs-examples docs-content">
<p class="lead">Checkout out the examples on a desktop browser or visit on your mobile device see the apps as intended.</p> <p class="lead">Checkout out the examples on a desktop browser or visit on your mobile device see the apps as intended.</p>
<div class="column-group"> <div class="column-group">
<div class="column units-2 lg-units-4"> <div class="column lg-units-4">
<div class="example-wrap"> <div class="example-wrap">
<a class="example" href="/examples/app-movies" data-ignore="push"> <a class="example" href="/examples/app-movies" data-ignore="push">
<img src="/assets/img/example.png" alt="Movie finder app example" width="640" height="480"> <img src="/assets/img/example.png" alt="Movie finder app example" width="640" height="480">
@ -33,7 +29,7 @@ title: Examples &middot; Ratchet
<h4 class="example-title">Movie finder</h4> <h4 class="example-title">Movie finder</h4>
</div> </div>
</div> </div>
<div class="column units-2 lg-units-4"> <div class="column lg-units-4">
<div class="example-wrap"> <div class="example-wrap">
<a class="example" href="/examples/app-ios-mail" data-ignore="push"> <a class="example" href="/examples/app-ios-mail" data-ignore="push">
<img src="/assets/img/example-ios.png" alt="iOS mail app example" width="640" height="480"> <img src="/assets/img/example-ios.png" alt="iOS mail app example" width="640" height="480">
@ -41,7 +37,7 @@ title: Examples &middot; Ratchet
<h4 class="example-title">iOS mail app</h4> <h4 class="example-title">iOS mail app</h4>
</div> </div>
</div> </div>
<div class="column units-2 lg-units-4"> <div class="column lg-units-4">
<div class="example-wrap"> <div class="example-wrap">
<a class="example" href="/examples/app-android-notes" data-ignore="push"> <a class="example" href="/examples/app-android-notes" data-ignore="push">
<img src="/assets/img/example-android.png" alt="Android notes app example" width="640" height="480"> <img src="/assets/img/example-android.png" alt="Android notes app example" width="640" height="480">
@ -52,12 +48,12 @@ title: Examples &middot; Ratchet
</div> </div>
</div> </div>
<div class="column units-2 lg-units-4"> <div class="column lg-units-4">
{% include download-module.html %} {% include download-module.html %}
</div> </div>
</div> </div>
<div class="column units-2"> <div class="column">
<!-- Footer --> <!-- Footer -->
{% include footer.html %} {% include footer.html %}
</div> </div>

18
docs/getting-started.html
Unescape View File

@ -6,13 +6,9 @@ title: Getting started &middot; Ratchet
<div class="docs-sub-header"> <div class="docs-sub-header">
{% include masthead.html %} {% include masthead.html %}
<div class="container"> <div class="container">
<div class="column-group"> <div class="docs-sub-content">
<div class="column units-2"> <h2 class="page-title">Getting started</h2>
<div class="docs-sub-content"> <p class="page-description">Once you've downloaded Ratchet, here's what to do next.</p>
<h2 class="page-title">Getting started</h2>
<p class="page-description">Once you've downloaded Ratchet, here's what to do next.</p>
</div>
</div>
</div> </div>
{% include ad.html %} {% include ad.html %}
</div> </div>
@ -20,7 +16,7 @@ title: Getting started &middot; Ratchet
<div class="container"> <div class="container">
<div class="column-group"> <div class="column-group">
<div class="column units-2 lg-units-8 docs-content"> <div class="column lg-units-8 docs-content">
<div class="docs-section"> <div class="docs-section">
<h2>Quick start</h2> <h2>Quick start</h2>
<p class="lead">Quickly get up and running with a Ratchet prototype.</p> <p class="lead">Quickly get up and running with a Ratchet prototype.</p>
@ -35,8 +31,6 @@ title: Getting started &middot; Ratchet
<p>There are <a href="https://groups.google.com/forum/#!topic/goratchet/IboE6SCMAyw" data-ignore="push">a few ways to do this</a>, but the simplest is to run a local server on your computer, point Safari on your iPhone to your computer, then click the <span class="icon icon-share"></span> button and "Add to Home Screen". For Android, check out <a href="https://developers.google.com/chrome/mobile/docs/installtohomescreen" data-ignore="push">this guide</a>.</p> <p>There are <a href="https://groups.google.com/forum/#!topic/goratchet/IboE6SCMAyw" data-ignore="push">a few ways to do this</a>, but the simplest is to run a local server on your computer, point Safari on your iPhone to your computer, then click the <span class="icon icon-share"></span> button and "Add to Home Screen". For Android, check out <a href="https://developers.google.com/chrome/mobile/docs/installtohomescreen" data-ignore="push">this guide</a>.</p>
</div> </div>
<div class="docs-section"> <div class="docs-section">
<h2>What's included</h2> <h2>What's included</h2>
<p class="lead">Ratchet is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p> <p class="lead">Ratchet is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>
@ -185,12 +179,12 @@ ratchet/
</div> </div>
</div> </div>
<div class="column units-2 lg-units-4"> <div class="column lg-units-4">
{% include download-module.html %} {% include download-module.html %}
</div> </div>
</div> </div>
<div class="column units-2"> <div class="column">
<!-- Footer --> <!-- Footer -->
{% include footer.html %} {% include footer.html %}
</div> </div>

47
sass/docs.scss
Unescape View File

@ -397,8 +397,7 @@ body {
.docs-sub-content { .docs-sub-content {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
padding-top: 55px; // Visually centers the content. padding: 55px 15px 65px;
padding-bottom: 65px; // Visually centers the content.
color: #fff; color: #fff;
text-align: center; text-align: center;
@ -863,10 +862,10 @@ code {
// -------------------------------------------------- // --------------------------------------------------
.device { .device {
display: none;
font-family: $font-family-default; font-family: $font-family-default;
font-size: $font-size-default; font-size: $font-size-default;
line-height: $line-height-default; line-height: $line-height-default;
display: none;
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.device { .device {
@ -930,16 +929,7 @@ hr {
} }
.column-group { .column-group {
*zoom: 1; @include clearfix;
}
.column-group:before,
.column-group:after {
display: table;
line-height: 0;
content: "";
}
.column-group:after {
clear: both;
} }
@ -960,6 +950,7 @@ hr {
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
float: left; float: left;
width: 100%;
&.pull-right { &.pull-right {
float: right; float: right;
@ -970,11 +961,6 @@ hr {
margin-left: -15px; margin-left: -15px;
margin-right: -15px; margin-right: -15px;
} }
.units-1 { width: 50%; }
.units-2 { width: 100%; }
// Offsets
.offset-1 { margin-left: 50%; }
// Tablet to desktop // Tablet to desktop
@ -986,36 +972,11 @@ hr {
max-width: 940px; max-width: 940px;
} }
// Override the mobile grid
.units-1 { width: 50%; }
.units-2 { width: 100%; }
// Twelve column fluid grid // Twelve column fluid grid
.lg-units-1 { width: 8.333%; }
.lg-units-2 { width: 16.666%; }
.lg-units-3 { width: 25%; }
.lg-units-4 { width: 33.333%; } .lg-units-4 { width: 33.333%; }
.lg-units-5 { width: 41.666%; } .lg-units-5 { width: 41.666%; }
.lg-units-6 { width: 50%; }
.lg-units-7 { width: 58.333%; } .lg-units-7 { width: 58.333%; }
.lg-units-8 { width: 66.666%; } .lg-units-8 { width: 66.666%; }
.lg-units-9 { width: 75%; }
.lg-units-10 { width: 83.333%; }
.lg-units-11 { width: 91.666%; }
.lg-units-12 { width: 100%; }
// Offsets
.lg-offset-1 { margin-left: 8.333%; }
.lg-offset-2 { margin-left: 16.666%; }
.lg-offset-3 { margin-left: 25%; }
.lg-offset-4 { margin-left: 33.333%; }
.lg-offset-5 { margin-left: 41.666%; }
.lg-offset-6 { margin-left: 50%; }
.lg-offset-7 { margin-left: 58.333%; }
.lg-offset-8 { margin-left: 66.666%; }
.lg-offset-9 { margin-left: 75%; }
.lg-offset-10 { margin-left: 83.333%; }
.lg-offset-11 { margin-left: 91.666%; }
} }

Write Preview
Loading…
Cancel
Save