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
Split 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">
<div class="container">
<div class="column units-2">
<div class="column">
<h1 class="docs-title">
<a href="/" data-ignore="push">Ratchet</a>
</h1>

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

@ -393,8 +393,7 @@ body {
.docs-sub-content {
position: relative;
overflow: hidden;
padding-top: 55px;
padding-bottom: 65px;
padding: 55px 15px 65px;
color: #fff;
text-align: center;
}
@ -824,10 +823,10 @@ code {
}
}
.device {
display: none;
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 17px;
line-height: 21px;
display: none;
}
@media screen and (min-width: 768px) {
@ -890,17 +889,10 @@ hr {
clear: both;
}
.column-group {
*zoom: 1;
}
.column-group:before,
.column-group:after {
.column-group:before, .column-group:after {
content: " ";
display: table;
line-height: 0;
content: "";
}
.column-group:after {
clear: both;
}
@ -921,6 +913,7 @@ hr {
padding-left: 15px;
padding-right: 15px;
float: left;
width: 100%;
}
.column.pull-right {
float: right;
@ -931,44 +924,12 @@ hr {
margin-right: -15px;
}
.units-1 {
width: 50%;
}
.units-2 {
width: 100%;
}
.offset-1 {
margin-left: 50%;
}
@media screen and (min-width: 768px) {
.container {
padding: 0;
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 {
width: 33.333%;
}
@ -977,10 +938,6 @@ hr {
width: 41.666%;
}
.lg-units-6 {
width: 50%;
}
.lg-units-7 {
width: 58.333%;
}
@ -988,66 +945,6 @@ hr {
.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%;
}
.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) {
.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">
{% include masthead.html %}
<div class="container">
<div class="column-group">
<div class="column units-2">
<div class="docs-sub-content">
<h2 class="page-title">Components</h2>
<p class="page-description">Design patterns that serve as basic building blocks.</p>
</div>
</div>
<div class="docs-sub-content">
<h2 class="page-title">Components</h2>
<p class="page-description">Design patterns that serve as basic building blocks.</p>
</div>
{% include ad.html %}
</div>
@ -22,7 +18,7 @@ title: Components &middot; Ratchet
<div class="container">
<!-- Components -->
<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 -->
<div class="device js-device">
<div class="device-content">
@ -35,7 +31,7 @@ title: Components &middot; Ratchet
</div>
</div>
<div class="column units-2 lg-units-7 docs-content">
<div class="column lg-units-7 docs-content">
<!-- Bars -->
<article class="component active" id="bars">
<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">
{% include masthead.html %}
<div class="container">
<div class="column-group">
<div class="column units-2">
<div class="docs-sub-content">
<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 class="docs-sub-content">
<h2 class="page-title">Examples</h2>
<p class="page-description">Take a look at some of these example apps built on Ratchet.</p>
</div>
{% include ad.html %}
</div>
@ -20,12 +16,12 @@ title: Examples &middot; Ratchet
<div class="container">
<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>
<div class="column-group">
<div class="column units-2 lg-units-4">
<div class="column lg-units-4">
<div class="example-wrap">
<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">
@ -33,7 +29,7 @@ title: Examples &middot; Ratchet
<h4 class="example-title">Movie finder</h4>
</div>
</div>
<div class="column units-2 lg-units-4">
<div class="column lg-units-4">
<div class="example-wrap">
<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">
@ -41,7 +37,7 @@ title: Examples &middot; Ratchet
<h4 class="example-title">iOS mail app</h4>
</div>
</div>
<div class="column units-2 lg-units-4">
<div class="column lg-units-4">
<div class="example-wrap">
<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">
@ -52,12 +48,12 @@ title: Examples &middot; Ratchet
</div>
</div>
<div class="column units-2 lg-units-4">
<div class="column lg-units-4">
{% include download-module.html %}
</div>
</div>
<div class="column units-2">
<div class="column">
<!-- Footer -->
{% include footer.html %}
</div>

18
docs/getting-started.html
Unescape View File

@ -6,13 +6,9 @@ title: Getting started &middot; Ratchet
<div class="docs-sub-header">
{% include masthead.html %}
<div class="container">
<div class="column-group">
<div class="column units-2">
<div class="docs-sub-content">
<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 class="docs-sub-content">
<h2 class="page-title">Getting started</h2>
<p class="page-description">Once you've downloaded Ratchet, here's what to do next.</p>
</div>
{% include ad.html %}
</div>
@ -20,7 +16,7 @@ title: Getting started &middot; Ratchet
<div class="container">
<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">
<h2>Quick start</h2>
<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>
</div>
<div class="docs-section">
<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>
@ -185,12 +179,12 @@ ratchet/
</div>
</div>
<div class="column units-2 lg-units-4">
<div class="column lg-units-4">
{% include download-module.html %}
</div>
</div>
<div class="column units-2">
<div class="column">
<!-- Footer -->
{% include footer.html %}
</div>

47
sass/docs.scss
Unescape View File

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