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>
|
||||
|
|
@ -21,7 +21,7 @@ title: Components · Ratchet
|
|||
|
||||
<div class="container">
|
||||
<!-- 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">
|
||||
<!-- In phone examples -->
|
||||
<div class="device js-device">
|
||||
|
|
@ -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>
|
||||
|
|
@ -1074,7 +1074,7 @@ document
|
|||
<h3 class="component-title">Popovers</h3>
|
||||
|
||||
{% highlight html %}
|
||||
<div id="popover" class="popover">
|
||||
<div id="popover" class="popover">
|
||||
<header class="bar bar-nav">
|
||||
<h1 class="title">Popover title</h1>
|
||||
</header>
|
||||
|
|
@ -1095,7 +1095,7 @@ document
|
|||
|
||||
{% highlight html %}
|
||||
<header class="bar bar-nav">
|
||||
<a href="#myPopover">
|
||||
<a href="#myPopover">
|
||||
<h1 class="title">
|
||||
Tap title
|
||||
<span class="icon icon-caret"></span>
|
||||
|
|
@ -1105,7 +1105,7 @@ document
|
|||
{% endhighlight %}
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
<!-- Modals -->
|
||||
<article class="component" id="modals">
|
||||
<h3 class="component-title">Modals</h3>
|
||||
|
|
@ -1117,7 +1117,7 @@ document
|
|||
<a class="icon icon-close pull-right" href="#myModalexample"></a>
|
||||
<h1 class="title">Modal mobile</h1>
|
||||
</header>
|
||||
|
||||
|
||||
<p class="content-padded">The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1129,7 +1129,7 @@ document
|
|||
<a class="icon icon-close pull-right" href="#myModalexample"></a>
|
||||
<h1 class="title">Modal</h1>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="content">
|
||||
<p class="content-padded">The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
|
||||
</div>
|
||||
|
|
@ -1363,7 +1363,7 @@ window.addEventListener('push', myFunction);
|
|||
{% endhighlight %}
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
<!-- Footer -->
|
||||
{% include footer.html %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче