This is the first demo section of a prototyping tool that allows a person to leverage their knowledge of html and css, without needing extensive knowledge of javascript (or any at all) to create a mostly working prototype of a website or app. The goal is not to allow the complete creation of a working application (although it certainly could be done) but to provide a basis for production that can more easily be transitioned into actual development than most current offerings.
The problem with most current prototyping implementations is that they often take a good amount of design work that must all be completely redone once actual programming work is put forward. With ProtoTight a working viable prototype can be provided to a development team and a lot of css and html will have already been created, greatly reducing the transition period between prototype and bootstrapping.
If you want the full experience, Add this page to your homescreen.
In iOS Safari, click the share button, scroll to the right, and choose "Add to Homescreen".
In Android Chrome, click the shishkabob menu, and choose "Add to Homescreen".
Open up the demo from your homescreen and enjoy it as if it was a for real reals app.
If you want to be understanding anything about what's going on beneath the hood of this demo, you'll need to be looking at the html, css, and javascript code.
ProtoTight uses sections to define different app "pages". Each section of a ProtoTight app has its own unique id, and so linking to any of them is as easy as making a jump link to it. These can be any type of element, as long as it has a data-role="jump" hook, and an href attribute that links to an #id.
The anchor below works using the jump, even though it looks like a button. Using your own styles will help you design things however you want them to look, but anything can have a .proto-jump added to it, even this phrase (click me).
<a class="btn" data-role="jump" href="#page-activate">On to Activations</a>
This demo deals with view heights in a couple ways. All of the data-role="page" elements have been given a position:fixed, and a height:100%. Normally height 100% doesn't work on elements that don't have a parent with height. But it turns out fixed position elements are pulled out of flow and now take on the percentage height of the literal view. This allows all the child elements to use percentages and they are the visible view.
On a secondary note, in order to stop the drag refreshing of pages, the overflow-y of the html,body is being set to hidden. Since the pages are all set to fixed and 100% anyways, having the html,body handled this way isn't a problem, and for some reason stop browser drag refreshing.
I tried a lot of options for dynamic interactive content that just started ballooning out of control. But I finally settled on the simple javascript of adding, removing, and toggling an "active" class on elements and allowing a designer to do whatever they want to do with that. Ultimately, this library is supposed to be as unobtrusive as possible, and this seems like the best solution. So how does one use this?
Using the activate functions is as easy as using the [data-activate] attribute. For instance:
<button class="btn" data-activate="next">Click this</button>
<span class="glows">This activates once</span>
This activates once
That's the core of the idea. This can be used all over your app, and simply have css do something to an element when the "active" class is present. You design the css, ProtoTight provides the classes. There are a number of options. [data-activate], [data-deactivate], and [data-toggle]. Each of these can be passed any selector to activate that element. There are also a couple of helper values available. "next", "prev", and "parent" will all activate relative elements.
<span class="glows">This toggles on and off</span>
<button class="btn" data-toggle="prev">Click this twice</button>
This toggles on and off
This actually opens up your design to all kinds of simple enough interactions on javascript's part, although possibly some very interesting interactions on the part of your stylesheets.
<button class="btn" data-activate="#page-activate .modal">Open Modal</button>
<button class="btn" data-activate="#page-activate .drawer">Open Drawer</button>
Basic concepts like these modals and drawers are built into the proto_theme.min.css file, but are not needed by any means. You are not stuck with our design palette, and you can create whatever you want, the only thing the activate deactivate and toggle attributes do to your page is add or remove a class called "active". You can use this class however you want in your own code.
This is nearly the same thing as a modal. This side drawer can be activated and deactivated in the exact same innumerable ways.
If you're a designer, you know that having to change 15 of the same thing is truly annoying. ProtoTight comes with a simple tool to duplicate html content on the page, in the form of text templates.
Create an element with an ID and some inner content that you want to only structure once. Then make an element somewhere on your document that references the same element with a data-template attribute. something like:
<div data-template="#design"></div>
<script type="text/template" id="design">
<span>This will be placed there</span>
</script>
The element dataset gets passed into the template string when it's used, so you can make dynamic text/templates. Use custom data-attributes in the data-template element and it will be replaced into the text/template html.
<div data-role="header" data-template="#header-title-template" data-title="Unique Title"></div>
Here, we have a template for what a user page looks like, and we can just add in data, to see what it looks like. On section 5, you'll see how custom code can be used to run a database through your templates, a designer can just as easily make hard coded data-template elements that utilize dynamic text/templates. Now you design this component once, and try different values in it on different pages.
<div data-template="#user-template" data-name='{"first":"John"}' data-img="img/temp_300.png" data-email="john@john.com" data-phone="555-2424" data-address="57 Someplace Dr., Tucson AZ, 85705"></div>
Custom and dynamic code will need to make use of the "pageshow" event attached to the document. This event will allow any arbitrary code to be run whenever any page is loaded into view.
This list is being created from a json file being loaded into the document. ProtoTight is capable enough to work with custom code. Because it is unopinionated, it won't get in the way of your code, but it also only has limited tools to help you along.