Templates

Franky: a detail view full of small widgets

Franky is our little monster. After review hundred of detail views in mobile apps, Sonia found the kind of components more usable and used and put them all in a unique view, as a sample of what a detail view commonly includes.

This pattern will help you understand not only how to structure a kind of window like this, but also to have quick access to a library of ready-to-use components that you can reuse.

It uses several custom widgets ready to reuse and support for FontAwesome icons

Franky

Settings form: a template for modifying and input data

All we know what a settings form is, how often we use and develop them for apps and how long it takes to get fully working,
including data validation, option pickers and so on.

This template will boost the process of creating new forms and will do it super easy to edit and maintain the code.

Now supports text fields, option fields and switch fields. This template is in development and will be updated soon with more field types.

Settings

Sign in & up form: a step-by-step template

It is becoming more than usual that some input data processes, as for example sign up, buying process and so on, are made in a step-by-step way, so the user is more comfortable and not swamped by a large quantity of data to fill in.

This example adds all the required logic to create the step-by-step navigation and also adds an high level of customization for your process.

By now, only text fields are supported, with several validation methods, support for custom validation methods, synchronous and asynchronous validation and invalid data detection.

The form is created from a JSON data structure, containing a definition of the fields to include, type of field and some other options as if it is mandatory, callback validation function and so on.

Sign Up

List: a template full of interaction samples

coming soon…