Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Cleanup www.mobifyjs.com

- Add <meta> attributes
- Remove unused JavaScript
- Delete unused files
- Update video links to the correct place
  • Loading branch information...
commit 21c582d0e8c1f19e87798cfe89d30363d2c43358 1 parent 32ca373
@johnboxall johnboxall authored
Showing with 598 additions and 1,457 deletions.
  1. +2 −2 README.md
  2. +2 −4 www/_config.yml
  3. +11 −13 www/_includes/nav-examples.html
  4. +0 −19 www/_includes/nav-examples.html.orig
  5. +42 −43 www/_includes/nav-modules.html
  6. +26 −26 www/_includes/nav.html
  7. +83 −66 www/_layouts/base.html
  8. +8 −6 www/_layouts/modules.html
  9. +1 −1  www/_layouts/page.html
  10. +0 −8 www/about.md
  11. +4 −1 www/cla.md
  12. +13 −9 www/community.md
  13. +28 −28 www/docs/appendix.md
  14. +22 −22 www/docs/cloud-getting-started.md
  15. +14 −14 www/docs/getting-started.md
  16. +13 −13 www/docs/glossary.md
  17. +2 −2 www/docs/handling-javascript.md
  18. +5 −5 www/docs/image-resizing.md
  19. +27 −11 www/docs/index.md
  20. +0 −82 www/docs/index.md.orig
  21. +9 −9 www/docs/jazzcat.md
  22. +40 −40 www/docs/konf-reference.md
  23. +23 −23 www/docs/matching-to-urls.md
  24. +4 −4 www/docs/mobifyjs-in-production.md
  25. +28 −28 www/docs/responsive.md
  26. +21 −21 www/docs/template-reference.md
  27. +15 −15 www/docs/understanding-konf.md
  28. +11 −11 www/docs/understanding-templates.md
  29. +9 −5 www/examples/index.md
  30. +81 −25 www/index.html
  31. +9 −4 www/license.md
  32. +10 −7 www/modules/accordion-examples.md
  33. +5 −2 www/modules/accordion.md
  34. +11 −8 www/modules/carousel-examples.html
  35. +7 −4 www/modules/carousel.md
  36. +12 −7 www/modules/index.md
  37. +0 −869 www/static/css/ui-dev.css.orig
View
4 README.md
@@ -1,6 +1,6 @@
# Mobify.js
-Mobify.js is a client side adaptation framework for quickly adapting
+Mobify.js is a client side adaptation framework for quickly adapting
websites to support mobile and tablet devices.
This repository contains the Mobify.js core. The [Mobify Client](https://github.com/mobify/mobify-client/)
@@ -28,7 +28,7 @@ and run it from `www` folder:
gem install jekyll
cd www
jekyll --server --auto
-
+
Then navigate to http://localhost:4000/mobifyjs/docs/.
## Modules
View
6 www/_config.yml
@@ -1,10 +1,8 @@
-permalink: pretty
+permalink: pretty
markdown: kramdown
kramdown:
use_coderay: true
entity_output: symbolic
-baseurl: /mobifyjs
-
-
+baseurl: /mobifyjs
View
24 www/_includes/nav-examples.html
@@ -1,13 +1,11 @@
-
- <div class="nav-examples">
- <div class="demostore">
- <h3><a href="{{ site.baseurl }}/examples/#demostore">Demo Site</a></h3>
- </div>
- <!--
- <div class="demoblog">
- <a href="/examples/demoblog/"><h3>Demo Blog</h3></a>
- <p>Description</p>
- </div>
- -->
- </div>
-
+<div class="nav-examples">
+ <div class="demostore">
+ <h3><a href="{{ site.baseurl }}/examples/#demostore">Demo Site</a></h3>
+ </div>
+ <!--
+ <div class="demoblog">
+ <a href="/examples/demoblog/"><h3>Demo Blog</h3></a>
+ <p>Description</p>
+ </div>
+ -->
+</div>
View
19 www/_includes/nav-examples.html.orig
@@ -1,19 +0,0 @@
-
- <div class="nav-examples">
- <div class="demostore">
-<<<<<<< HEAD
- <a href="/examples/demostore/"><h3>Demo Site</h3></a>
- <p>Uncle Merlins Discount Potions store</p>
-=======
- <a href="/examples/demostore/"><h3>Demo Store</h3></a>
- <p>Uncle Merlins Discount Potions</p>
->>>>>>> aaa0475b62a1654178e759170d8b6170846c796f
- </div>
- <!--
- <div class="demoblog">
- <a href="/examples/demoblog/"><h3>Demo Blog</h3></a>
- <p>Description</p>
- </div>
- -->
- </div>
-
View
85 www/_includes/nav-modules.html
@@ -1,45 +1,44 @@
-
- {% active_links prefix %}
- <div class="nav-modules">
- <ul>
- <li><a href="{{ site.baseurl }}/modules/">Mobify.js Modules</a></li>
- <li>
- <a href="{{ site.baseurl }}/modules/carousel">Carousel</a>
- <ul class="hide-inactive">
- <li><a href="{{ site.baseurl }}/modules/carousel-examples/">Examples</a></li>
- <li><a href="{{ site.baseurl }}/modules/carousel/#usage">Usage</a></li>
- <li><a href="{{ site.baseurl }}/modules/carousel/#classes">Classes</a></li>
- <li><a href="{{ site.baseurl }}/modules/carousel/#methods">Methods</a></li>
- <li><a href="{{ site.baseurl }}/modules/carousel/#events">Events</a></li>
- <li><a href="{{ site.baseurl }}/modules/carousel/#browser-compatibility">Browser Compatibility</a></li>
- </ul>
- </li>
- <li>
- <a href="{{ site.baseurl }}/modules/accordion">Accordion</a>
- <ul class="hide-inactive">
- <li><a href="{{ site.baseurl }}/modules/accordion-examples/">Examples</a></li>
- <li><a href="{{ site.baseurl }}/modules/accordion/#usage">Usage</a></li>
- <li><a href="{{ site.baseurl }}/modules/accordion/#markup">Markup</a></li>
- <li><a href="{{ site.baseurl }}/modules/accordion/#methods">Methods</a></li>
- <li><a href="{{ site.baseurl }}/modules/accordion/#browser-compatibility">Browser Compatibility</a></li>
- </ul>
- </li>
- <!--
+{% active_links prefix %}
+ <div class="nav-modules">
+ <ul>
+ <li><a href="{{ site.baseurl }}/modules/">Mobify.js Modules</a></li>
+ <li>
+ <a href="{{ site.baseurl }}/modules/carousel">Carousel</a>
+ <ul class="hide-inactive">
+ <li><a href="{{ site.baseurl }}/modules/carousel-examples/">Examples</a></li>
+ <li><a href="{{ site.baseurl }}/modules/carousel/#usage">Usage</a></li>
+ <li><a href="{{ site.baseurl }}/modules/carousel/#classes">Classes</a></li>
+ <li><a href="{{ site.baseurl }}/modules/carousel/#methods">Methods</a></li>
+ <li><a href="{{ site.baseurl }}/modules/carousel/#events">Events</a></li>
+ <li><a href="{{ site.baseurl }}/modules/carousel/#browser-compatibility">Browser Compatibility</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="{{ site.baseurl }}/modules/accordion">Accordion</a>
+ <ul class="hide-inactive">
+ <li><a href="{{ site.baseurl }}/modules/accordion-examples/">Examples</a></li>
+ <li><a href="{{ site.baseurl }}/modules/accordion/#usage">Usage</a></li>
+ <li><a href="{{ site.baseurl }}/modules/accordion/#markup">Markup</a></li>
+ <li><a href="{{ site.baseurl }}/modules/accordion/#methods">Methods</a></li>
+ <li><a href="{{ site.baseurl }}/modules/accordion/#browser-compatibility">Browser Compatibility</a></li>
+ </ul>
+ </li>
+ <!--
- <li>
- <a href="{{ site.baseurl }}/modules/zoomable">Zoomable</a>
- <ul class="hide-inactive">
- <li><a href="{{ site.baseurl }}/modules/zoomable/#usage">Usage</a></li>
- <li><a href="{{ site.baseurl }}/modules/zoomable-examples/">Examples</a></li>
- <li><a href="{{ site.baseurl }}/modules/zoomable/#methods">Methods</a></li>
- <li><a href="{{ site.baseurl }}/modules/zoomable/#configuration">Configuration</a></li>
- <li><a href="{{ site.baseurl }}/modules/zoomable/#classes">Classes</a></li>
- <li><a href="{{ site.baseurl }}/modules/zoomable/#default-styles">Default Styles</a></li>
- <li><a href="{{ site.baseurl }}/modules/zoomable/#events">Events</a></li>
- </ul>
- </li>
+ <li>
+ <a href="{{ site.baseurl }}/modules/zoomable">Zoomable</a>
+ <ul class="hide-inactive">
+ <li><a href="{{ site.baseurl }}/modules/zoomable/#usage">Usage</a></li>
+ <li><a href="{{ site.baseurl }}/modules/zoomable-examples/">Examples</a></li>
+ <li><a href="{{ site.baseurl }}/modules/zoomable/#methods">Methods</a></li>
+ <li><a href="{{ site.baseurl }}/modules/zoomable/#configuration">Configuration</a></li>
+ <li><a href="{{ site.baseurl }}/modules/zoomable/#classes">Classes</a></li>
+ <li><a href="{{ site.baseurl }}/modules/zoomable/#default-styles">Default Styles</a></li>
+ <li><a href="{{ site.baseurl }}/modules/zoomable/#events">Events</a></li>
+ </ul>
+ </li>
- -->
- </ul>
- </div>
- {% endactive_links %}
+ -->
+ </ul>
+ </div>
+{% endactive_links %}
View
52 www/_includes/nav.html
@@ -1,26 +1,26 @@
- <div class="nav-wrapper">
- <ul class="nav">
- <li class="nav-about">
- {% active_links %}
- <a href="/mobifyjs/" class="rounded about">About</a>
- {% endactive_links %}
- </li>
- <li class="nav-docs">
- {% active_links prefix %}
- <a href="/mobifyjs/docs/" class="rounded">Docs</a>
- </li>
- <li class="nav-examples">
- <a href="/mobifyjs/examples/" class="rounded">Examples</a>
- </li>
- <li class="nav-widgets">
- <a href="/mobifyjs/modules/" class="rounded">Modules</a>
- </li>
- <li class="nav-community">
- <a href="/mobifyjs/community/" class="rounded">Community</a>
- </li>
- <li>
- <a href="//twitter.com/mobifyjs" class="rounded"><i class="icon-twitter"></i></a>
- </li>
- </ul><!-- .nav -->
- {% endactive_links %}
- </div>
+<div class="nav-wrapper">
+ <ul class="nav">
+ <li class="nav-about">
+ {% active_links %}
+ <a href="/mobifyjs/" class="rounded about">About</a>
+ {% endactive_links %}
+ </li>
+ <li class="nav-docs">
+ {% active_links prefix %}
+ <a href="/mobifyjs/docs/" class="rounded">Docs</a>
+ </li>
+ <li class="nav-examples">
+ <a href="/mobifyjs/examples/" class="rounded">Examples</a>
+ </li>
+ <li class="nav-widgets">
+ <a href="/mobifyjs/modules/" class="rounded">Modules</a>
+ </li>
+ <li class="nav-community">
+ <a href="/mobifyjs/community/" class="rounded">Community</a>
+ </li>
+ <li>
+ <a href="//twitter.com/mobifyjs" class="rounded"><i class="icon-twitter"></i></a>
+ </li>
+ </ul><!-- .nav -->
+ {% endactive_links %}
+</div>
View
149 www/_layouts/base.html
@@ -1,80 +1,97 @@
<!DOCTYPE html>
<html>
- <head>
- <title>{{ page.title }}</title>
+<head>
+ <!--
- <link rel="stylesheet" href="{{ site.baseurl }}/static/css/bootstrap.css" type="text/css" media="screen, projection" />
- <link rel="stylesheet" href="{{ site.baseurl }}/static/css/syntax.css" type="text/css" media="screen, projection" />
- <link rel="stylesheet" href="{{ site.baseurl }}/static/css/font-awesome.css" type="text/css" media="screen, projection" />
- <link rel="stylesheet" href="{{ site.baseurl }}/static/js/highlight/styles/github.css" type="text/css" media="screen, projection" />
- <link rel="stylesheet" href="{{ site.baseurl }}/static/css/ui-dev.css?version=2" type="text/css" media="screen, projection" />
- <link rel="shortcut icon" href="{{ site.baseurl }}/static/img/favicon.ico" type="image/x-icon" />
+ | _) _| _)
+ __ `__ \ _ \ __ \ | | | | | __|
+ | | | ( | | | | __| | | |\__ \
+ _| _| _|\___/ _.__/ _|_| \__, | |____/
+ ____/___/
- <script>
- var _gaq = [
- ['_setAccount', 'UA-993328-16']
- , ['_trackPageview']
- , ['_setDomainName', 'mobify.com']
- , ['_setSiteSpeedSampleRate', 25]
- , ['_setAllowLinker', true]
- ];
+ www.mobifyjs.com, coded in Vancouver, Canada. https://www.mobify.com/about/jobs/ -->
+ <meta charset="utf-8" />
+ <meta name="author" content="Mobify">
+ <meta name="description" content="{% if page.description %}{{ page.description }}{% else %}Mobify.js is an open source web framework that helps you adapt any website to support any device. Powering millions of daily visits to your favourite websites.{% endif %}">
+ <meta name="keywords" content="mobify,mobile,mobile commerce,m-commerce,e-commerce,mobile web,mobile website,mobile view,create a mobile site">
+ <title>{{ page.title }}</title>
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
+ <link rel="stylesheet" href="{{ site.baseurl }}/static/css/bootstrap.css">
+ <link rel="stylesheet" href="{{ site.baseurl }}/static/css/syntax.css">
+ <link rel="stylesheet" href="{{ site.baseurl }}/static/css/font-awesome.css">
+ <link rel="stylesheet" href="{{ site.baseurl }}/static/js/highlight/styles/github.css">
+ <link rel="stylesheet" href="{{ site.baseurl }}/static/css/ui-dev.css?version=2">
+ <link rel="shortcut icon" href="{{ site.baseurl }}/static/img/favicon.ico">
- <script src="{{ site.baseurl }}/static/js/highlight/highlight.pack.js"></script>
+ <!-- Google Analytics -->
+ <script>
+ var _gaq = [
+ ['_setAccount', 'UA-993328-16'],
+ ['_trackPageview'],
+ ['_setDomainName', 'mobify.com'],
+ ['_setSiteSpeedSampleRate', 25],
+ ['_setAllowLinker', true]
+ ];
- <script>
- hljs.initHighlightingOnLoad();
- /*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT / GPLv2 License.*/
- (function(a){function m(){d.setAttribute("content",g),h=!0}function n(){d.setAttribute("content",f),h=!1}function o(b){l=b.accelerationIncludingGravity,i=Math.abs(l.x),j=Math.abs(l.y),k=Math.abs(l.z),(!a.orientation||a.orientation===180)&&(i>7||(k>6&&j<8||k<8&&j>6)&&i>5)?h&&n():h||m()}var b=navigator.userAgent;if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&/OS [1-5]_[0-9_]* like Mac OS X/i.test(b)&&b.indexOf("AppleWebKit")>-1))return;var c=a.document;if(!c.querySelector)return;var d=c.querySelector("meta[name=viewport]"),e=d&&d.getAttribute("content"),f=e+",maximum-scale=1",g=e+",maximum-scale=10",h=!0,i,j,k,l;if(!d)return;a.addEventListener("orientationchange",m,!1),a.addEventListener("devicemotion",o,!1)})(this);
- </script>
- <script src="{{ site.baseurl }}/static/js/jquery.min.js"></script>
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+ </script>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- </head>
- <body class="{{ page.bodyclass }}">
- <div class="viewport">
- <div class="navbar row-fluid">
- <div class="navbar-inner">
- <a class="brand" href="/mobifyjs/">Mobify.js</a>
+ <script>
+ /*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT / GPLv2 License.*/
+ (function(a){function m(){d.setAttribute("content",g),h=!0}function n(){d.setAttribute("content",f),h=!1}function o(b){l=b.accelerationIncludingGravity,i=Math.abs(l.x),j=Math.abs(l.y),k=Math.abs(l.z),(!a.orientation||a.orientation===180)&&(i>7||(k>6&&j<8||k<8&&j>6)&&i>5)?h&&n():h||m()}var b=navigator.userAgent;if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&/OS [1-5]_[0-9_]* like Mac OS X/i.test(b)&&b.indexOf("AppleWebKit")>-1))return;var c=a.document;if(!c.querySelector)return;var d=c.querySelector("meta[name=viewport]"),e=d&&d.getAttribute("content"),f=e+",maximum-scale=1",g=e+",maximum-scale=10",h=!0,i,j,k,l;if(!d)return;a.addEventListener("orientationchange",m,!1),a.addEventListener("devicemotion",o,!1)})(this);
+ </script>
- {% include nav.html %}
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body class="{{ page.bodyclass }}">
+ <div class="viewport">
+ <div class="navbar row-fluid">
+ <div class="navbar-inner">
+ <a class="brand" href="/mobifyjs/">
+ Mobify.js
+ </a>
- <!-- Not Implemented
- <form class="navbar-search pull-right" action="">
- <input type="text" class="search-query span2" placeholder="Search">
- </form>
- -->
+ {% include nav.html %}
- </div><!-- .navbar-inner -->
- </div><!-- .navbar -->
+ </div><!-- .navbar-inner -->
+ </div><!-- .navbar -->
- {{ content }}
+ {{ content }}
- </div>
- <div class="footer">
- <div class="row-fluid">
- <div class="span6">
- <p>Copyright &copy; 2012 <a href="//www.mobify.com/">Mobify</a>.</p>
- </div>
+ </div>
- <div class="span6">
- <ul class="nav pull-right">
- <li>
- <a href="//twitter.com/mobifyjs" title="Mobify on Twitter"><i class="icon-twitter"></i>@Mobifyjs</a>
- </li><li>
- <a href="//github.com/mobify" title="Mobify on Github"><i class="icon-github"></i>Github</a>
- </li><li>
- <a href="{{ site.baseurl }}/license/">License</a>
- </li>
- </ul>
- </div>
- </div><!-- .row-fluid -->
- </div><!-- .footer -->
- </body>
-</html>
+ <div class="footer">
+ <div class="row-fluid">
+ <div class="span6">
+ <p>Copyright &copy; 2013 <a href="//www.mobify.com/">Mobify</a>.</p>
+ </div>
+
+ <div class="span6">
+ <ul class="nav pull-right">
+ <li>
+ <a href="//twitter.com/mobifyjs" title="Mobify on Twitter">
+ <i class="icon-twitter"></i>@Mobifyjs
+ </a>
+ </li>
+ <li>
+ <a href="//github.com/mobify" title="Mobify on Github">
+ <i class="icon-github"></i>Github
+ </a>
+ </li>
+ <li>
+ <a href="{{ site.baseurl }}/license/">License</a>
+ </li>
+ </ul>
+ </div>
+ </div><!-- .row-fluid -->
+ </div><!-- .footer -->
+
+ <!-- JavaScript -->
+ <script src="{{ site.baseurl }}/static/js/highlight/highlight.pack.js"></script>
+ <script>hljs.initHighlightingOnLoad();</script>
+</body>
+</html>
View
14 www/_layouts/modules.html
@@ -3,12 +3,14 @@
bodyclass: modules module-single
---
+<script src="{{ site.baseurl }}/static/js/jquery.min.js"></script>
+
<div class="row-fluid reversed-column">
- <div class="span8">
- {{ content }}
- </div>
+ <div class="span8">
+ {{ content }}
+ </div>
- <div class="span4 sidebar-nav modules-nav shaded rounded">
- {% include nav-modules.html %}
- </div>
+ <div class="span4 sidebar-nav modules-nav shaded rounded">
+ {% include nav-modules.html %}
+ </div>
</div>
View
2  www/_layouts/page.html
@@ -5,6 +5,6 @@
<div class="row-fluid">
<div class="span12">
- {{ content }}
+ {{ content }}
</div>
</div>
View
8 www/about.md
@@ -1,8 +0,0 @@
----
-layout: page
-title: About mobify.js
----
-
-# About mobify.js
-
-Mobify.js is a client-side adaptation framework.
View
5 www/cla.md
@@ -1,6 +1,9 @@
---
layout: page
-title: Contributor License Agreement
+title: Mobify.js Contributor License Agreement
+description:
+ Learn the terms and conditions under which you can contribute changes
+ to Mobify.js open source project.
---
# Contributor License Agreement ("Agreement")
View
22 www/community.md
@@ -1,16 +1,20 @@
---
layout: page-community
-title: Mobify.js Community
+title: Mobify.js Community – Get Help, Report Bugs, &amp; Contribute
+description:
+ Find out how to get support, report bugs or issues and contribute changes
+ to Mobify.js open source project. Join a community of mobile website
+ developers.
---
## Where to get help?
-Questions are best posted on [StackOverflow](http://stackoverflow.com/) under
-the tag **mobifyjs**. Our team is active on StackOverflow for mobify.js and
+Questions are best posted on [StackOverflow](http://stackoverflow.com/) under
+the tag **mobifyjs**. Our team is active on StackOverflow for mobify.js and
other projects.
-If you have a problem with the [Mobify Cloud Platform](https://cloud.mobify.com/)
-or you wish to reach our Mobify Cloud support team you can reach us through our
+If you have a problem with the [Mobify Cloud Platform](https://cloud.mobify.com/)
+or you wish to reach our Mobify Cloud support team you can reach us through our
[support site](https://support.mobify.com/).
{:.cloud}
@@ -21,14 +25,14 @@ Bugs and feature requests should be submitted to our issue tracker on GitHub:
- [Issues with the Mobify.js Framework](https://github.com/mobify/mobifyjs/issues)
- [Issues with the Mobify Client](https://github.com/mobify/mobify-client/issues)
-If you're not sure which project to submit your issues to, submit to either and
+If you're not sure which project to submit your issues to, submit to either and
we will sort them out.
## How to Contribute
-The development of Mobify.js takes place on GitHub. We have two primary
-repositories dedicated to Mobify.js: the [Mobify.js Framework](https://github.com/mobify/mobifyjs)
-and the [Mobify Client](https://github.com/mobify/mobify-client), which is our
+The development of Mobify.js takes place on GitHub. We have two primary
+repositories dedicated to Mobify.js: the [Mobify.js Framework](https://github.com/mobify/mobifyjs)
+and the [Mobify Client](https://github.com/mobify/mobify-client), which is our
development tool.
Contributing changes is straightforward:
View
56 www/docs/appendix.md
@@ -1,6 +1,6 @@
---
layout: doc
-title: Appendix
+title: Appendix | Mobify.js Framework Documentation
---
# Appendix
@@ -8,47 +8,47 @@ title: Appendix
* TOC
{:toc}
-# Debugging
+# Debugging
## Tools
-Debugging Mobify.js adaptations requires the use of a web inspection tool like
-Webkit Inspector or Firebug. You're likely well-acquainted with one of these,
+Debugging Mobify.js adaptations requires the use of a web inspection tool like
+Webkit Inspector or Firebug. You're likely well-acquainted with one of these,
but here are a few quick start tips if not.
### Webkit Inspector
-The Webkit Inspector is a powerful web development tool that is built into the
+The Webkit Inspector is a powerful web development tool that is built into the
Safari and Chrome browsers.
-To enable the inspector in Safari, open the Preferences pane, click Advanced,
+To enable the inspector in Safari, open the Preferences pane, click Advanced,
then select _"Show Develop menu in menu bar"_. Open the inspector by right-clicking
on an element in a web page and then selecting _"Inspect Element"_.
-In Chrome, open the inspector by right clicking on an element in a webpage and
+In Chrome, open the inspector by right clicking on an element in a webpage and
then selecting _"Inspect Element"_.
### Firebug
-Firebug provides similiar behaviour to the WebKit Inspector in the Firefox
-browser. [Install the Firebug plugin](http://getfirebug.com/). Once installed,
-in the browser's _"View"_ menu, click the _"Firebug"_ option at the bottom to
+Firebug provides similiar behaviour to the WebKit Inspector in the Firefox
+browser. [Install the Firebug plugin](http://getfirebug.com/). Once installed,
+in the browser's _"View"_ menu, click the _"Firebug"_ option at the bottom to
initialize.
-For more on getting started with Firebug, watch [this helpful
+For more on getting started with Firebug, watch [this helpful
video](http://www.youtube.com/watch?v=2xxfvuZFHsM).
## Debugging the Konf
-The konf is written in JavaScript and you will often find syntax or logic errors
-springing up as you develop. The best way to debug the konf is with the Webkit
+The konf is written in JavaScript and you will often find syntax or logic errors
+springing up as you develop. The best way to debug the konf is with the Webkit
Inspector or the Firebug extension.
In development mode, the result of the evaluated konf, the context, is logged to
-the JavaScript console. Look for a the item _'All Extracted Data'_, which can be
+the JavaScript console. Look for a the item _'All Extracted Data'_, which can be
expanded to show what values were assigned to what keys.
-If you are stumped, try adding a `debugger;` statement into your konf. This will
+If you are stumped, try adding a `debugger;` statement into your konf. This will
cause the inspector's debugger to pause as the konf is evaluated:
'content': function() {
@@ -62,20 +62,20 @@ You can then use the inspector to step through the execution of your konf.
## Debugging Templates (Viewing source, inspecting rendered DOM)
Mobify.js adaptations are evaluated against the source DOM. _"View Source"_ shows
-the source HTML, not the result of the adaptation. In situations where you need
-to view the rendered DOM, use Firebug or the WebKit inspector. The DOM tab
-(labelled 'HTML' or 'Elements') displays a DOM tree that shows the adaptated
+the source HTML, not the result of the adaptation. In situations where you need
+to view the rendered DOM, use Firebug or the WebKit inspector. The DOM tab
+(labelled 'HTML' or 'Elements') displays a DOM tree that shows the adaptated
DOM. Browse this tree to see the full result of the adaptation.
# Common Issues
-Errors Mobify.js encounters during execution are logged to the JavaScript
-console. You can view these errors using Webkit Inspector or Firebug. If things
+Errors Mobify.js encounters during execution are logged to the JavaScript
+console. You can view these errors using Webkit Inspector or Firebug. If things
don't appear to be working, we suggest starting there!
## Page is blank, doesn't render at all
-Usually this will be accompanied by the error message:
+Usually this will be accompanied by the error message:
Uncaught SyntaxError: Unexpected string.
@@ -90,19 +90,19 @@ Usually this will be accompanied by the error message:
## "{some-key}" displayed on the page
-When a variable is rendered to the page instead of parsed with data from
+When a variable is rendered to the page instead of parsed with data from
your konf, this likely means you have used an illegal character in the key.
-**Solution:** Don't use illegal characters in keys. This includes almost all
- non-alphanumeric characters, ie. dashes (-), periods (.), commas (,), plus
+**Solution:** Don't use illegal characters in keys. This includes almost all
+ non-alphanumeric characters, ie. dashes (-), periods (.), commas (,), plus
signs (+), etc.
# Dust.js Documentation
-Mobify.js templates extend the Dust.js JavaScript templating language. For more
-advanced examples of the syntax, you might find it helpful to browse the
+Mobify.js templates extend the Dust.js JavaScript templating language. For more
+advanced examples of the syntax, you might find it helpful to browse the
[Dust documentation](http://akdubya.github.com/dustjs/).
-You will likely find there to be differences in terminology and syntax, so we
-suggest making sure you're knowledgable about Mobify.js templates before doing
+You will likely find there to be differences in terminology and syntax, so we
+suggest making sure you're knowledgable about Mobify.js templates before doing
so.
View
44 www/docs/cloud-getting-started.md
@@ -1,6 +1,6 @@
---
layout: doc
-title: Getting Started with the Mobify Cloud
+title: Getting Started with the Mobify Cloud | Mobify.js Framework Documentation
---
@@ -10,7 +10,7 @@ Mobify should be setup on your website before beginning this guide:
* You have inserted the Mobify tag onto your website.
- * You have downloaded the Mobify Client and ran the development
+ * You have downloaded the Mobify Client and ran the development
server using the command `mobify preview`.
* You have created or downloaded a project folder.
@@ -23,8 +23,8 @@ finish setting up your site!
# Introduction
In this guide you will alter the look and feel of your mobile site
-by changing the files in the project folder. You will learn how to
-select additional elements from your desktop site and how to use
+by changing the files in the project folder. You will learn how to
+select additional elements from your desktop site and how to use
different mobile templates on other pages of your site.
## Previewing your Work
@@ -32,10 +32,10 @@ different mobile templates on other pages of your site.
To see your changes you'll need to run the development server from
your project folder.
-In Terminal, change directory into your project. Start the development
+In Terminal, change directory into your project. Start the development
server by running the `mobify preview` command.
-On cloud.mobify.com browse to your project's "Preview" page. Select
+On cloud.mobify.com browse to your project's "Preview" page. Select
"localhost" to preview the adaptation created from the project folder
on your computer.
@@ -48,7 +48,7 @@ changes.
## Debugging your Work
-Debugging Mobify requires the use of a web inspection tool like WebKit
+Debugging Mobify requires the use of a web inspection tool like WebKit
Inspector or Firebug. [For more information visit the Mobify.js Appendix](http://www.mobify.com/mobifyjs/docs/appendix/#debugging).
----
@@ -56,13 +56,13 @@ Inspector or Firebug. [For more information visit the Mobify.js Appendix](http:/
# How does Mobify work?
When a mobile device arrives on your website, the Mobify tag activates
-and loads the adaptation to create your mobile site. In development,
+and loads the adaptation to create your mobile site. In development,
the adaptation is loaded from the development server running on your
computer.
The adaptation is created from the files in your project folder. The
-most import file in your project is the "mobify.konf" file. The "konf"
-is JavaScript file required by every Mobify project. It controls how
+most import file in your project is the "mobify.konf" file. The "konf"
+is JavaScript file required by every Mobify project. It controls how
your mobile site is created by performing a series of operations on
the DOM constructed from the page's original HTML or source DOM.
@@ -72,8 +72,8 @@ Start changing your mobile site by editing the konf!
# Diving into the Konf
-Open 'mobify.konf' with your text editor. You'll find it inside the 'src'
-folder of your project.
+Open 'mobify.konf' with your text editor. You'll find it inside the 'src'
+folder of your project.
Inside the konf you'll find CSS selectors used to select content
from your desktop site. In the konf, `$` references a Zepto object
@@ -111,14 +111,14 @@ syntax to avoid errors!
## Page Specific Selections
Up to this point you have been using the same selections on every
-page of your site. Often you will want elements to only be selected on
+page of your site. Often you will want elements to only be selected on
specific pages.
For instance, what if you'd like to select company information on the
"About" page but not on the "Home" page?
In the konf file, find the following block and uncomment it:
-
+
/*
,{
'!templateName': 'about',
@@ -143,12 +143,12 @@ through them:
are called "required" keys.
2. Run the functions assigned to the required keys. If any of
- them return falsey values, for example an empty collection,
+ them return falsey values, for example an empty collection,
advance to the next argument and repeat the process.
3. If all required keys return truthy values, run the rest of the
keys in the argument and return the result.
-
+
4. If no arguments match, return `undefined`.
So for the second argument added to `context.choose` to match, we must
@@ -170,10 +170,10 @@ Let's create that now!
----
-# Templates
+# Templates
Templates are text files that contain HTML markup, as well as variables
-that are replaced with the selections from the konf when the template
+that are replaced with the selections from the konf when the template
is rendered. The konf decides which template should be rendered based
on the contents of the source DOM.
@@ -184,10 +184,10 @@ Projects start with four templates:
including a mobile viewport, a default CSS file and a set of
block placeholders which can be overridden by other templates.
- * **home.tmpl**: A page template that extends the 'base.tmpl' to
+ * **home.tmpl**: A page template that extends the 'base.tmpl' to
create the homepage.
- * **_header.tmpl**: A partial template included by 'base.tmpl' to
+ * **_header.tmpl**: A partial template included by 'base.tmpl' to
creates the site's header.
* **_footer.tmpl**: A partial template included by 'base.tmpl' to
@@ -197,8 +197,8 @@ In the konf, _OUTPUTHTML_ calls `context.tmpl` which finds the matching
template and renders it.
When you referred to a new template, there was no corresponding template
-file for it! Create a file "&lt;template&gt;.tmpl" inside the templates
-folder where &lt;template&gt; is the value you assigned to _templateName_.
+file for it! Create a file "&lt;template&gt;.tmpl" inside the templates
+folder where &lt;template&gt; is the value you assigned to _templateName_.
Paste the following:
{>base/}
View
28 www/docs/getting-started.md
@@ -1,21 +1,21 @@
---
layout: doc
-title: Getting Started
+title: Getting Started | Mobify.js Framework Documentation
---
# Getting Started
You've downloaded the Mobify Client, created a project scaffold *myproject*,
-and put the tag on the page you'd like to adapt. You've completed the "Quick
+and put the tag on the page you'd like to adapt. You've completed the "Quick
Start" guide and now crave more.
Open _myproject/src/mobify.konf_ in your text editor. The konf is a JavaScript
file required by every Mobify.js project. It contains the DOM operations
-performed on the source DOM. The _mobify.konf_ generated by the scaffold selects
-the text content of the first `<p>` element and renders a template to
+performed on the source DOM. The _mobify.konf_ generated by the scaffold selects
+the text content of the first `<p>` element and renders a template to
display it.
-Let's change it to display to first `<a>` element on the page. Change the
+Let's change it to display to first `<a>` element on the page. Change the
*content* key to the following:
'content': function(context) {
@@ -28,29 +28,29 @@ Let's change it to display to first `<a>` element on the page. Change the
})
},
-Now open _myproject/src/tmpl/home.tmpl_ and replace _content.firstp_ with
+Now open _myproject/src/tmpl/home.tmpl_ and replace _content.firstp_ with
_content.link_:
-
+
<p class="extract">
{content.link}
</p>
-Save your changes and refresh the page. You should see the first link from your
+Save your changes and refresh the page. You should see the first link from your
adapted page:
![Yippy, we've got a link!](/mobifyjs/static/img/getting-started-link.png)
-Inside the konf, `$` is bound to [Zepto](http://zeptojs.com), which queries the
-source DOM. We've told the konf to select the first link and store it in the
-context under the key *content.link*. We then updated the varaible in the
+Inside the konf, `$` is bound to [Zepto](http://zeptojs.com), which queries the
+source DOM. We've told the konf to select the first link and store it in the
+context under the key *content.link*. We then updated the varaible in the
template to refer to this key in the konf.
Now click on the link you just created.
-The same adaptation is being applied to this page! Let's change the konf to
+The same adaptation is being applied to this page! Let's change the konf to
make different selections on this page and render a different template.
-The `context.choose` function can be used to make page specific selections.
+The `context.choose` function can be used to make page specific selections.
Here, we only render the _home_ template if the we're on the homepage:
'content': function(context) {
@@ -73,7 +73,7 @@ Here, we only render the _home_ template if the we're on the homepage:
Update your konf with the text above and refresh the page.
-Egads! It's a blank page. What's going on? Open the Webkit Inspector to see
+Egads! It's a blank page. What's going on? Open the Webkit Inspector to see
debugging information:
![Helpful debugging information is output to the console](/mobifyjs/static/img/getting-started-error.png)
View
26 www/docs/glossary.md
@@ -1,6 +1,6 @@
---
layout: doc
-title: Glossary
+title: Glossary | Mobify.js Framework Documentation
---
# Glossary
@@ -8,25 +8,25 @@ title: Glossary
Attribute
: Additional data values which may be returned along with variables.
-Each attribute maps to a specific member key within the parent key
+Each attribute maps to a specific member key within the parent key
in the konf.
Context
-: A set of key-value pairs that is used to provide values for
-variables in templates. The Mobify.js konf produces a context,
-built from your selections, and renders a template with that
+: A set of key-value pairs that is used to provide values for
+variables in templates. The Mobify.js konf produces a context,
+built from your selections, and renders a template with that
context.
[Learn more about context](../template-reference/#understanding-context).
Keys
-: A name that uniquely references a selection you make within the konf
+: A name that uniquely references a selection you make within the konf
file, also serves as a variable name within your templates.
Konf
-: A JavaScript file that enables content selection and template
+: A JavaScript file that enables content selection and template
rendering from a source DOM.
[Jazzcat]({{ site.baseurl }}/docs/jazzcat/)
@@ -39,21 +39,21 @@ Rendered DOM
Selection
-: DOM elements or other data returned by functions defined in the konf
-file, provide the values of the variables in templates to produce
+: DOM elements or other data returned by functions defined in the konf
+file, provide the values of the variables in templates to produce
the rendered DOM.
-Source DOM
+Source DOM
-: The DOM built from your site's original HTML, without running
+: The DOM built from your site's original HTML, without running
JavaScript, ie. the DOM you'd see if you viewed source.
Template
-: A text file that contains regular HTML markup and variables that are
+: A text file that contains regular HTML markup and variables that are
replaced when the template is rendered.
Variable
-: Context mapped data provided to your template from the konf
+: Context mapped data provided to your template from the konf
selections. Each variable maps to a key in the context.
View
4 www/docs/handling-javascript.md
@@ -1,6 +1,6 @@
---
layout: doc
-title: Handling Javascript with Mobify.js
+title: Handling Javascript | Mobify.js Framework Documentation
---
# Handling JavaScript with Mobify.js
@@ -97,7 +97,7 @@ execute. Imagine a script that increments the element returned by the
selector `#counter`:
var counterEl = document.getElementById('counter');
- counterEl.innerHTML =
+ counterEl.innerHTML =
parseInt(counterEl.innerHTML) + 1;
If the element matching the CSS selector \#counter does not exist in the
View
10 www/docs/image-resizing.md
@@ -1,9 +1,9 @@
---
layout: doc
-title: Image Resizing with Mobify.js
+title: Image Resizing | Mobify.js Framework Documentation
---
-The image resizing service is a [Mobify Cloud](https://cloud.mobify.com/)
+The image resizing service is a [Mobify Cloud](https://cloud.mobify.com/)
feature. You must be a Mobify Cloud user to use it with Mobify.js.
<a href="//cloud.mobify.com/" class="btn btn-primary rounded">Try Mobify Cloud for Free</a>
@@ -32,13 +32,13 @@ for mobile devices, reducing their weight!
## Usage
-Mobify.js provides an API to format images for use with the image
-resizing service. Inside your konf, use `$` to select the images you
+Mobify.js provides an API to format images for use with the image
+resizing service. Inside your konf, use `$` to select the images you
would like to resize and then format them using `resizeImages`:
'img': function() {
var $imgs = $('img').resizeImages();
- return $imgs;
+ return $imgs;
}
----
View
38 www/docs/index.md
@@ -1,6 +1,9 @@
---
layout: doc
-title: Mobify.js Documentation
+title: Mobify.js Framework Documentation
+description:
+ Find all necessary documentation for Mobify.js, an open source web
+ framework from Mobify that helps you adapt any website to support any device.
---
# Quick Start
@@ -21,15 +24,16 @@ Mobify.js is a JavaScript framework for adapting websites for tablet and mobile.
## Install the Mobify.js Tag
-Insert the Mobify.js tag **immediately** after the opening _<head>_ tag on the website you want to adapt:
+Insert the Mobify.js tag **immediately** after the opening _<head>_ tag on the
+website you want to adapt:
<script>
(function(window, document, mjs) {
window.Mobify = {points: [+new Date], tagVersion: [1, 0]};
- var isMobile = /ip(hone|od|ad)|android|blackberry.*applewebkit/i.test(navigator.userAgent)
- , optedOut = /mobify-path=($|;)/.test(document.cookie);
+ var isMobile = /ip(hone|od|ad)|android|blackberry.*applewebkit/i.test(navigator.userAgent);
+ var optedOut = /mobify-path=($|;)/.test(document.cookie);
if (!isMobile || optedOut) {
return;
@@ -38,8 +42,8 @@ Insert the Mobify.js tag **immediately** after the opening _<head>_ tag on the w
document.write('<plaintext style="display:none">');
setTimeout(function() {
- var mobifyjs = document.createElement('script')
- , script = document.getElementsByTagName('script')[0];
+ var mobifyjs = document.createElement('script');
+ var script = document.getElementsByTagName('script')[0];
mobifyjs.src = mjs;
script.parentNode.insertBefore(mobifyjs, script);
@@ -52,7 +56,9 @@ Insert the Mobify.js tag **immediately** after the opening _<head>_ tag on the w
1. Set your browser's User Agent to "iPhone":
- * In Chrome, open Webkit Inspector, click the gear in the bottom right, then the _"User agent"_ tab. Check _"Override User Agent"_ then select _"iPhone"_ from the dropdown.
+ * In Chrome, open Webkit Inspector, click the gear in the bottom right, then
+ the _"User agent"_ tab. Check _"Override User Agent"_ then select _"iPhone"_
+ from the dropdown.
* In Safari click _"Develop"_ > _"User Agent"_ > _"iPhone"_
* In Firefox download the [User Agent Switcher](https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/) extension.
@@ -64,13 +70,23 @@ Insert the Mobify.js tag **immediately** after the opening _<head>_ tag on the w
## How it works:
-Mobify.js uses a technique called **client side adaptation** to remix HTML in the browser. The remixed content is interpreted by the browser as if the server had sent it in the first place!
+Mobify.js uses a technique called **client side adaptation** to remix HTML in
+the browser. The remixed content is interpreted by the browser as if the server
+had sent it in the first place!
-The **Mobify.js tag** bootstraps the adaptation and loads the **Mobify.js file**, which performs it. The tag activates in iOS, Android and BlackBerry browsers. By default, the Mobify.js file is loaded from the development server.
+The **Mobify.js tag** bootstraps the adaptation and loads the **Mobify.js file**,
+which performs it. The tag activates in iOS, Android and BlackBerry browsers.
+By default, the Mobify.js file is loaded from the development server.
-The development server is part of the **Mobify Client**, a command line tool for building Mobify.js projects. It compiles the Mobify.js file dynamically per request. The file contains two parts, the **Mobify.js API** and site specific adaptations.
+The development server is part of the **Mobify Client**, a command line tool for
+building Mobify.js projects. It compiles the Mobify.js file dynamically per
+request. The file contains two parts, the **Mobify.js API** and site specific
+adaptations.
-Adaptations are expressed as a series of operations on the **source DOM**, the DOM constructed from the page's original HTML. HTML Elements can be selected, then rendered with a template. Finally, the rendered template is written to the browser.
+Adaptations are expressed as a series of operations on the **source DOM**, the
+DOM constructed from the page's original HTML. HTML Elements can be selected,
+then rendered with a template. Finally, the rendered template is written to the
+browser.
## Where to next?
View
82 www/docs/index.md.orig
@@ -1,82 +0,0 @@
----
-layout: doc
-title: Documentation
----
-
-# Quick Start
-
-Mobify.js is a JavaScript framework for adapting existing websites for tablet and mobile.
-
-1. Install <a href="http://nodejs.org/">Node.js</a> if you don't have it already.
-
-1. Download the [mobify-client](https://github.com/mobify/mobify-client):
-
- sudo npm -g install mobify-client
-
-1. Create a project scaffold and start the Mobify.js development server:
-
- mobify init myproject && cd myproject && mobify preview
-
-1. Insert the Mobify.js tag **immediately** after the opening <head> tag of the website you want to adapt:
-
- <script>
- (function(window, document, mjs) {
-
- window.Mobify = {points: [+new Date], tagVersion: [1, 0]};
-
- var isMobile = /ip(hone|od|ad)|android|blackberry.*applewebkit/i.test(navigator.userAgent)
- , optedOut = /mobify-path=($|;)/.test(document.cookie);
-
- if (!isMobile || optedOut) {
- return;
- }
-
- document.write('<plaintext style="display:none">');
-
- setTimeout(function() {
- var mobifyjs = document.createElement('script')
- , script = document.getElementsByTagName('script')[0];
-
- mobifyjs.src = mjs;
- script.parentNode.insertBefore(mobifyjs, script);
- });
-
- })(this, document, 'http://127.0.0.1:8080/mobify.js');
- </script>
-
-1. Set your browser's User Agent to "iPhone":
-
-<<<<<<< HEAD
- * [In Chrome, use the User-Agent Switcher plugin](https://chrome.google.com/webstore/detail/djflhoibgkdhkhhcedjiklpkjnoahfmg)
- * In Safari, Develop > User Agent > iPhone
-
-1. Navigate to your page. If the demo gods are kind, you'll see this:
-
-<div class="illustration">
-<img src="data:image/jpeg;base64,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" /></div>
-=======
- * In Chrome, open Webkit Inspector, click the gear in the bottom right, then the "User agent" tab. Check "Override User Agent" then select "iPhone" from the dropdown.
- * In Safari click "Develop" > "User Agent" > "iPhone"
- * In Firefox download the [User Agent Switcher](https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/) extension.
-
-1. Navigate to your page. If the demo gods are kind, you'll see this:
-
- <img src="/mobifyjs/static/img/init.png">
->>>>>>> aaa0475b62a1654178e759170d8b6170846c796f
-
-## How it works:
-
-Mobify.js uses a technique called **client side adaptation** to remix HTML on the browser. The remixed content is interrupted by the browser as if the server had sent it in the first place!
-
-The **Mobify.js tag** bootstraps the adaptation and loads the **Mobify.js file** which performs it. The tag activates for iOS, Android and BlackBerry browsers. By default, the Mobify.js file is loaded from the development server.
-
-The development server is part of the **Mobify Client**, a command line tool for building Mobify.js projects. It compiles the Mobify.js file dynamically per request. The file contains two parts, the **Mobify.js API** and site specific adaptations.
-
-Adaptations are expressed as a series of DOM operations on the **source DOM**, the DOM constructed from the page's original HTML. Selected elements can be stored in a context object which is then passed to a template. Then the rendered template is outputted to the browser!
-
-## Where to next?
-
-* [See how to change the scaffold files in "Getting Started"generated in the "Getting Started"](./getting-started/)
-* [Learn about how to adapt your site using DOM operations in "Understanding the Konf"](./understanding-konf/)
-* [See how templates can be used to control the adaptation in "Understanding Templates"](./understanding-templates/)
-* [Read tips for debugging Mobify.js in the Appendix](./appendix/)
View
18 www/docs/jazzcat.md
@@ -1,9 +1,9 @@
---
layout: doc
-title: Speedy Scripts with Jazzcat
+title: Speedy Scripts with Jazzcat | Mobify.js Framework Documentation
---
-Jazzcat is a [Mobify Cloud](https://cloud.mobify.com/) feature. You
+Jazzcat is a [Mobify Cloud](https://cloud.mobify.com/) feature. You
must be a Mobify Cloud user to use it with Mobify.js.
<a href="//cloud.mobify.com/" class="btn btn-primary rounded">Try Mobify Cloud for Free</a>
@@ -11,7 +11,7 @@ must be a Mobify Cloud user to use it with Mobify.js.
----
# Speedy Scripts with Jazzcat
-
+
Jazzcat improves script loading performance by enabling single request
loading of multiple JavaScript files.
@@ -33,8 +33,8 @@ single request:
## Usage
-Mobify.js provides an API to format scripts for use with Jazzcat.
-Inside your konf, use `$` to select the scripts that you would like to
+Mobify.js provides an API to format scripts for use with Jazzcat.
+Inside your konf, use `$` to select the scripts that you would like to
use with Jazzcat and then format them using `combineScripts`:
'scripts': function() {
@@ -42,7 +42,7 @@ use with Jazzcat and then format them using `combineScripts`:
return $scripts;
}
-Next write out the formatted scripts in a template. A good place is in
+Next write out the formatted scripts in a template. A good place is in
your _base.tmpl_ just before the `</body>`:
<html>
@@ -58,7 +58,7 @@ your _base.tmpl_ just before the `</body>`:
## Reference
### `$.fn.combineScripts()`
-
-Searches the collection for script elements and and modifies the
-external scripts to use the Jazzcat service. Returns all found scripts
+
+Searches the collection for script elements and and modifies the
+external scripts to use the Jazzcat service. Returns all found scripts
in DOM order.
View
80 www/docs/konf-reference.md
@@ -1,6 +1,6 @@
---
layout: doc
-title: Konf Reference
+title: Konf Reference | Mobify.js Framework Documentation
---
# Konf Reference
@@ -10,14 +10,14 @@ title: Konf Reference
## `$(selector)`
-Inside the `{<konf} ... {/konf}` block, `$` references the
-[Zepto](http://zeptojs.com/) object. Its context is bound to the source DOM
+Inside the `{<konf} ... {/konf}` block, `$` references the
+[Zepto](http://zeptojs.com/) object. Its context is bound to the source DOM
document.
**Differences from the Regular DOM**
Inside the source DOM, attributes on elements that would cause resource
-fetching are prefixed with `x-`.
+fetching are prefixed with `x-`.
| Tag | Prefixed Attributes |
|---------|---------------------|
@@ -40,14 +40,14 @@ fetching are prefixed with `x-`.
// RIGHT!!! Retrieve the prefixed attribute.
$('img').attr('x-src')
-For rendering, all prefixes are removed except for `img[x-width]` and
+For rendering, all prefixes are removed except for `img[x-width]` and
`img[x-height]`.
## `OUTPUTHTML`
-
-Is a special key in the konf. Any string assigned to it will be
-rendered immediately as the output of the page. For this reason,
-it should **always** be declared as the last key of the konf
+
+Is a special key in the konf. Any string assigned to it will be
+rendered immediately as the output of the page. For this reason,
+it should **always** be declared as the last key of the konf
object:
'OUTPUTHTML': function() {
@@ -60,10 +60,10 @@ will be rendered.
## `context.data(key)`
-Returns the value of a previously assigned key. The konf is evaluated
+Returns the value of a previously assigned key. The konf is evaluated
from top to bottom, so it is possible to access the value of previously
-assigned keys. For example you may wish to reuse a selection made for the
-_content_ within _footer_.
+assigned keys. For example you may wish to reuse a selection made for the
+_content_ within _footer_.
'content': function() {
return $('.page-content');
@@ -76,9 +76,9 @@ This assigns the value of the _content_ key to _footer_.
**Variable Resolution**
-`context.data` returns the matching key at the closest level. If
-the key is not found at the current level, it ascends to the parent
-level and tries again.
+`context.data` returns the matching key at the closest level. If
+the key is not found at the current level, it ascends to the parent
+level and tries again.
## `context.tmpl(templateName)`
@@ -89,11 +89,11 @@ Returns the matching _.tmpl_ file rendered against the evaluated konf.
return context.tmpl('home');
}
-By default, all _.tmpl_ files in the project's _tmpl/_ folder are
+By default, all _.tmpl_ files in the project's _tmpl/_ folder are
available to `context.tmpl`.
-A common pattern is to assign a template name to a key in the konf and
-later look it up with `context.data`. The template name can then be
+A common pattern is to assign a template name to a key in the konf and
+later look it up with `context.data`. The template name can then be
passed to `context.tmpl` for output with _OUTPUTHTML_:
'templateName': 'home',
@@ -113,7 +113,7 @@ Accepts a variable number of objects as arguments and executes the
first one that matches. It is useful for making specific selections based
on the page being currently rendered.
-An argument is said to match if all required keys, that is keys that
+An argument is said to match if all required keys, that is keys that
start with `!`, evaluate to truthy values:
'content': function(context) {
@@ -128,7 +128,7 @@ start with `!`, evaluate to truthy values:
})
}
-In this example, the first argument matches if the function assigned
+In this example, the first argument matches if the function assigned
to the _!home_ evaluates to a truthy value. If it doesn't, the next
argument would be tested.
@@ -158,11 +158,11 @@ Multiple required keys can be used to create "and" conditions:
},
}
-In this case the argument will only match if both _productCarousel_ and
+In this case the argument will only match if both _productCarousel_ and
_saleItems_ are truthy.
-A common pattern in the konf is to use `context.choose` to select
-template specific content and assign a key which will later be used as
+A common pattern in the konf is to use `context.choose` to select
+template specific content and assign a key which will later be used as
the template name:
'content': function(context) {
@@ -194,31 +194,31 @@ the following conditions:
obj.length && obj.length > 0
obj == true
-If none of these conditions are true then a value is considered
+If none of these conditions are true then a value is considered
falsey.
### Do not change the DOM in required selections {#do-not-modify-dom-in-required}
-All required keys in any argument may be evaluated. Non-required keys
+All required keys in any argument may be evaluated. Non-required keys
are only evaluated if the argument is matched. If the DOM is altered in
a required key, it may affect evaluation later in the konf leading to
-difficult to debug errors. Do not alter the DOM in required keys. Move
+difficult to debug errors. Do not alter the DOM in required keys. Move
DOM altering operations to non-required keys.
### Matching URLs with Mobify.urlmatch()
-Mobify.js provides the `Mobify.urlmatch()` function as a convenient method of
+Mobify.js provides the `Mobify.urlmatch()` function as a convenient method of
making matches based on patterns in the path portion of the URL.
-It takes as an argument a string containing a
-[path expression](../matching-to-urls#path-expressions), or a JavaScript
-`RegExp` object, and returns a function that will match the expression against
-`window.location.pathname`.
+It takes as an argument a string containing a
+[path expression](../matching-to-urls#path-expressions), or a JavaScript
+`RegExp` object, and returns a function that will match the expression against
+`window.location.pathname`.
-The returned function takes no arguments, and will return a regular expression
+The returned function takes no arguments, and will return a regular expression
object when it matches, and false otherwise.
-See the document [Matching Templates to URLs](../matching-to-urls) for further
+See the document [Matching Templates to URLs](../matching-to-urls) for further
reference.
## Reserved Keys
@@ -252,13 +252,13 @@ keys:
: Path to _mobify.js_
`config.HD`
-: A boolean flag that will be true if this device has a high density display
+: A boolean flag that will be true if this device has a high density display
`config.isDebug`
: A boolean flag that will be true if Mobify.js is running in debug mode
`config.orientation`
-: A string that will be "portrait" if the device is taller than it is wide, or
+: A string that will be "portrait" if the device is taller than it is wide, or
"landscape" if it is wider than it is tall
`config.os`
@@ -274,18 +274,18 @@ keys:
: Version of the Mobify tag used on this site
`config.touch`
-: A boolean flag that will be true if touch events are supported, false
+: A boolean flag that will be true if touch events are supported, false
otherwise
`configName`
-: A property pulled from _project.json_ - most likely the unique identifier for
+: A property pulled from _project.json_ - most likely the unique identifier for
your site
`cssName`
: A function returning the name of the css file to be applied
`imageDir`
-: A function returning a path to where mobify adaptation specific images are
+: A function returning a path to where mobify adaptation specific images are
kept
`mobileViewport`
@@ -295,7 +295,7 @@ kept
: An object containing analytics configuration information
`touchIcon`
-: The location of a file to be used as the bookmark icon for this website on iOS
+: The location of a file to be used as the bookmark icon for this website on iOS
devices
`unmobify`
@@ -303,7 +303,7 @@ devices
## Best Practices
-* DO: Prefer the matching of more complete DOM outlines over single
+* DO: Prefer the matching of more complete DOM outlines over single
selectors when assigning templates to specific pages.
* DO NOT: [Alter the source DOM in required selectors](#do-not-modify-dom-in-required)
View
46 www/docs/matching-to-urls.md
@@ -1,19 +1,19 @@
---
layout: doc
-title: Matching Templates to URLs
+title: Matching Templates to URLs | Mobify.js Framework Documentation
---
# Matching Templates to URLs
-Though you're encouraged to match templates in Mobify.js by locating unique DOM
+Though you're encouraged to match templates in Mobify.js by locating unique DOM
elements, you can also match templates against URLs.
-Mobify.js provides the `Mobify.urlmatch()` helper function to enable this. In
+Mobify.js provides the `Mobify.urlmatch()` helper function to enable this. In
your konf, you pass it a string containing a Mobify path matching pattern, or a
-regular expression, and it will return a function to be used to check whether
-the URL of the page matches that pattern or expression.
+regular expression, and it will return a function to be used to check whether
+the URL of the page matches that pattern or expression.
-For example, in your konf, in a call to the choose function, you could cause the
+For example, in your konf, in a call to the choose function, you could cause the
about template to be selected like so:
{
@@ -26,30 +26,30 @@ about template to be selected like so:
<h2 id="path-expressions"> Mobify.urlmatch() Path Expressions </h2>
-Path expressions let you match templates to URL paths of pages on your site.
+Path expressions let you match templates to URL paths of pages on your site.
### Placeholder Matching
-For example, a blog article might have the path
-`/articles/2012/376562/15-ways-to-make-great-lists/`, but you could express the
-paths for all articles using the pattern `"/articles/*/*/*/"`, or only articles
-from 2012 with `"/articles/2012/*/*/"`. Here we see that `*` is used to mark a
+For example, a blog article might have the path
+`/articles/2012/376562/15-ways-to-make-great-lists/`, but you could express the
+paths for all articles using the pattern `"/articles/*/*/*/"`, or only articles
+from 2012 with `"/articles/2012/*/*/"`. Here we see that `*` is used to mark a
path component as a variable that is allowed to differ, but must be present.
-If our URL structure were different, and we used a category as the first
-component of the URL like `/science/articles/72633/` and
-`/politics/articles/95828`, but would like to match articles regardless of
+If our URL structure were different, and we used a category as the first
+component of the URL like `/science/articles/72633/` and
+`/politics/articles/95828`, but would like to match articles regardless of
category, we could use the expression `"/*/articles/*/"` to match both of these.
### Wildcard Matching
-Other times, we would like to match all URLs prefixed with a common path, to do
+Other times, we would like to match all URLs prefixed with a common path, to do
this we use wildcard matching. For example, in a blog, a post without titles
-would have a path such as `/post/29803152490` and a post with a title would have
+would have a path such as `/post/29803152490` and a post with a title would have
a path of `/post/29800908081/10-best-10-best-lists of all-time`.
-We can match both of these with the expression `"/post/*"`. Note the lack of a
-trailing slash in comparison to the placeholder match: ending the expression
+We can match both of these with the expression `"/post/*"`. Note the lack of a
+trailing slash in comparison to the placeholder match: ending the expression
with `*` will cause any path components after the one specified to match.
### Examples
@@ -60,7 +60,7 @@ with `*` will cause any path components after the one specified to match.
| `"/"` | `/` |
| `"/*"` | Any path* |
| `"/*/"` | `/foo`, `/bar/` |
-| `"/foo"` | `/foo`, `/foo/` |
+| `"/foo"` | `/foo`, `/foo/` |
| `"/foo/*"` | `/foo/bar`, `/foo/baz/`, `/foo/bar/baz`|
| `"/foo/bar"` | `/foo/bar`, `/foo/bar/`|
| `"/*/bar"` | `/foo/bar/`, `/baz/bar` |
@@ -68,12 +68,12 @@ with `*` will cause any path components after the one specified to match.
| `"/foo/*/baz/*"`| `/foo/bar/baz/qux`, `/foo/qux/baz/quux/bar` |
-\* The expression `"/*"` is a special case of the wildcard expression, it will
-match any and every path, including `/`, other paths ending in the wildcard
+\* The expression `"/*"` is a special case of the wildcard expression, it will
+match any and every path, including `/`, other paths ending in the wildcard
match require _at least_ one path component present in place of the `*`.
## Matching with Regular Expressions
-You can also pass in a JavaScript `RegExp` object, the returned function will
-call the `RegExp`'s `.test()` method against `window.location.pathname` and if
+You can also pass in a JavaScript `RegExp` object, the returned function will
+call the `RegExp`'s `.test()` method against `window.location.pathname` and if
it matches, return the expression, and otherwise return false.
View
8 www/docs/mobifyjs-in-production.md
@@ -1,19 +1,19 @@
---
layout: doc
-title: Mobify.js in Production
+title: Mobify.js in Production | Mobify.js Framework Documentation
---
# Mobify.js in Production
-You have created a mobile site using Mobify.js and you want to go live
+You have created a mobile site using Mobify.js and you want to go live
with it, or you want to run it on a testing/staging environment.
Excellent! There are just a few steps to make that happen.
## Compiling Files
-In development, Mobify.js files are served dynamically by the
-Mobify Client development server. In production, we'd like to serve
+In development, Mobify.js files are served dynamically by the
+Mobify Client development server. In production, we'd like to serve
these files from a static webserver.
Run the `mobify build` command from root project folder to compile the
View
56 www/docs/responsive.md
@@ -1,28 +1,28 @@
---
layout: doc
-title: Going Responsive
+title: Going Responsive | Mobify.js Framework Documentation
---
# Going Responsive with Mobify.js
-Mobify.js allows you to adapt a page's markup for mobile devices.
-[Responsive Web Design](http://en.wikipedia.org/wiki/Responsive_Web_Design)
+Mobify.js allows you to adapt a page's markup for mobile devices.
+[Responsive Web Design](http://en.wikipedia.org/wiki/Responsive_Web_Design)
is similarly powerful technique for adapting a page for mobile.
-We believe there's a time and a place for both. Responsive is great on
-content-forward websites where you have full control over the original
-markup. Mobify.js excels in situations where the original markup isn't
-well-suited for mobile or can't be modified. Mobify.js also offers more
-fine-grained control over UX and allows per-device performance
+We believe there's a time and a place for both. Responsive is great on
+content-forward websites where you have full control over the original
+markup. Mobify.js excels in situations where the original markup isn't
+well-suited for mobile or can't be modified. Mobify.js also offers more
+fine-grained control over UX and allows per-device performance
optimization.
-But this doesn't need to be an either/or decision, you can use responsive
+But this doesn't need to be an either/or decision, you can use responsive
+ Mobify.js side by side and take advantage of the strengths of each.
## Combining Mobify.js with Responsive
-If you're Mobify.js, working with responsive is simple. In your mobile
-style sheet, add media queries as you normally would at your desired
+If you're Mobify.js, working with responsive is simple. In your mobile
+style sheet, add media queries as you normally would at your desired
breakpoints:
@media (max-width: 320px) {
@@ -36,14 +36,14 @@ breakpoints:
}
}
-If you'd like to use Mobify.js to enhance an existing repsonsive site,
-you'll likely want to forego a full mobile site adaptation. Instead
-you can use the konf to cherry-pick more granular adaptations, and
+If you'd like to use Mobify.js to enhance an existing repsonsive site,
+you'll likely want to forego a full mobile site adaptation. Instead
+you can use the konf to cherry-pick more granular adaptations, and
ignore Mobify.js templates completely.
-The first thing you'd do is configure your konf to pass through your
+The first thing you'd do is configure your konf to pass through your
site's original DOM instead of adapting it:
-
+
'OUTPUTHTML': function(context) {
return context.data('$html').prop('outerHTML')
}
@@ -82,27 +82,27 @@ So your final konf might look something like this:
## Responsive UI Modules
-We've begun a library of UI modules that work with Mobify.js to help you
-create mobile sites faster. These modules are fully responsive, and will
-easily integrate into new and existing sites alike.
+We've begun a library of UI modules that work with Mobify.js to help you
+create mobile sites faster. These modules are fully responsive, and will
+easily integrate into new and existing sites alike.
[Check out the first few](/mobifyjs/modules/), more are on the way.
## Cloud Enhancements
-The Mobify Cloud offers additional services that can enhance any
+The Mobify Cloud offers additional services that can enhance any
responsive site:
- * **Image Resizing** -- Our image resizing service automatically
- scales and resizes images, then serves only the most appropriate
- one for a user's device. It also enables the use of high-density
- (Retina) inline `img` elements without the performance hit of
+ * **Image Resizing** -- Our image resizing service automatically
+ scales and resizes images, then serves only the most appropriate
+ one for a user's device. It also enables the use of high-density
+ (Retina) inline `img` elements without the performance hit of
double-loading.
- * **Combo** -- our JavaScript optimization service. Combo improves
- your site's JavaScript delivery for mobile and desktop alike.
- It combines HTTP requests for multiple scripts into a single request
- and caches the scripts client-side in HTML5 localStorage where
+ * **Combo** -- our JavaScript optimization service. Combo improves
+ your site's JavaScript delivery for mobile and desktop alike.
+ It combines HTTP requests for multiple scripts into a single request
+ and caches the scripts client-side in HTML5 localStorage where
available.
The Mobify Cloud base plan is free, [give it a try it now](https://cloud.mobify.com/).
View
42 www/docs/template-reference.md
@@ -1,6 +1,6 @@
---
layout: doc
-title: Template Reference
+title: Template Reference | Mobify.js Framework Documentation
---
# Template Reference
@@ -29,7 +29,7 @@ The context is a tree of all the keys that your konf has evaluated
that apply to this template.
When developing with Mobify.js, you can view the full tree within your
-browser's Javascript console (see [our tools guide in the
+browser's Javascript console (see [our tools guide in the
appendix]({{ site.baseurl }}/docs/appendix/#tools), if
you're not familiar with its use). Browse to the page you'd like to
inspect, open the console and find `All extracted data` -- expand it
@@ -39,7 +39,7 @@ Mobify generates during operation, see
[Reserved Keys]({{ site.baseurl }}/docs/konf-reference/#reserved-keys)
for a list of these.
-Note that when we talk about changing levels of context below, we mean traversing
+Note that when we talk about changing levels of context below, we mean traversing
the levels of this context tree.
@@ -58,7 +58,7 @@ syntax:
### Assign a selection to a key, in the konf:
'search': function() {
- return $("form#search");
+ return $("form#search");
},
### Render the result of the `search` key selection in the konf as a
@@ -112,7 +112,7 @@ template tag:
### The selection in the konf:
'warning': function() {
- return $(".warning");
+ return $(".warning");
},
### Add a filter to the `warning` variable within your template:
@@ -130,19 +130,19 @@ the previous one.
### Available Filters
-* `innerHTML` - render the `innerHTML` of a Zepto collection or DOM
- element. Note: the output of this filter will be HTML
+* `innerHTML` - render the `innerHTML` of a Zepto collection or DOM
+ element. Note: the output of this filter will be HTML
escaped, chain with `s` to safely render as HTML.
-* `openTag` - output the literal opening tag of a DOM element. Note:
- the output of this filter will be HTML escaped, chain
+* `openTag` - output the literal opening tag of a DOM element. Note:
+ the output of this filter will be HTML escaped, chain
with `s` to safely render as HTML.
-* `closeTag` - output the literal closing tag of a DOM element.
- Note: the output of this filter will be HTML escaped,
+* `closeTag` - output the literal closing tag of a DOM element.
+ Note: the output of this filter will be HTML escaped,
chain with `s` to safely render as HTML.
-* `s` - render HTML safe output, unescapes HTML escaped strings, such
+* `s` - render HTML safe output, unescapes HTML escaped strings, such
as values filtered through the `innerHTML` filter.
@@ -183,7 +183,7 @@ syntax:
<div id="fixed-nav">
<h1>DemoCorp Inc.</h1>
- </div>
+ </div>
Note that you can also access the same attribute within your template
by descending into the header block, which is valuable when you have
@@ -228,7 +228,7 @@ current iteration:
}
}
-### Descend into the `header` variable to access `logo` and `nav`
+### Descend into the `header` variable to access `logo` and `nav`
attributes, also iterate `nav`:
<div id="fixed-nav">
@@ -257,7 +257,7 @@ attributes, also iterate `nav`:
<a href="/contact/">Contact</a>
</li>
</ul>
- </div>
+ </div>
## `{>foo/}` - Include The Partial `foo` Inside The Current Template
@@ -317,7 +317,7 @@ included template _products.tmpl_:
{<header}
More Specific Products Header!
{/header}
-
+
Note that a special variable is available within a block that allows
you to access the content that would otherwise be replaced from a
block being overridden. This variable is called `_SUPER_` and it
@@ -346,7 +346,7 @@ Provide conditional output based on the existence of a variable.
{:else}
Please login.
{/user}
-
+
Here, if the key 'user' is defined and non-empty in the context, the
template will render a greeting to the user, otherwise, it will render
the text "Please Login".
@@ -356,13 +356,13 @@ the text "Please Login".
Provide conditional output based on the non-existence of a variable.
This template will render be the same as above.
-
+
{^user}
Please login.
{:else}
Welcome {user}.
{/user}
-
+
## `{{ '{%' }}script} ... {/script}` - Inline Script Pragma
@@ -391,7 +391,7 @@ Text surrounded by `{!` and `!}` are considered comments and will not be rendere
## Mobify.desktop() - Back to Desktop
-Add this anchor tag to your templates to allow users to revert back to the
+Add this anchor tag to your templates to allow users to revert back to the
non-mobified version of your site:
<a href="" onclick="Mobify.desktop();return false;">
@@ -411,7 +411,7 @@ So the best thing to do here is to conditionally insert this element into your d
<script type="text/javascript">
if (/ip(hone|od)|android.*(mobile)|blackberry.*applewebkit/i.test(navigator.userAgent)) {
- var backToMobile = document.createElement("div");
+ var backToMobile = document.createElement("div");
backToMobile.innerHTML = '<a href="#" onclick="document.cookie=\'mobify-path=;expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/\';location.reload()">Mobile Site</a>';
document.getElementById("**ELEMENT_TO_APPEND_TO**").appendChild(backToMobile);
}
View
30 www/docs/understanding-konf.md
@@ -1,13 +1,13 @@
---
layout: doc
-title: Understanding the Konf
+title: Understanding the Konf | Mobify.js Framework Documentation
---
# Understanding the Konf
-The konf is a JavaScript file required by every Mobify.js project. In
+The konf is a JavaScript file required by every Mobify.js project. In
the default project scaffold it lives at _src/mobify.konf_. It controls
-how the page is adapted for different devices and is responsible for
+how the page is adapted for different devices and is responsible for
selecting elements from the source DOM, picking a template and rendering
the output to the browser.
@@ -24,13 +24,13 @@ Here is a minimal _mobify.konf_:
} {/konf}
-Inside the `{<konf} ... {/konf}` block, we declare the konf object.
-We give the konf object a key _[OUTPUTHTML]({{ site.baseurl }}/docs/konf-reference/#outputhtml)_
-and assign that to a function that returns an HTML string. When the konf
+Inside the `{<konf} ... {/konf}` block, we declare the konf object.
+We give the konf object a key _[OUTPUTHTML]({{ site.baseurl }}/docs/konf-reference/#outputhtml)_
+and assign that to a function that returns an HTML string. When the konf
object is evaluated, the function assigned to _OUTPUTHTML_ is called.
The value assigned to _OUTPUTHTML_ is immediately rendered to the browser.
-The konf object is an ordinary JavaScript object so we can add other keys
+The konf object is an ordinary JavaScript object so we can add other keys
to it:
{>"/base/lib/base_konf.konf"/}
@@ -46,7 +46,7 @@ to it:
} {/konf}
Here we have added the key _body-element_ which queries the source DOM
-by calling `$('body')` and returning the result. Inside the konf block,
+by calling `$('body')` and returning the result. Inside the konf block,
`$` references the [Zepto](http://zeptojs.com/) object and is the primary
method for selecting elements.
@@ -67,7 +67,7 @@ Konf key values _must_ be functions that return their selections:
return $('body');
}
-All konf key functions are passed an argument called [`context`]({{ site.baseurl }}/docs/konf-reference/).
+All konf key functions are passed an argument called [`context`]({{ site.baseurl }}/docs/konf-reference/).
The argument is optional, and enables additional functionality:
'body-element': function() {
@@ -78,9 +78,9 @@ The argument is optional, and enables additional functionality:
}
Here, the function assigned to the _images_ uses [`context.data`]({{ site.baseurl }}/docs/konf-reference/#context-data)
-to look up the previously assigned value of _body-element_, which is
-a Zepto set containing the source DOM's _<body>_ element.
-It then finds all of its child _<img>_ elements using Zepto's
+to look up the previously assigned value of _body-element_, which is
+a Zepto set containing the source DOM's _<body>_ element.
+It then finds all of its child _<img>_ elements using Zepto's
`find` function.
## Konf in Practice
@@ -135,10 +135,10 @@ evaluates the first one that matches. An argument is said to match if
all keys starting with `!` evaluate to truthy values.
In the example above, when _content_ is evaluted, `context.choose` is
-called. It checks the first argument and finds one required key, _home_. If
-`$('#home')` is found in the source DOM then the first argument will match.
+called. It checks the first argument and finds one required key, _home_. If
+`$('#home')` is found in the source DOM then the first argument will match.
`context.choose` will then add the keys _templateName_ and _home_ under the
-group _content_. If `$('#home')` is not found, it would move to the next
+group _content_. If `$('#home')` is not found, it would move to the next
argument and repeat the process.
Later, when _OUTPUTHTML_ is evaluted, the value of _content.templateName_
View
22 www/docs/understanding-templates.md
@@ -1,13 +1,13 @@
---
layout: doc
-title: Understanding Templates
+title: Understanding Templates | Mobify.js Framework Documentation
---
# Understanding Templates
-
+
In Mobify.js, templates are text files that contain HTML markup, as
well as variables that are replaced with the selections from the konf
-when the template is rendered. The konf decides which template should
+when the template is rendered. The konf decides which template should
be rendered based on the contents of the source DOM.
## Templates in Theory
@@ -33,13 +33,13 @@ and later call `context.tmpl` on it:
If `'home'` is assigned to _content.templateName_ the template
-compiled from _src/tmpl/home.tmpl_ will be rendered. This is explained
+compiled from _src/tmpl/home.tmpl_ will be rendered. This is explained
in more detail in the [Konf Reference]({{ site.baseurl }}/docs/konf-reference/).
By default, Mobify.js compiles _.tmpl_ files from the _src/tmpl/_
directory and makes them available to `context.tmpl`.
-Templates are text files that construct an HTML document. A simple
+Templates are text files that construct an HTML document. A simple
_home_ template might look like this:
<!DOCTYPE html>
@@ -75,8 +75,8 @@ markup:
## Templates in Practice
Websites generally have the same common templates: a header, footer,
-base, and page specific templates. We include these different
-templates in our scaffold when you initially create a product. For
+base, and page specific templates. We include these different
+templates in our scaffold when you initially create a product. For
example, a home template would typically look like this:
{>base/}
@@ -91,8 +91,8 @@ example, a home template would typically look like this:
{/content}
_{>base/}_ is a **partial**, or template include, that uses base as its
-parent template. _{<content}_ is a **block override** that overrides the
-content **block placeholder** within the base template. Here is a basic
+parent template. _{<content}_ is a **block override** that overrides the
+content **block placeholder** within the base template. Here is a basic
example of a base template:
<html>
@@ -107,10 +107,10 @@ example of a base template:
</body>
</html>
-{+content} is the block placeholder being overridden in the
+{+content} is the block placeholder being overridden in the
home template. We also have {>_header} and {>_footer}, which are two more
partials that insert the _header and _footer files above and below the
-content block. Thus, any page that includes base will also have the header
+content block. Thus, any page that includes base will also have the header
and footer.
---
View
14 www/examples/index.md
@@ -1,6 +1,10 @@
---
layout: example
-title: Mobify.js Examples
+title: Mobify.js Framework Examples
+description:
+ Find examples of how Mobify.js can be used to adapt any website to support
+ any device.
+
---
# Examples
@@ -13,7 +17,7 @@ All code is available on Github: [github.com/mobify/mobifyjs-demos](https://gith
## Demo Site - [demostore.mobify.com](http://demostore.mobify.com) {#demostore}
-Uncle Merlin's Discount Potions is a Magento store that uses Mobify.js to
+Uncle Merlin's Discount Potions is a Magento store that uses Mobify.js to
provide an optimized view for mobile devices.
### Running the Code:
@@ -34,8 +38,8 @@ provide an optimized view for mobile devices.
### Changing the Code:
-With the development server running, you can make updates to the Demo Store
-project files with your text editor and then refresh the page to see your
+With the development server running, you can make updates to the Demo Store
+project files with your text editor and then refresh the page to see your
changes. Start with these files:
* _src/mobify.konf_ contains the DOM operations to select and adapt the source
@@ -51,6 +55,6 @@ changes. Start with these files:
## Where to Next?
-If you want to understand more about how this stuff works, be sure to check out our
+If you want to understand more about how this stuff works, be sure to check out our
[documentation](../docs/), and if you have any questions, head over
to our [community](../community/) page.
View
106 www/index.html
@@ -1,6 +1,6 @@
---
layout: base
-title: Mobify.js - Remix Your Site for Mobile Devices
+title: Mobify.js - Remix Your Site for Mobile and Tablet Devices
bodyclass: home
---
@@ -10,20 +10,27 @@
Remix your HTML, CSS and JavaScript for <strong>better mobile sites</strong>.
</p>
<p class="lead-mini">
- Mobify.js is an open source client-side web framework that helps you adapt any website to support any device. Powering millions of daily mobile visits to your favourite websites.
+ Mobify.js is an open source client-side web framework that helps you
+ adapt any website to support any device. Powering millions of daily
+ mobile visits to your favourite websites.
</p>
</div>
<div class="span6 video-container">
<div class="video rounded shaded">
- <a href="https://vimeo.com/45657333" class="play"><i>Play Video</i></a>
+ <a href="//vimeo.com/45722921" class="play">
+ <i>Play Video</i>
+ </a>
<h3>Coding A Mobile Site with Mobify.js</h3>
- <iframe src="http://player.vimeo.com/video/45722921" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
+ <iframe src="//player.vimeo.com/video/45722921"
+ frameborder="0"
+ webkitAllowFullScreen
+ mozallowfullscreen