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

Merge branch 'master' into optimize_docs_fonts 

Conflicts:
	docs/_includes/header.html
	docs/getting-started.html
	sass/docs.scss
pull/359/head
Mark Otto 11 years ago
parent
3ec0991776 d89f8305bb
commit
84a532eda2
42 changed files with 539 additions and 365 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. 19
      .gitignore
  2. 11
      .travis.yml
  3. 38
      Gruntfile.js
  4. 2
      README.md
  5. 15
      dist/ratchet-theme-android.css
  6. 18
      dist/ratchet.css
  7. 2
      dist/ratchet.min.css
  8. 10
      dist/template.html
  9. 24
      docs/_includes/footer.html
  10. 10
      docs/_includes/header.html
  11. 43
      docs/assets/css/docs.css
  12. 9
      docs/assets/css/docs.min.css
  13. 66
      docs/assets/css/pygments-manni.css
  14. 61
      docs/assets/css/pygments.css
  15. BIN
      docs/assets/img/android.png
  16. BIN
      docs/assets/img/device-sprite.png
  17. BIN
      docs/assets/img/iphone5c.png
  18. BIN
      docs/assets/img/iphone5s.png
  19. BIN
      docs/assets/img/slide-1.jpg
  20. BIN
      docs/assets/img/slide-1.png
  21. BIN
      docs/assets/img/slide-2.jpg
  22. BIN
      docs/assets/img/slide-2.png
  23. BIN
      docs/assets/img/slide-3.jpg
  24. BIN
      docs/assets/img/slide-3.png
  25. 10
      docs/assets/js/docs.min.js
  26. 281
      docs/components.html
  27. 15
      docs/dist/ratchet-theme-android.css
  28. 18
      docs/dist/ratchet.css
  29. 2
      docs/dist/ratchet.min.css
  30. 10
      docs/dist/template.html
  31. 2
      docs/examples.html
  32. 75
      docs/examples/app-android-notes/index.html
  33. 30
      docs/examples/app-ios-mail/inbox.html
  34. 14
      docs/examples/app-ios-mail/index.html
  35. 28
      docs/examples/app-movies/index.html
  36. 21
      docs/getting-started.html
  37. 11
      package.json
  38. 2
      sass/buttons.scss
  39. 32
      sass/docs.scss
  40. 6
      sass/push.scss
  41. 2
      sass/table-views.scss
  42. 17
      sass/theme-android.scss

19
.gitignore vendored
Unescape View File

@ -1,3 +1,9 @@
# Ignore docs files
_gh_pages
_site
.ruby-version
.sass-cache
# Numerous always-ignore extensions
*.diff
*.err
@ -9,7 +15,6 @@
*.zip
*.vi
*~
*.sass-cache
# OS or Editor folders
.DS_Store
@ -23,16 +28,16 @@ Thumbs.db
nbproject
*.sublime-project
*.sublime-workspace
.idea
# Komodo
*.komodoproject
.komodotools
# Folders to ignore
.idea
node_modules
_site
# grunt-html-validation
validation-report.json
validation-status.json
validation-report.json
# Folders to ignore
node_modules
bower_components

11
.travis.yml
Unescape View File

@ -0,0 +1,11 @@
language: node_js
node_js:
- "0.10"
before_install:
- rvm use 1.9.3
install:
- npm install -g grunt-cli
- npm install
- gem install --no-document jekyll sass
matrix:
fast_finish: true

38
Gruntfile.js
Unescape View File

@ -80,26 +80,45 @@ module.exports = function(grunt) {
},
cssmin: {
minify: {
options: {
banner: '', // set to empty; see bellow
keepSpecialComments: '*', // set to '*' because we already add the banner in sass
report: 'min'
},
ratchet: {
src: '<%= meta.distPath %><%= pkg.name %>.css',
dest: '<%= meta.distPath %><%= pkg.name %>.min.css'
},
docs: {
options: {
banner: '', // set to empty ; see bellow
keepSpecialComments: '*', // set to '*' because we already add the banner in sass
report: 'min'
noAdvanced: true // disable advanced optimizations since it causes code highlighting not to work
},
files: {
'dist/<%= pkg.name %>.min.css': 'dist/<%= pkg.name %>.css'
}
src: [
'<%= meta.docsAssetsPath %>css/docs.css',
'<%= meta.docsAssetsPath %>css/pygments-manni.css'
],
dest: '<%= meta.docsAssetsPath %>css/docs.min.css'
}
},
uglify: {
options: {
banner: '<%= banner %>',
compress: true,
mangle: true,
preserveComments: false,
report: 'min'
},
ratchet: {
src: 'dist/<%= pkg.name %>.js',
dest: 'dist/<%= pkg.name %>.min.js'
src: '<%= meta.distPath %><%= pkg.name %>.js',
dest: '<%= meta.distPath %><%= pkg.name %>.min.js'
},
docs: {
src: [
'<%= meta.docsAssetsPath %>js/docs.js',
'<%= meta.docsAssetsPath %>js/fingerblast.js'
],
dest: '<%= meta.docsAssetsPath %>js/docs.min.js'
}
},
@ -156,6 +175,7 @@ module.exports = function(grunt) {
grunt.registerTask('validate-html', ['jekyll', 'validation']);
grunt.registerTask('default', ['dist']);
grunt.registerTask('build', ['dist']);
grunt.registerTask('test', ['dist', 'validate-html']);
// Version numbering task.
// grunt change-version-number --oldver=A.B.C --newver=X.Y.Z

2
README.md
Unescape View File

@ -1,4 +1,4 @@
# Ratchet v2.0.0 [![devDependencies](https://david-dm.org/twbs/ratchet/dev-status.png?theme=shields.io)](https://david-dm.org/twbs/ratchet#info=devDependencies)
# Ratchet v2.0.0 [![Build Status](https://secure.travis-ci.org/twbs/ratchet.png)](http://travis-ci.org/twbs/ratchet) [![devDependencies](https://david-dm.org/twbs/ratchet/dev-status.png?theme=shields.io)](https://david-dm.org/twbs/ratchet#info=devDependencies)
Build mobile apps with simple HTML, CSS, and JS components.

15
dist/ratchet-theme-android.css vendored
Unescape View File

@ -30,12 +30,21 @@ a:active {
padding-top: 50px;
}
.bar-header-secondary ~ .content {
padding-top: 100px;
}
.bar-tab ~ .content {
padding-top: 50px;
padding-bottom: 0;
}
.bar-footer ~ .content {
padding-bottom: 50px;
}
.bar-header-secondary ~ .content {
padding-top: 100px;
.bar-footer-secondary ~ .content {
padding-bottom: 100px;
}
.btn {
@ -525,10 +534,12 @@ textarea,
content: "On";
}
.navigate-left:after,
.push-left:after {
content: '';
}
.navigate-right:after,
.push-right:after {
content: '';
}

18
dist/ratchet.css vendored
Unescape View File

@ -367,6 +367,7 @@ p {
color: #333;
text-align: center;
vertical-align: top;
white-space: nowrap;
cursor: pointer;
background-color: white;
border: 1px solid #ccc;
@ -443,6 +444,7 @@ p {
.btn-block {
display: block;
width: 100%;
padding: 15px 0;
margin-bottom: 10px;
font-size: 18px;
@ -785,12 +787,24 @@ input[type="button"] {
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.table-view-cell .navigate-left > .btn,
.table-view-cell .navigate-left > .badge,
.table-view-cell .navigate-left > .toggle,
.table-view-cell .navigate-right > .btn,
.table-view-cell .navigate-right > .badge,
.table-view-cell .navigate-right > .toggle,
.table-view-cell .push-left > .btn,
.table-view-cell .push-left > .badge,
.table-view-cell .push-left > .toggle,
.table-view-cell .push-right > .btn,
.table-view-cell .push-right > .badge,
.table-view-cell .push-right > .toggle,
.table-view-cell > a .navigate-left > .btn,
.table-view-cell > a .navigate-left > .badge,
.table-view-cell > a .navigate-left > .toggle,
.table-view-cell > a .navigate-right > .btn,
.table-view-cell > a .navigate-right > .badge,
.table-view-cell > a .navigate-right > .toggle,
.table-view-cell > a .push-left > .btn,
.table-view-cell > a .push-left > .badge,
.table-view-cell > a .push-left > .toggle,
@ -1204,6 +1218,8 @@ select {
transform: translate3d(100%, 0, 0);
}
.navigate-left:after,
.navigate-right:after,
.push-left:after,
.push-right:after {
position: absolute;
@ -1220,11 +1236,13 @@ select {
transform: translateY(-50%);
}
.navigate-left:after,
.push-left:after {
left: 15px;
content: '\e822';
}
.navigate-right:after,
.push-right:after {
right: 15px;
content: '\e826';

2
dist/ratchet.min.css vendored
View File

File diff suppressed because one or more lines are too long

10
dist/template.html vendored
Unescape View File

@ -10,7 +10,7 @@
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Set a shorter title for iOS6 devices when saved to home screen -->
<meta name="apple-mobile-web-app-title" content="Ratchet">
@ -47,22 +47,22 @@
<div class="card">
<ul class="table-view">
<li class="table-view-cell">
<a class="push-right" href="http://goratchet.com">
<a class="navigate-right" href="http://goratchet.com">
<strong>Ratchet documentation</strong>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="https://github.com/twbs/ratchet/">
<a class="navigate-right" href="https://github.com/twbs/ratchet/">
<strong>Ratchet on Github</strong>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="https://groups.google.com/forum/#!forum/goratchet">
<a class="navigate-right" href="https://groups.google.com/forum/#!forum/goratchet">
<strong>Ratchet Google group</strong>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="https://www.twitter.com/GoRatchet">
<a class="navigate-right" href="https://www.twitter.com/GoRatchet">
<strong>Ratchet on Twitter</strong>
</a>
</li>

24
docs/_includes/footer.html
Unescape View File

@ -6,11 +6,9 @@
</li>
<li>
<a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://goratchet.com" data-text="Ratchet &#8211; Build mobile apps with simple HTML, CSS, and JS components." data-via="GoRatchet">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</li>
<li><a data-ignore="push" href="https://twitter.com/GoRatchet" class="twitter-follow-button" data-show-count="true">
Follow @GoRatchet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</li>
</ul>
@ -26,3 +24,25 @@
<li><a href="http://goratchet.com/1.0.2/" data-ignore="push">Legacy v1.0.2 Docs</a></li>
</ul>
</div>
{% comment %}
Inject Twitter widgets asynchronously. Snippet snipped from Twitter's
JS interface site: https://dev.twitter.com/docs/tfw-javascript
* "js.async=1;" added to add async attribute to the generated script tag.
{% endcomment %}
<script>
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.async=1;
js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/dist/ratchet.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="//use.typekit.net/asj6ttm.js"></script>
<script>try{Typekit.load();}catch(e){}</script>

10
docs/_includes/header.html
Unescape View File

@ -11,9 +11,8 @@
<!-- Google Web Fonts -->
<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">
<link rel="stylesheet" href="/assets/css/pygments.css">
<link rel="stylesheet" href="/dist/ratchet.min.css">
<link rel="stylesheet" href="/assets/css/docs.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
@ -23,11 +22,6 @@
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/img/apple-touch-icon-114x114.png">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/dist/ratchet.js"></script>
<script src="/assets/js/docs.js"></script>
<script src="/assets/js/fingerblast.js"></script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36050008-1']);

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

@ -296,7 +296,7 @@ body {
}
.docs-header-content .btn {
display: block;
padding: 15px 60px 16px;
padding: 15px 90px 16px;
font-size: 18px;
margin-bottom: 0;
color: #0a1855;
@ -425,12 +425,20 @@ body {
}
}
.docs-section {
margin-bottom: 50px;
padding-top: 50px;
padding-bottom: 50px;
border-bottom: 1px solid #ddd;
}
.docs-section:last-child {
border-bottom: 0;
}
@media screen and (min-width: 768px) {
.docs-module {
margin-top: 35px;
}
}
.docs-module {
margin-top: 20px;
padding: 20px;
@ -662,12 +670,14 @@ code {
}
.component-example .slider {
height: 200px;
height: 300px;
}
.component-example .slider .slide {
height: 300px;
}
.component-example .slide img {
width: 100%;
height: 200px;
}
.component-example .slide-text {
@ -766,7 +776,8 @@ code {
}
#blockButtonsInDevice .btn-block {
margin: 10px;
width: 300px;
margin: 10px auto;
}
#segmentedControlsInDevice .segmented-control {
@ -853,9 +864,10 @@ code {
height: 813px;
margin-left: -20px;
font-family: "Helvetica Neue", sans-serif;
background-image: url("../img/iphone5c.png");
background-size: 100%;
background-image: url("../img/device-sprite.png");
background-size: 300%;
background-repeat: no-repeat;
background-position: 0 0;
-webkit-transition: background-image 0.1s linear;
-moz-transition: background-image 0.1s linear;
transition: background-image 0.1s linear;
@ -1516,7 +1528,7 @@ hr {
transform: translate3d(-20%, 0, 0);
}
.platform-ios .device {
background-image: url("../img/iphone5s.png");
background-position: -395px 0;
}
.platform-ios .device .device-content {
background-color: #efeff4;
@ -1540,11 +1552,18 @@ hr {
.platform-android .bar-nav ~ .content {
padding-top: 50px;
}
.platform-android .bar-header-secondary ~ .content {
padding-top: 100px;
}
.platform-android .bar-tab ~ .content {
padding-top: 50px;
padding-bottom: 0;
}
.platform-android .bar-footer ~ .content {
padding-bottom: 50px;
}
.platform-android .bar-header-secondary ~ .content {
padding-top: 100px;
.platform-android .bar-footer-secondary ~ .content {
padding-bottom: 100px;
}
.platform-android .btn {
padding: 8px 15px;
@ -1995,9 +2014,11 @@ hr {
color: #fff;
content: "On";
}
.platform-android .navigate-left:after,
.platform-android .push-left:after {
content: '';
}
.platform-android .navigate-right:after,
.platform-android .push-right:after {
content: '';
}
@ -2037,7 +2058,7 @@ hr {
}
.platform-android .device {
font-family: 'Roboto', sans-serif;
background-image: url("../img/android.png");
background-position: -790px 0;
}
.platform-android .device .device-content {
font-size: 18px;

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

File diff suppressed because one or more lines are too long

66
docs/assets/css/pygments-manni.css
Unescape View File

@ -0,0 +1,66 @@
.hll { background-color: #ffffcc }
/*{ background: #f0f3f3; }*/
.c { color: #999; } /* Comment */
.err { color: #AA0000; background-color: #FFAAAA } /* Error */
.k { color: #006699; } /* Keyword */
.o { color: #555555 } /* Operator */
.cm { color: #999; } /* Comment.Multiline */ /* Edited to remove italics and make into comment */
.cp { color: #009999 } /* Comment.Preproc */
.c1 { color: #999; } /* Comment.Single */
.cs { color: #999; } /* Comment.Special */
.gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */
.ge { font-style: italic } /* Generic.Emph */
.gr { color: #FF0000 } /* Generic.Error */
.gh { color: #003300; } /* Generic.Heading */
.gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */
.go { color: #AAAAAA } /* Generic.Output */
.gp { color: #000099; } /* Generic.Prompt */
.gs { } /* Generic.Strong */
.gu { color: #003300; } /* Generic.Subheading */
.gt { color: #99CC66 } /* Generic.Traceback */
.kc { color: #006699; } /* Keyword.Constant */
.kd { color: #006699; } /* Keyword.Declaration */
.kn { color: #006699; } /* Keyword.Namespace */
.kp { color: #006699 } /* Keyword.Pseudo */
.kr { color: #006699; } /* Keyword.Reserved */
.kt { color: #007788; } /* Keyword.Type */
.m { color: #FF6600 } /* Literal.Number */
.s { color: #d44950 } /* Literal.String */
.na { color: #4f9fcf } /* Name.Attribute */
.nb { color: #336666 } /* Name.Builtin */
.nc { color: #00AA88; } /* Name.Class */
.no { color: #336600 } /* Name.Constant */
.nd { color: #9999FF } /* Name.Decorator */
.ni { color: #999999; } /* Name.Entity */
.ne { color: #CC0000; } /* Name.Exception */
.nf { color: #CC00FF } /* Name.Function */
.nl { color: #9999FF } /* Name.Label */
.nn { color: #00CCFF; } /* Name.Namespace */
.nt { color: #2f6f9f; } /* Name.Tag */
.nv { color: #003333 } /* Name.Variable */
.ow { color: #000000; } /* Operator.Word */
.w { color: #bbbbbb } /* Text.Whitespace */
.mf { color: #FF6600 } /* Literal.Number.Float */
.mh { color: #FF6600 } /* Literal.Number.Hex */
.mi { color: #FF6600 } /* Literal.Number.Integer */
.mo { color: #FF6600 } /* Literal.Number.Oct */
.sb { color: #CC3300 } /* Literal.String.Backtick */
.sc { color: #CC3300 } /* Literal.String.Char */
.sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */
.s2 { color: #CC3300 } /* Literal.String.Double */
.se { color: #CC3300; } /* Literal.String.Escape */
.sh { color: #CC3300 } /* Literal.String.Heredoc */
.si { color: #AA0000 } /* Literal.String.Interpol */
.sx { color: #CC3300 } /* Literal.String.Other */
.sr { color: #33AAAA } /* Literal.String.Regex */
.s1 { color: #CC3300 } /* Literal.String.Single */
.ss { color: #FFCC33 } /* Literal.String.Symbol */
.bp { color: #336666 } /* Name.Builtin.Pseudo */
.vc { color: #003333 } /* Name.Variable.Class */
.vg { color: #003333 } /* Name.Variable.Global */
.vi { color: #003333 } /* Name.Variable.Instance */
.il { color: #FF6600 } /* Literal.Number.Integer.Long */
.css .o,
.css .o + .nt,
.css .nt + .nt { color: #999; }

61
docs/assets/css/pygments.css
Unescape View File

@ -1,61 +0,0 @@
.hll { background-color: #ffffcc }
.c { color: #999988; font-style: italic } /* Comment */
.err { color: #a61717; background-color: #e3d2d2 } /* Error */
.k { color: #000000; font-weight: bold } /* Keyword */
.o { color: #000000; font-weight: bold } /* Operator */
.cm { color: #999988; font-style: italic } /* Comment.Multiline */
.cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
.c1 { color: #999988; font-style: italic } /* Comment.Single */
.cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.ge { color: #000000; font-style: italic } /* Generic.Emph */
.gr { color: #aa0000 } /* Generic.Error */
.gh { color: #999999 } /* Generic.Heading */
.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.go { color: #888888 } /* Generic.Output */
.gp { color: #555555 } /* Generic.Prompt */
.gs { font-weight: bold } /* Generic.Strong */
.gu { color: #aaaaaa } /* Generic.Subheading */
.gt { color: #aa0000 } /* Generic.Traceback */
.kc { color: #000000; font-weight: bold } /* Keyword.Constant */
.kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
.kt { color: #445588; font-weight: bold } /* Keyword.Type */
.m { color: #009999 } /* Literal.Number */
.s { color: #d01040 } /* Literal.String */
.na { color: #008080 } /* Name.Attribute */
.nb { color: #0086B3 } /* Name.Builtin */
.nc { color: #445588; font-weight: bold } /* Name.Class */
.no { color: #008080 } /* Name.Constant */
.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
.ni { color: #800080 } /* Name.Entity */
.ne { color: #990000; font-weight: bold } /* Name.Exception */
.nf { color: #990000; font-weight: bold } /* Name.Function */
.nl { color: #990000; font-weight: bold } /* Name.Label */
.nn { color: #555555 } /* Name.Namespace */
.nt { color: #000080 } /* Name.Tag */
.nv { color: #008080 } /* Name.Variable */
.ow { color: #000000; font-weight: bold } /* Operator.Word */
.w { color: #bbbbbb } /* Text.Whitespace */
.mf { color: #009999 } /* Literal.Number.Float */
.mh { color: #009999 } /* Literal.Number.Hex */
.mi { color: #009999 } /* Literal.Number.Integer */
.mo { color: #009999 } /* Literal.Number.Oct */
.sb { color: #d01040 } /* Literal.String.Backtick */
.sc { color: #d01040 } /* Literal.String.Char */
.sd { color: #d01040 } /* Literal.String.Doc */
.s2 { color: #d01040 } /* Literal.String.Double */
.se { color: #d01040 } /* Literal.String.Escape */
.sh { color: #d01040 } /* Literal.String.Heredoc */
.si { color: #d01040 } /* Literal.String.Interpol */
.sx { color: #d01040 } /* Literal.String.Other */
.sr { color: #009926 } /* Literal.String.Regex */
.s1 { color: #d01040 } /* Literal.String.Single */
.ss { color: #990073 } /* Literal.String.Symbol */
.bp { color: #999999 } /* Name.Builtin.Pseudo */
.vc { color: #008080 } /* Name.Variable.Class */
.vg { color: #008080 } /* Name.Variable.Global */
.vi { color: #008080 } /* Name.Variable.Instance */
.il { color: #009999 } /* Literal.Number.Integer.Long */

BIN
docs/assets/img/android.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 86 KiB

BIN
docs/assets/img/device-sprite.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 237 KiB

BIN
docs/assets/img/iphone5c.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 61 KiB

BIN
docs/assets/img/iphone5s.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 80 KiB

BIN
docs/assets/img/slide-1.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 117 KiB

BIN
docs/assets/img/slide-1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 MiB

BIN
docs/assets/img/slide-2.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 116 KiB

BIN
docs/assets/img/slide-2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 MiB

BIN
docs/assets/img/slide-3.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

BIN
docs/assets/img/slide-3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 799 KiB

10
docs/assets/js/docs.min.js vendored
View File

File diff suppressed because one or more lines are too long

281
docs/components.html
Unescape View File

@ -57,28 +57,28 @@ title: Components &middot; Ratchet
<article class="component">
<h3 class="component-title">Title bar with buttons</h3>
<p class="component-description">Buttons in a title bar are left or right aligned and should be used for actions. Use the <code>.pull-right</code> or <code>.pull-right</code> utility classes to float the buttons. Also, be sure to place any floated elements bofore the title.</p>
<p class="component-description">Buttons in a title bar are left or right aligned and should be used for actions. Use the <code>.pull-right</code> or <code>.pull-left</code> utility classes to float the buttons. Also, be sure to place any floated elements before the title.</p>
<div class="component-example component-example-fullbleed">
<header class="bar bar-nav">
<a class="btn pull-left">
<button class="btn pull-left">
Left
</a>
<a class="btn pull-right">
</button>
<button class="btn pull-right">
Right
</a>
</button>
<h1 class="title">Title</h1>
</header>
</div>
{% highlight html %}
<header class="bar bar-nav">
<a class="btn pull-left">
<button class="btn pull-left">
Left
</a>
<a class="btn pull-right">
</button>
<button class="btn pull-right">
Right
</a>
</button>
<h1 class="title">Title</h1>
</header>
{% endhighlight %}
@ -113,28 +113,28 @@ title: Components &middot; Ratchet
<div class="component-example component-example-fullbleed">
<header class="bar bar-nav">
<a class="btn btn-link btn-nav pull-left">
<button class="btn btn-link btn-nav pull-left">
<span class="icon icon-left-nav"></span>
Left
</a>
<a class="btn btn-link btn-nav pull-right">
</button>
<button class="btn btn-link btn-nav pull-right">
Right
<span class="icon icon-right-nav"></span>
</a>
</button>
<h1 class="title">Title</h1>
</header>
</div>
{% highlight html %}
<header class="bar bar-nav">
<a class="btn btn-link btn-nav pull-left">
<button class="btn btn-link btn-nav pull-left">
<span class="icon icon-left-nav"></span>
Left
</a>
<a class="btn btn-link btn-nav pull-right">
</button>
<button class="btn btn-link btn-nav pull-right">
Right
<span class="icon icon-right-nav"></span>
</a>
</button>
<h1 class="title">Title</h1>
</header>
{% endhighlight %}
@ -147,10 +147,10 @@ title: Components &middot; Ratchet
<div class="component-example component-example-fullbleed">
<header class="bar bar-nav">
<a class="btn pull-left">
<button class="btn pull-left">
Left
</a>
<a class="btn pull-right">
</button>
<button class="btn pull-right">
Right
</a>
<div class="segmented-control">
@ -163,12 +163,12 @@ title: Components &middot; Ratchet
{% highlight html %}
<header class="bar bar-nav">
<a class="btn pull-left">
<button class="btn pull-left">
Left
</a>
<a class="btn pull-right">
<button class="btn pull-right">
Right
</a>
</button>
<div class="segmented-control">
<a class="control-item active">One</a>
<a class="control-item">Two</a>
@ -287,7 +287,7 @@ title: Components &middot; Ratchet
<!-- Block button in standard bar fixed below top bar -->
<div class="bar bar-standard bar-header-secondary">
<a class="btn btn-block">Block level button</a>
<button class="btn btn-block">Block level button</button>
</div>
</div>
@ -303,12 +303,12 @@ title: Components &middot; Ratchet
<!-- Block button in standard bar fixed below top bar -->
<div class="bar bar-standard bar-header-secondary">
<a class="btn btn-block">Block level button</a>
<button class="btn btn-block">Block level button</button>
</div>
<!-- Block button in standard bar fixed above the footer -->
<div class="bar bar-standard bar-footer-secondary">
<a class="btn btn-block">Block level button</a>
<button class="btn btn-block">Block level button</button>
</div>
<!-- Icons in standard bar fixed to the bottom of the screen -->
@ -382,22 +382,22 @@ title: Components &middot; Ratchet
<article class="component">
<h3 class="component-title">Table view with chevrons</h3>
<p class="component-description">Chevrons should be used to indicate that the item is linked. Just apply the classes <code>.push-right</code> or <code>.push-left</code> to use a chevron.</p>
<p class="component-description">Chevrons should be used to indicate that the item is linked. Just apply the classes <code>.navigate-right</code> or <code>.navigate-left</code> to use a chevron.</p>
<div class="component-example component-example-fullbleed">
<ul class="table-view">
<li class="table-view-cell">
<a class="push-right">
<a class="navigate-right">
Item 1
</a>
</li>
<li class="table-view-cell">
<a class="push-right">
<a class="navigate-right">
Item 2
</a>
</li>
<li class="table-view-cell">
<a class="push-right">
<a class="navigate-right">
Item 3
</a>
</li>
@ -407,17 +407,17 @@ title: Components &middot; Ratchet
{% highlight html %}
<ul class="table-view">
<li class="table-view-cell">
<a class="push-right">
<a class="navigate-right">
Item 1
</a>
</li>
<li class="table-view-cell">
<a class="push-right">
<a class="navigate-right">
Item 2
</a>
</li>
<li class="table-view-cell">
<a class="push-right">
<a class="navigate-right">
Item 3
</a>
</li>
@ -455,19 +455,19 @@ title: Components &middot; Ratchet
<div class="component-example component-example-fullbleed">
<ul class="table-view">
<li class="table-view-cell">
<a class="push-right">
<a class="navigate-right">
<span class="badge">5</span>
Item 1
</a>
</li>
<li class="table-view-cell">
<a class="push-right">
<a class="navigate-right">
<span class="badge">5</span>
Item 2
</a>
</li>
<li class="table-view-cell">
<a class="push-right">
<a class="navigate-right">
<span class="badge">5</span>
Item 3
</a>
@ -478,19 +478,19 @@ title: Components &middot; Ratchet
{% highlight html %}
<ul class="table-view">
<li class="table-view-cell">
<a class="push-right">
<a class="navigate-right">
<span class="badge">5</span>
Item 1
</a>
</li>
<li class="table-view-cell">
<a class="push-right">
<a class="navigate-right">
<span class="badge">5</span>
Item 2
</a>
</li>
<li class="table-view-cell">
<a class="push-right">
<a class="navigate-right">
<span class="badge">5</span>
Item 3
</a>
@ -507,7 +507,7 @@ title: Components &middot; Ratchet
<div class="component-example component-example-fullbleed">
<ul class="table-view">
<li class="table-view-cell media">
<a class="push-right">
<a class="navigate-right">
<img class="media-object pull-left" src="http://placehold.it/42x42" alt="Placeholder image">
<div class="media-body">
Item 1
@ -516,7 +516,7 @@ title: Components &middot; Ratchet
</a>
</li>
<li class="table-view-cell media">
<a class="push-right">
<a class="navigate-right">
<img class="media-object pull-left" src="http://placehold.it/42x42" alt="Placeholder image">
<div class="media-body">
Item 1
@ -525,7 +525,7 @@ title: Components &middot; Ratchet
</a>
</li>
<li class="table-view-cell media">
<a class="push-right">
<a class="navigate-right">
<img class="media-object pull-left" src="http://placehold.it/42x42" alt="Placeholder image">
<div class="media-body">
Item 1
@ -539,7 +539,7 @@ title: Components &middot; Ratchet
{% highlight html %}
<ul class="table-view">
<li class="table-view-cell media">
<a class="push-right">
<a class="navigate-right">
<img class="media-object pull-left" src="http://placehold.it/42x42">
<div class="media-body">
Item 1
@ -548,7 +548,7 @@ title: Components &middot; Ratchet
</a>
</li>
<li class="table-view-cell media">
<a class="push-right">
<a class="navigate-right">
<img class="media-object pull-left" src="http://placehold.it/42x42">
<div class="media-body">
Item 1
@ -557,7 +557,7 @@ title: Components &middot; Ratchet
</a>
</li>
<li class="table-view-cell media">
<a class="push-right">
<a class="navigate-right">
<img class="media-object pull-left" src="http://placehold.it/42x42">
<div class="media-body">
Item 1
@ -577,7 +577,7 @@ title: Components &middot; Ratchet
<div class="component-example component-example-fullbleed">
<ul class="table-view">
<li class="table-view-cell media">
<a class="push-right">
<a class="navigate-right">
<span class="media-object pull-left icon icon-trash"></span>
<div class="media-body">
Item 1
@ -585,7 +585,7 @@ title: Components &middot; Ratchet
</a>
</li>
<li class="table-view-cell media">
<a class="push-right">
<a class="navigate-right">
<span class="media-object pull-left icon icon-gear"></span>
<div class="media-body">
Item 2
@ -593,7 +593,7 @@ title: Components &middot; Ratchet
</a>
</li>
<li class="table-view-cell media">
<a class="push-right">
<a class="navigate-right">
<span class="media-object pull-left icon icon-pages"></span>
<div class="media-body">
Item 3
@ -606,7 +606,7 @@ title: Components &middot; Ratchet
{% highlight html %}
<ul class="table-view">
<li class="table-view-cell media">
<a class="push-right">
<a class="navigate-right">
<span class="media-object pull-left icon icon-trash"></span>
<div class="media-body">
Item 1
@ -614,7 +614,7 @@ title: Components &middot; Ratchet
</a>
</li>
<li class="table-view-cell media">
<a class="push-right">
<a class="navigate-right">
<span class="media-object pull-left icon icon-gear"></span>
<div class="media-body">
Item 2
@ -622,7 +622,7 @@ title: Components &middot; Ratchet
</a>
</li>
<li class="table-view-cell media">
<a class="push-right">
<a class="navigate-right">
<span class="media-object pull-left icon icon-pages"></span>
<div class="media-body">
Item 3
@ -639,19 +639,19 @@ title: Components &middot; Ratchet
<div class="component-example component-example-fullbleed">
<ul class="table-view">
<li class="table-view-cell">Item 1 <a class="btn">Button</a></li>
<li class="table-view-cell">Item 2 <a class="btn btn-primary">Button</a></li>
<li class="table-view-cell">Item 3 <a class="btn btn-positive">Button</a></li>
<li class="table-view-cell">Item 4 <a class="btn btn-negative">Button</a></li>
<li class="table-view-cell">Item 1 <button class="btn">Button</button></li>
<li class="table-view-cell">Item 2 <button class="btn btn-primary">Button</button></li>
<li class="table-view-cell">Item 3 <button class="btn btn-positive">Button</button></li>
<li class="table-view-cell">Item 4 <button class="btn btn-negative">Button</button></li>
</ul>
</div>
{% highlight html %}
<ul class="table-view">
<li class="table-view-cell">Item 1 <a class="btn">Button</a></li>
<li class="table-view-cell">Item 2 <a class="btn btn-primary">Button</a></li>
<li class="table-view-cell">Item 3 <a class="btn btn-positive">Button</a></li>
<li class="table-view-cell">Item 4 <a class="btn btn-negative">Button</a></li>
<li class="table-view-cell">Item 1 <button class="btn">Button</button></li>
<li class="table-view-cell">Item 2 <button class="btn btn-primary">Button</button></li>
<li class="table-view-cell">Item 3 <button class="btn btn-positive">Button</button></li>
<li class="table-view-cell">Item 4 <button class="btn btn-negative">Button</button></li>
</ul>
{% endhighlight %}
@ -744,29 +744,29 @@ title: Components &middot; Ratchet
<p class="component-description">Buttons come in many flavors and should be used for user actions.</p>
<div class="component-example">
<a class="btn">Button</a>
<a class="btn btn-primary">Button</a>
<a class="btn btn-positive">Button</a>
<a class="btn btn-negative">Button</a>
<a class="btn btn-link">Button</a>
<a class="btn btn-outlined">Button</a>
<a class="btn btn-primary btn-outlined">Button</a>
<a class="btn btn-positive btn-outlined">Button</a>
<a class="btn btn-negative btn-outlined">Button</a>
<button class="btn">Button</button>
<button class="btn btn-primary">Button</button>
<button class="btn btn-positive">Button</button>
<button class="btn btn-negative">Button</button>
<button class="btn btn-link">Button</button>
<button class="btn btn-outlined">Button</a>
<button class="btn btn-primary btn-outlined">Button</button>
<button class="btn btn-positive btn-outlined">Button</button>
<button class="btn btn-negative btn-outlined">Button</button>
</div>
{% highlight html %}
<a class="btn">Button</a>
<a class="btn btn-primary">Button</a>
<a class="btn btn-positive">Button</a>
<a class="btn btn-negative">Button</a>
<a class="btn btn-link">Button</a>
<a class="btn btn-outlined">Button</a>
<a class="btn btn-primary btn-outlined">Button</a>
<a class="btn btn-positive btn-outlined">Button</a>
<a class="btn btn-negative btn-outlined">Button</a>
<button class="btn">Button</button>
<button class="btn btn-primary">Button</button>
<button class="btn btn-positive">Button</button>
<button class="btn btn-negative">Button</button>
<button class="btn btn-link">Button</button>
<button class="btn btn-outlined">Button</a>
<button class="btn btn-primary btn-outlined">Button</button>
<button class="btn btn-positive btn-outlined">Button</button>
<button class="btn btn-negative btn-outlined">Button</button>
{% endhighlight %}
</article>
@ -777,49 +777,49 @@ title: Components &middot; Ratchet
<p class="component-description">Ratchicons work inside buttons too.</p>
<div class="component-example">
<a class="btn">
<button class="btn">
<span class="icon icon-search"></span>
Button
</a>
<a class="btn btn-primary">
</button>
<button class="btn btn-primary">
<span class="icon icon-search"></span>
Button
</a>
<a class="btn btn-positive">
</button>
<button class="btn btn-positive">
<span class="icon icon-search"></span>
Button
</a>
<a class="btn btn-negative">
</button>
<button class="btn btn-negative">
<span class="icon icon-search"></span>
Button
</a>
<a class="btn btn-link">
</button>
<button class="btn btn-link">
<span class="icon icon-left"></span>
Button
</a>
</button>
</div>
{% highlight html %}
<a class="btn">
<button class="btn">
<span class="icon icon-search"></span>
Button
</a>
<a class="btn btn-primary">
</button>
<button class="btn btn-primary">
<span class="icon icon-search"></span>
Button
</a>
<a class="btn btn-positive">
</button>
<button class="btn btn-positive">
<span class="icon icon-search"></span>
Button
</a>
<a class="btn btn-negative">
</button>
<button class="btn btn-negative">
<span class="icon icon-search"></span>
Button
</a>
<a class="btn btn-link">
</button>
<button class="btn btn-link">
<span class="icon icon-left"></span>
Button
</a>
</button>
{% endhighlight %}
</article>
@ -828,22 +828,22 @@ title: Components &middot; Ratchet
<h3 class="component-title">Buttons with badges</h3>
<div class="component-example">
<a class="btn">Badge button <span class="badge">1</span></a>
<a class="btn btn-primary">Badge button <span class="badge badge-primary">1</span></a>
<a class="btn btn-positive">Badge button <span class="badge badge-positive">1</span></a>
<a class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></a>
<button class="btn">Badge button <span class="badge">1</span></button>
<button class="btn btn-primary">Badge button <span class="badge badge-primary">1</span></button>
<button class="btn btn-positive">Badge button <span class="badge badge-positive">1</span></button>
<button class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></button>
</div>
{% highlight html %}
<a class="btn">Badge button <span class="badge">1</span></a>
<a class="btn btn-primary">Badge button <span class="badge badge-primary">1</span></a>
<a class="btn btn-positive">Badge button <span class="badge badge-positive">1</span></a>
<a class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></a>
<a class="btn btn-outlined">Badge button <span class="badge badge-inverted">1</span></a>
<a class="btn btn-outlined btn-primary">Badge button <span class="badge badge-primary badge-inverted">1</span></a>
<a class="btn btn-outlined btn-positive">Badge button <span class="badge badge-positive badge-inverted">1</span></a>
<a class="btn btn-outlined btn-negative">Badge button <span class="badge badge-negative badge-inverted">1</span></a>
<button class="btn">Badge button <span class="badge">1</span></button>
<button class="btn btn-primary">Badge button <span class="badge badge-primary">1</span></button>
<button class="btn btn-positive">Badge button <span class="badge badge-positive">1</span></button>
<button class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></button>
<button class="btn btn-outlined">Badge button <span class="badge badge-inverted">1</span></button>
<button class="btn btn-outlined btn-primary">Badge button <span class="badge badge-primary badge-inverted">1</span></button>
<button class="btn btn-outlined btn-positive">Badge button <span class="badge badge-positive badge-inverted">1</span></button>
<button class="btn btn-outlined btn-negative">Badge button <span class="badge badge-negative badge-inverted">1</span></button>
{% endhighlight %}
</article>
@ -852,27 +852,27 @@ title: Components &middot; Ratchet
<h3 class="component-title">Block buttons</h3>
<div class="component-example">
<a class="btn btn-block">Block button</a>
<a class="btn btn-primary btn-block">Block button</a>
<a class="btn btn-positive btn-block">Block button</a>
<a class="btn btn-negative btn-block">Block button</a>
<a class="btn btn-block btn-outlined">Block button</a>
<a class="btn btn-primary btn-block btn-outlined">Block button</a>
<a class="btn btn-positive btn-block btn-outlined">Block button</a>
<a class="btn btn-negative btn-block btn-outlined">Block button</a>
<button class="btn btn-block">Block button</button>
<button class="btn btn-primary btn-block">Block button</button>
<button class="btn btn-positive btn-block">Block button</button>
<button class="btn btn-negative btn-block">Block button</button>
<button class="btn btn-block btn-outlined">Block button</button>
<button class="btn btn-primary btn-block btn-outlined">Block button</button>
<button class="btn btn-positive btn-block btn-outlined">Block button</button>
<button class="btn btn-negative btn-block btn-outlined">Block button</button>
</div>
{% highlight html %}
<a class="btn btn-block">Block button</a>
<a class="btn btn-primary btn-block">Block button</a>
<a class="btn btn-positive btn-block">Block button</a>
<a class="btn btn-negative btn-block">Block button</a>
<a class="btn btn-block btn-outlined">Block button</a>
<a class="btn btn-primary btn-block btn-outlined">Block button</a>
<a class="btn btn-positive btn-block btn-outlined">Block button</a>
<a class="btn btn-negative btn-block btn-outlined">Block button</a>
<button class="btn btn-block">Block button</button>
<button class="btn btn-primary btn-block">Block button</button>
<button class="btn btn-positive btn-block">Block button</button>
<button class="btn btn-negative btn-block">Block button</button>
<button class="btn btn-block btn-outlined">Block button</button>
<button class="btn btn-primary btn-block btn-outlined">Block button</button>
<button class="btn btn-positive btn-block btn-outlined">Block button</button>
<button class="btn btn-negative btn-block btn-outlined">Block button</button>
{% endhighlight %}
</article>
@ -961,7 +961,7 @@ title: Components &middot; Ratchet
<input type="text" placeholder="Full name">
<input type="search" placeholder="Search">
<textarea rows="5"></textarea>
<a class="btn btn-positive btn-block">Choose existing</a>
<button class="btn btn-positive btn-block">Choose existing</button>
</form>
</div>
@ -970,7 +970,7 @@ title: Components &middot; Ratchet
<input type="text" placeholder="Full name">
<input type="search" placeholder="Search">
<textarea rows="5"></textarea>
<a class="btn btn-positive btn-block">Choose existing</a>
<button class="btn btn-positive btn-block">Choose existing</button>
</form>
{% endhighlight %}
@ -1103,7 +1103,6 @@ document
</a>
</header>
{% endhighlight %}
</article>
<!-- Modals -->
@ -1149,17 +1148,17 @@ document
<div class="slider" id="mySlider">
<div class="slide-group">
<div class="slide">
<img src="/assets/img/slide-1.png" alt="Mountain and sky">
<img src="/assets/img/slide-1.jpg" alt="Mountain and sky">
<span class="slide-text">
<span class="icon icon-left-nav"></span>
Slide me
</span>
</div>
<div class="slide">
<img src="/assets/img/slide-2.png" alt="Giant mecha">
<img src="/assets/img/slide-2.jpg" alt="Giant mecha">
</div>
<div class="slide">
<img src="/assets/img/slide-3.png" alt="Big Ben">
<img src="/assets/img/slide-3.jpg" alt="Big Ben">
</div>
</div>
</div>
@ -1169,17 +1168,17 @@ document
<div class="slider" id="mySlider">
<div class="slide-group">
<div class="slide">
<img src="/assets/img/slide-1.png">
<img src="/assets/img/slide-1.jpg">
<span class="slide-text">
<span class="icon icon-left-nav"></span>
Slide me
</span>
</div>
<div class="slide">
<img src="/assets/img/slide-2.png">
<img src="/assets/img/slide-2.jpg">
</div>
<div class="slide">
<img src="/assets/img/slide-3.png">
<img src="/assets/img/slide-3.jpg">
</div>
</div>
</div>
@ -1225,7 +1224,7 @@ document
<div class="card">
<ul class="table-view">
<li class="table-view-cell">
<a class="push-right" href="../two.html" data-transition="slide-in">
<a class="navigate-right" href="../two.html" data-transition="slide-in">
Load new page with push
</a>
</li>
@ -1242,7 +1241,7 @@ document
<div class="card">
<ul class="table-view">
<li class="table-view-cell">
<a class="push-right" href="../two.html" data-transition="slide-in">
<a class="navigate-right" href="../two.html" data-transition="slide-in">
Load new page with push
</a>
</li>

15
docs/dist/ratchet-theme-android.css vendored
Unescape View File

@ -30,12 +30,21 @@ a:active {
padding-top: 50px;
}
.bar-header-secondary ~ .content {
padding-top: 100px;
}
.bar-tab ~ .content {
padding-top: 50px;
padding-bottom: 0;
}
.bar-footer ~ .content {
padding-bottom: 50px;
}
.bar-header-secondary ~ .content {
padding-top: 100px;
.bar-footer-secondary ~ .content {
padding-bottom: 100px;
}
.btn {
@ -525,10 +534,12 @@ textarea,
content: "On";
}
.navigate-left:after,
.push-left:after {
content: '';
}
.navigate-right:after,
.push-right:after {
content: '';
}

18
docs/dist/ratchet.css vendored
Unescape View File

@ -367,6 +367,7 @@ p {
color: #333;
text-align: center;
vertical-align: top;
white-space: nowrap;
cursor: pointer;
background-color: white;
border: 1px solid #ccc;
@ -443,6 +444,7 @@ p {
.btn-block {
display: block;
width: 100%;
padding: 15px 0;
margin-bottom: 10px;
font-size: 18px;
@ -785,12 +787,24 @@ input[type="button"] {
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.table-view-cell .navigate-left > .btn,
.table-view-cell .navigate-left > .badge,
.table-view-cell .navigate-left > .toggle,
.table-view-cell .navigate-right > .btn,
.table-view-cell .navigate-right > .badge,
.table-view-cell .navigate-right > .toggle,
.table-view-cell .push-left > .btn,
.table-view-cell .push-left > .badge,
.table-view-cell .push-left > .toggle,
.table-view-cell .push-right > .btn,
.table-view-cell .push-right > .badge,
.table-view-cell .push-right > .toggle,
.table-view-cell > a .navigate-left > .btn,
.table-view-cell > a .navigate-left > .badge,
.table-view-cell > a .navigate-left > .toggle,
.table-view-cell > a .navigate-right > .btn,
.table-view-cell > a .navigate-right > .badge,
.table-view-cell > a .navigate-right > .toggle,
.table-view-cell > a .push-left > .btn,
.table-view-cell > a .push-left > .badge,
.table-view-cell > a .push-left > .toggle,
@ -1204,6 +1218,8 @@ select {
transform: translate3d(100%, 0, 0);
}
.navigate-left:after,
.navigate-right:after,
.push-left:after,
.push-right:after {
position: absolute;
@ -1220,11 +1236,13 @@ select {
transform: translateY(-50%);
}
.navigate-left:after,
.push-left:after {
left: 15px;
content: '\e822';
}
.navigate-right:after,
.push-right:after {
right: 15px;
content: '\e826';

2
docs/dist/ratchet.min.css vendored
View File

File diff suppressed because one or more lines are too long

10
docs/dist/template.html vendored
Unescape View File

@ -10,7 +10,7 @@
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Set a shorter title for iOS6 devices when saved to home screen -->
<meta name="apple-mobile-web-app-title" content="Ratchet">
@ -47,22 +47,22 @@
<div class="card">
<ul class="table-view">
<li class="table-view-cell">
<a class="push-right" href="http://goratchet.com">
<a class="navigate-right" href="http://goratchet.com">
<strong>Ratchet documentation</strong>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="https://github.com/twbs/ratchet/">
<a class="navigate-right" href="https://github.com/twbs/ratchet/">
<strong>Ratchet on Github</strong>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="https://groups.google.com/forum/#!forum/goratchet">
<a class="navigate-right" href="https://groups.google.com/forum/#!forum/goratchet">
<strong>Ratchet Google group</strong>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="https://www.twitter.com/GoRatchet">
<a class="navigate-right" href="https://www.twitter.com/GoRatchet">
<strong>Ratchet on Twitter</strong>
</a>
</li>

2
docs/examples.html
Unescape View File

@ -21,7 +21,7 @@ title: Examples &middot; Ratchet
<div class="container">
<div class="column-group">
<div class="column units-2 lg-units-8 docs-examples">
<p class="section-lead">Checkout out the examples on a desktop browser or visit on your mobile device see the apps as intended.</p>
<p class="section-lead">Checkout out the examples on a desktop browser or visit on your mobile device to see the apps as intended.</p>
<div class="docs-example-group">
<div class="example-wrap">

75
docs/examples/app-android-notes/index.html
Unescape View File

@ -31,79 +31,79 @@
<ul class="table-view">
<li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here
<p>Lorem ipsum dolor sit amet...</p>
</a>
@ -111,52 +111,21 @@
</ul>
</div>
<!-- Settings modal -->
<!-- Compose modal -->
<div id="composeModal" class="modal">
<header class="bar bar-nav">
<a class="icon icon-close pull-right" href="#composeModal"></a>
<h1 class="title">
<span class="icon icon-gear"></span>
Settings
</h1>
<a class="icon icon-left pull-left" href="#composeModal"></a>
<h1 class="title">New note</h1>
</header>
<div class="content">
<h5>User settings</h5>
<form class="input-group">
<input type="text" placeholder="Full name">
<input type="email" placeholder="Email">
<input type="text" placeholder="Username">
<div class="content">
<form class="content-padded">
<input type="text" placeholder="Title">
<textarea rows="10"></textarea>
<a class="btn btn-positive btn-block" href="#composeModal">Save note</a>
</form>
<h5>App settings</h5>
<ul class="table-view">
<li class="table-view-cell media">
<span class="media-object pull-left icon icon-sound"></span>
<div class="media-body">
Enable sounds
</div>
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell media">
<span class="media-object pull-left icon icon-person"></span>
<div class="media-body">
Parental controls
</div>
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
<div class="container">
<a class="btn btn-positive btn-block">Save settings</a>
</div>
</div>
</div>
</div><!-- /.modal -->
<!-- Popover -->
<div id="navPopover" class="popover">

30
docs/examples/app-ios-mail/inbox.html
Unescape View File

@ -23,91 +23,91 @@
<ul class="table-view">
<li class="table-view-cell">
<a class="push-right" href="#">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="#">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="#">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="#">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="#">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="#">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="#">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="#">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="#">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="#">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="#">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="#">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="#">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="#">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="#">
<a class="navigate-right" href="#">
Email subject line here
<p>Lorem ipsum dolor sit amet...</p>
</a>

14
docs/examples/app-ios-mail/index.html
Unescape View File

@ -17,7 +17,7 @@
<a class="icon icon-refresh pull-right"></a>
<h1 class="title">Mailboxes</h1>
</header>
<div class="bar bar-footer">
<a class="icon icon-compose pull-right" href="#composeModal"></a>
<small class="updated-text">Updated just now</small>
@ -27,7 +27,7 @@
<ul class="table-view">
<li class="table-view-cell media">
<a class="push-right" href="inbox.html" data-transition="slide-in">
<a class="navigate-right" href="inbox.html" data-transition="slide-in">
<span class="media-object icon icon-pages pull-left"></span>
<div class="media-body">
All inboxes
@ -35,7 +35,7 @@
</a>
</li>
<li class="table-view-cell media">
<a class="push-right" href="inbox.html" data-transition="slide-in">
<a class="navigate-right" href="inbox.html" data-transition="slide-in">
<span class="media-object icon icon-person pull-left"></span>
<div class="media-body">
Personal email
@ -43,7 +43,7 @@
</a>
</li>
<li class="table-view-cell media">
<a class="push-right" href="inbox.html" data-transition="slide-in">
<a class="navigate-right" href="inbox.html" data-transition="slide-in">
<span class="media-object icon icon-star-filled pull-left"></span>
<div class="media-body">
Starred
@ -51,7 +51,7 @@
</a>
</li>
<li class="table-view-cell media">
<a class="push-right" href="inbox.html" data-transition="slide-in">
<a class="navigate-right" href="inbox.html" data-transition="slide-in">
<span class="media-object icon icon-trash pull-left"></span>
<div class="media-body">
Trash
@ -63,7 +63,7 @@
<h5 class="content-padded">Other accounts</h5>
<ul class="table-view">
<li class="table-view-cell media">
<a class="push-right" href="inbox.html" data-transition="slide-in">
<a class="navigate-right" href="inbox.html" data-transition="slide-in">
<span class="media-object icon icon-more pull-left"></span>
<div class="media-body">
Misc
@ -84,7 +84,7 @@
</a>
<h1 class="title">New message</h1>
</header>
<div class="content">
<form class="input-group">
<input type="text" placeholder="To:">

28
docs/examples/app-movies/index.html
Unescape View File

@ -16,7 +16,7 @@
<a class="icon icon-gear pull-right" href="#settingsModal" ></a>
<h1 class="title">Movie finder</h1>
</header>
<div class="bar bar-standard bar-header-secondary">
<form>
<input type="search" placeholder="Search">
@ -24,7 +24,7 @@
</div>
<div class="content">
<div class="slider">
<div class="slide-group">
<div class="slide">
@ -42,7 +42,7 @@
<ul class="table-view">
<li class="table-view-cell table-view-divider">Recommended movies</li>
<li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Argo's poster">
<div class="media-body">
Argo
@ -51,7 +51,7 @@
</a>
</li>
<li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Skyfall's poster">
<div class="media-body">
Skyfall: 007
@ -60,7 +60,7 @@
</a>
</li>
<li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Wreck-it Ralph's poster">
<div class="media-body">
Wreck-it Ralph
@ -69,7 +69,7 @@
</a>
</li>
<li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Argo's poster">
<div class="media-body">
Argo
@ -78,7 +78,7 @@
</a>
</li>
<li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Skyfall's poster">
<div class="media-body">
Skyfall: 007
@ -87,7 +87,7 @@
</a>
</li>
<li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Wreck-it Ralph's poster">
<div class="media-body">
Wreck-it Ralph
@ -96,7 +96,7 @@
</a>
</li>
<li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Argo's poster">
<div class="media-body">
Argo
@ -105,7 +105,7 @@
</a>
</li>
<li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Skyfall's poster">
<div class="media-body">
Skyfall: 007
@ -114,7 +114,7 @@
</a>
</li>
<li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Wreck-it Ralph's poster">
<div class="media-body">
Wreck-it Ralph
@ -131,7 +131,7 @@
<a class="icon icon-close pull-right" href="#settingsModal"></a>
<h1 class="title">Settings</h1>
</header>
<div class="content">
<form class="input-group">
<input type="text" placeholder="Full name">
@ -161,8 +161,8 @@
</div>
</li>
</ul>
<div class="container">
<a class="btn btn-positive btn-block content-padded">Save settings</a>
<div class="content-padded">
<button class="btn btn-positive btn-block">Save settings</button>
</div>
</div>
</div><!-- /.modal -->

21
docs/getting-started.html
Unescape View File

@ -55,7 +55,7 @@ title: Getting started &middot; Ratchet
<div class="compontent">
<div class="docs-section">
<h2 id="pageLayout">Basic template</h2>
<p class="lead">Use this basic template to get your app started.</p>
{% highlight html %}
@ -118,6 +118,25 @@ title: Getting started &middot; Ratchet
</html>
{% endhighlight %}
</div>
<div class="docs-section">
<h2>Community</h2>
<p class="lead">Stay up to date on the development of Ratchet and reach out to the community with these helpful resources.</p>
<ol>
<li>
<p>Read and subscribe to <a href="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a> (which includes Ratchet releases and news).</p>
</li>
<li>
<p>For help using Ratchet, ask on <a href="http://stackoverflow.com/questions/tagged/ratchet-2">StackOverflow using the tag <code>ratchet-2</code></a>.</p>
</li>
<li>
<p>Start a discussion on the <a href="https://groups.google.com/forum/#!forum/goratchet">Ratchet Google group</a>.</p>
</li>
</ol>
<p>You can also follow <a href="https://twitter.com/goratchet">@goratchet</a> on Twitter for the latest news.</p>
</div>
</div>
<div class="column units-2 lg-units-4">

11
package.json
Unescape View File

@ -20,15 +20,18 @@
"url": "https://github.com/twbs/ratchet/issues"
},
"license": "MIT",
"scripts": {
"test": "grunt test"
},
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-copy": "~0.5.0",
"grunt-contrib-cssmin": "~0.8.0",
"grunt-contrib-cssmin": "~0.9.0",
"grunt-contrib-jshint": "~0.8.0",
"grunt-contrib-nodeunit": "~0.3.0",
"grunt-contrib-sass": "~0.7.1",
"grunt-contrib-uglify": "~0.3.0",
"grunt-contrib-nodeunit": "~0.3.2",
"grunt-contrib-sass": "~0.7.2",
"grunt-contrib-uglify": "~0.4.0",
"grunt-contrib-watch": "~0.5.3",
"grunt-html-validation": "~0.1.13",
"grunt-jekyll": "~0.4.1",

2
sass/buttons.scss
Unescape View File

@ -13,6 +13,7 @@
color: #333;
text-align: center;
vertical-align: top;
white-space: nowrap;
cursor: pointer;
background-color: $chrome-color;
border: 1px solid #ccc;
@ -117,6 +118,7 @@
// Block level buttons (full width buttons)
.btn-block {
display: block;
width: 100%;
padding: 15px 0;
margin-bottom: 10px;
font-size: 18px;

32
sass/docs.scss
Unescape View File

@ -302,7 +302,7 @@ body {
.btn {
display: block;
padding: 15px 60px 16px;
padding: 15px 90px 16px;
font-size: 18px;
margin-bottom: 0;
color: #0a1855;
@ -438,11 +438,20 @@ body {
// Wrap each section of the docs
.docs-section {
margin-bottom: 50px;
padding-top: 50px;
padding-bottom: 50px;
border-bottom: 1px solid #ddd;
}
.docs-section:last-child {
border-bottom: 0;
}
// Docs modules
@media screen and (min-width: 768px) {
.docs-module {
margin-top: 35px;
}
}
// Docs modules
.docs-module {
@ -690,11 +699,14 @@ code {
margin-bottom: 10px;
}
.component-example .slider {
height: 200px;
height: 300px;
.slide {
height: 300px;
}
}
.component-example .slide img {
width: 100%;
height: 200px;
}
.component-example .slide-text {
position: absolute;
@ -789,7 +801,8 @@ code {
}
}
#blockButtonsInDevice .btn-block {
margin: 10px;
width: 300px;
margin: 10px auto;
}
//Segmented Control
@ -894,9 +907,10 @@ code {
height: 813px;
margin-left: -20px;
font-family: "Helvetica Neue", sans-serif;
background-image: url("../img/iphone5c.png");
background-size: 100%;
background-image: url("../img/device-sprite.png");
background-size: 300%;
background-repeat: no-repeat;
background-position: 0 0;
@include transition(background-image .1s linear);
&.device-fixed {
@ -1070,7 +1084,7 @@ hr {
@import "theme-ios.scss";
.device {
background-image: url("../img/iphone5s.png");
background-position: -395px 0;
.device-content {
background-color: #efeff4;
@ -1082,7 +1096,7 @@ hr {
.device {
font-family: 'Roboto', sans-serif;
background-image: url("../img/android.png");
background-position: -790px 0;
.device-content {
font-size: 18px;

6
sass/push.scss
Unescape View File

@ -34,6 +34,8 @@
}
// Add chevrons to elements
.navigate-left,
.navigate-right,
.push-left,
.push-right {
&:after {
@ -49,11 +51,13 @@
@include transform(translateY(-50%));
}
}
.navigate-left:after,
.push-left:after {
left: 15px;
content: '\e822';
}
.push-right:after {
.navigate-right:after,
.push-right:after{
right: 15px;
content: '\e826';
}

2
sass/table-views.scss
Unescape View File

@ -91,6 +91,8 @@
}
// If the cell has a chevron, give some more room.
.navigate-left,
.navigate-right,
.push-left,
.push-right {
> .btn,

17
sass/theme-android.scss
Unescape View File

@ -66,13 +66,19 @@ a {
.bar-nav ~ .content {
padding-top: $bar-base-height;
}
.bar-tab ~ .content {
padding-bottom: $bar-tab-height;
}
.bar-header-secondary ~ .content {
padding-top: $bar-base-height*2;
}
.bar-tab ~ .content {
padding-top: $bar-tab-height;
padding-bottom: 0;
}
.bar-footer ~ .content {
padding-bottom: $bar-base-height;
}
.bar-footer-secondary ~ .content {
padding-bottom: ($bar-base-height*2);
}
// Buttons
// --------------------------------------------------
@ -697,9 +703,12 @@ textarea,
// Push icons
// --------------------------------------------------
// Deprecated `push-left` and `push-right` as of 2.0.1
.navigate-left:after,
.push-left:after {
content: '';
}
.navigate-right:after,
.push-right:after {
content: '';
}

Write Preview
Loading…
Cancel
Save