refactor all the things, switch to open sans
This commit is contained in:
Mark Otto
Родитель
d9ec7c1d77
Коммит
3ec0991776
|
|
@ -9,7 +9,7 @@
|
|||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
|
||||
<!-- Google Web Fonts -->
|
||||
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,500,700|Source+Sans+Pro:300,400,600,700">
|
||||
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,500,700|Open+Sans:300">
|
||||
|
||||
<link rel="stylesheet" href="/dist/ratchet.css">
|
||||
<link rel="stylesheet" href="/assets/css/docs.css">
|
||||
|
|
|
|||
|
|
@ -16,13 +16,43 @@ body {
|
|||
|
||||
body {
|
||||
position: relative !important;
|
||||
font: 14px/1.5 "Source Sans Pro",sans-serif;
|
||||
font: 300 14px/1.5 "Open Sans", sans-serif;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
.docs-content {
|
||||
font-size: 14px;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.docs-content {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.docs-content h1, .docs-content h2, .docs-content h3, .docs-content h4, .docs-content h5, .docs-content h6 {
|
||||
font-weight: 300;
|
||||
color: #222;
|
||||
}
|
||||
.docs-content h2 {
|
||||
margin-bottom: .25em;
|
||||
font-size: 2em;
|
||||
}
|
||||
.docs-content h3 {
|
||||
margin-bottom: .5em;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
.docs-content p {
|
||||
margin-bottom: 1.5em;
|
||||
font-size: 1em;
|
||||
color: #555;
|
||||
}
|
||||
.docs-content .lead {
|
||||
font-size: 1.1em;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.docs-header,
|
||||
.docs-sub-header {
|
||||
position: relative;
|
||||
|
|
@ -289,7 +319,6 @@ body {
|
|||
max-width: 750px;
|
||||
margin: 0 auto 20px;
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
color: #fff;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
|
@ -396,82 +425,12 @@ body {
|
|||
}
|
||||
}
|
||||
.docs-section {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
margin-bottom: 50px;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.section-heading,
|
||||
.section-lead {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
font-size: 22px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.section-lead {
|
||||
font-size: 18px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.section-heading {
|
||||
margin-top: 50px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.section-lead {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.docs-steps {
|
||||
margin-top: 20px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.step {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.step-title,
|
||||
.step-description {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.step-title code {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.step-description {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.step-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.step-title code {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.step-description {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.docs-module {
|
||||
margin-top: 35px;
|
||||
}
|
||||
}
|
||||
.docs-module {
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
|
|
@ -482,10 +441,6 @@ body {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.docs-module-title {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.version {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0;
|
||||
|
|
@ -620,7 +575,6 @@ body {
|
|||
}
|
||||
.docs-example-group .example-wrap h5 {
|
||||
margin-top: 10px;
|
||||
font-weight: 300;
|
||||
}
|
||||
.docs-example-group .example-wrap img {
|
||||
display: block;
|
||||
|
|
@ -662,14 +616,12 @@ code {
|
|||
.component-title {
|
||||
margin-bottom: 10px;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.component-description {
|
||||
margin-bottom: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.component-example {
|
||||
|
|
@ -726,7 +678,6 @@ code {
|
|||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
|
|
@ -883,7 +834,6 @@ code {
|
|||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ title: Components · Ratchet
|
|||
<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>
|
||||
<p class="page-description">Design patterns that serve as basic building blocks.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -35,7 +35,7 @@ title: Components · Ratchet
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column units-2 lg-units-7">
|
||||
<div class="column units-2 lg-units-7 docs-content">
|
||||
<!-- Bars -->
|
||||
<article class="component active" id="bars">
|
||||
<h3 class="component-title">Title bar</h3>
|
||||
|
|
|
|||
|
|
@ -20,46 +20,44 @@ title: Getting started · Ratchet
|
|||
|
||||
<div class="container">
|
||||
<div class="column-group">
|
||||
<div class="column units-2 lg-units-8">
|
||||
<ol class="docs-steps">
|
||||
<li class="step">
|
||||
<h3 class="step-title">1. Create your pages</h3>
|
||||
<p class="step-description">Use the <a href="/components" data-ignore="push">documentation</a> as a reference for all the available components and piece together the pages of your app. Be sure to look at the <a href="#pageLayout">basic page template</a> and <a href="/examples" data-ignore="push">example applications</a>. Make sure to add <code>ratchet-theme-ios.css</code> or <code>ratchet-theme-android.css</code> to your app's <code><head></code> if you have a specific platform in mind.</p>
|
||||
</li>
|
||||
<li class="step">
|
||||
<h3 class="step-title">2. Connect pages with push.js</h3>
|
||||
<p class="step-description">Read about <a href="/components/#push" data-ignore="push">push.js</a> then start connecting your pages. Push.js allows you to create a prototype that feels like a real app when you save it to your phone. (Need to have a server running).</p>
|
||||
</li>
|
||||
<li class="step">
|
||||
<h3 class="step-title">3. Save the prototype to your phone</h3>
|
||||
<p class="step-description">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>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2 class="section-heading">Page setup</h2>
|
||||
<p class="section-lead">Three simple rules for structuring your Ratchet pages</p>
|
||||
<ol class="docs-steps">
|
||||
<li class="step">
|
||||
<h3 class="step-title">1. Fixed bars come first</h3>
|
||||
<p class="step-description">All fixed bars (<code>.bar</code>) should always be the first thing in the <code><body></code> of the page. This is really important!</p>
|
||||
</li>
|
||||
<li class="step">
|
||||
<h3 class="step-title">2. Everything else goes in <code>.content</code></h3>
|
||||
<p class="step-description">Anything that's not a <code>.bar</code> should be put in a div with the class <code>.content</code>. Put this div after the bars in the <code><body></code> tag. The <code>.content</code> div is what actually scrolls in a Ratchet prototype.</p>
|
||||
</li>
|
||||
<li class="step">
|
||||
<h3 class="step-title">3. Don't forget your meta tags</h3>
|
||||
<p class="step-description">They're included in the template.html page included in the download, but make sure they stay in the page. They are important to Ratchet working just right.</p>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="column units-2 lg-units-8 docs-content">
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
<h2 id="pageLayout" class="section-heading">Basic template</h2>
|
||||
<p class="section-lead">Use this basic template to get your app started.</p>
|
||||
<div class="docs-section">
|
||||
<h2>Quick start</h2>
|
||||
<p class="lead">Quickly get up and running with a Ratchet prototype.</p>
|
||||
|
||||
<h3>1. Create your pages</h3>
|
||||
<p>Use the <a href="/components" data-ignore="push">documentation</a> as a reference for all the available components and piece together the pages of your app. Be sure to look at the <a href="#pageLayout">basic page template</a> and <a href="/examples" data-ignore="push">example applications</a>. Make sure to add <code>ratchet-theme-ios.css</code> or <code>ratchet-theme-android.css</code> to your app's <code><head></code> if you have a specific platform in mind.</p>
|
||||
|
||||
<h3>2. Connect pages with push.js</h3>
|
||||
<p>Read about <a href="/components/#push" data-ignore="push">push.js</a> then start connecting your pages. Push.js allows you to create a prototype that feels like a real app when you save it to your phone. (Need to have a server running).</p>
|
||||
|
||||
<h3>3. Save the prototype to your phone</h3>
|
||||
<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>Page setup</h2>
|
||||
<p class="lead">Three simple rules for structuring your Ratchet pages</p>
|
||||
<h3>1. Fixed bars come first</h3>
|
||||
<p>All fixed bars (<code>.bar</code>) should always be the first thing in the <code><body></code> of the page. This is really important!</p>
|
||||
|
||||
<h3>2. Everything else goes in <code>.content</code></h3>
|
||||
<p>Anything that's not a <code>.bar</code> should be put in a div with the class <code>.content</code>. Put this div after the bars in the <code><body></code> tag. The <code>.content</code> div is what actually scrolls in a Ratchet prototype.</p>
|
||||
|
||||
<h3>3. Don't forget your meta tags</h3>
|
||||
<p>They're included in the template.html page included in the download, but make sure they stay in the page. They are important to Ratchet working just right.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="compontent">
|
||||
<h2 id="pageLayout">Basic template</h2>
|
||||
<p class="lead">Use this basic template to get your app started.</p>
|
||||
{% highlight html %}
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
|
@ -79,7 +77,6 @@ title: Getting started · Ratchet
|
|||
|
||||
<!-- Include the compiled Ratchet JS -->
|
||||
<script src="ratchet.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -120,6 +117,7 @@ title: Getting started · Ratchet
|
|||
</body>
|
||||
</html>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column units-2 lg-units-4">
|
||||
|
|
|
|||
124
sass/docs.scss
124
sass/docs.scss
|
|
@ -14,13 +14,49 @@ body {
|
|||
}
|
||||
body {
|
||||
position: relative !important; // Overrides the fixed positioning of body in Ratchet
|
||||
font: 14px/1.5 "Source Sans Pro",sans-serif;
|
||||
font: 300 14px/1.5 "Open Sans", sans-serif;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
-webkit-font-smoothing: antialiased; // Fix for webkit rendering
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
// Typography
|
||||
//
|
||||
// Gets scoped to a common class in the docs so we don't collide with any of
|
||||
// Ratchet's styles.
|
||||
|
||||
.docs-content {
|
||||
font-size: 14px;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 300;
|
||||
color: #222;
|
||||
}
|
||||
h2 {
|
||||
margin-bottom: .25em;
|
||||
font-size: 2em;
|
||||
}
|
||||
h3 {
|
||||
margin-bottom: .5em;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1.5em;
|
||||
font-size: 1em;
|
||||
color: #555;
|
||||
}
|
||||
.lead {
|
||||
font-size: 1.1em;
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Jumbotron
|
||||
// --------------------------------------------------
|
||||
|
|
@ -287,7 +323,6 @@ body {
|
|||
max-width: 750px;
|
||||
margin: 0 auto 20px;
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
color: #fff;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
|
@ -401,79 +436,12 @@ body {
|
|||
// Content sections
|
||||
// --------------------------------------------------
|
||||
|
||||
// Wrap each section of the docs
|
||||
.docs-section {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
.section-heading,
|
||||
.section-lead {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.section-heading {
|
||||
font-size: 22px;
|
||||
font-weight: 300;
|
||||
}
|
||||
.section-lead {
|
||||
font-size: 18px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
// Desktop: Section headings
|
||||
@media screen and (min-width: 768px) {
|
||||
.section-heading {
|
||||
margin-top: 50px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 40px;
|
||||
}
|
||||
.section-lead {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Steps
|
||||
// --------------------------------------------------
|
||||
|
||||
.docs-steps {
|
||||
margin-top: 20px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.step {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.step-title,
|
||||
.step-description {
|
||||
font-weight: 300;
|
||||
}
|
||||
.step-title {
|
||||
font-size: 18px
|
||||
}
|
||||
.step-title code {
|
||||
font-size: 14px;
|
||||
}
|
||||
.step-description {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
// Desktop steps styles
|
||||
@media screen and (min-width: 768px) {
|
||||
.step-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
.step-title code {
|
||||
font-size: 18px;
|
||||
}
|
||||
.step-description {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
// Docs modules
|
||||
.docs-module {
|
||||
margin-top: 35px;
|
||||
}
|
||||
margin-bottom: 50px;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
// Docs modules
|
||||
|
|
@ -487,9 +455,6 @@ body {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.docs-module-title {
|
||||
font-weight: 300;
|
||||
}
|
||||
.version {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0;
|
||||
|
|
@ -637,7 +602,6 @@ body {
|
|||
}
|
||||
h5 {
|
||||
margin-top: 10px;
|
||||
font-weight: 300;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
|
|
@ -686,13 +650,11 @@ code {
|
|||
.component-title {
|
||||
margin-bottom: 10px;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
line-height: 34px;
|
||||
}
|
||||
.component-description {
|
||||
margin-bottom: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
}
|
||||
.component-example {
|
||||
font-family: $font-family-default;
|
||||
|
|
@ -742,7 +704,6 @@ code {
|
|||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.component-example-fullbleed,
|
||||
|
|
@ -910,7 +871,6 @@ code {
|
|||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
text-shadow: 0 0 10px rgba(0,0,0,.5);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче