Overview

Introduction

ItsyUI, the world’s most opinionated UI framework to build cross-platform applications.

The official guide assumes basic level knowledge of HTML, CSS, and JavaScript. If you are totally new to JavaScript development, it might be the best to grasp the basics then come back and reading through the guide.

What is ItsyUI?

ItsyUI is a,

  • State Management library.
  • Set of rich UI components specifically designed for metadata driven UI.
  • Packaged with readymade features targeting web, ios, android and pwa apps.

Future-Proof Architecture

ItsyUI has generally 3 high-level layers,

  1. Shell Widgets - Written in pure ReactJS + Finite State Machines, and defines the behavior of a widget.
  2. UI Widgets - The UI layer forms the way a widget is rendered on screen and only deals with UI and Styling of the widget.
  3. Page Bindings - Configuration based bindings that allow to define UI flows and its behavior as simple JSON configuration. This allows for reusable configurations, for ex: Invoking a REST API on FORM SUBMIT event.

Browser and device support

ItsyUI is fully optimized and tested for the following platforms.

Mobile,

  • iOS 9 and up
  • Android 4.4.4 and up with WebView or Chrome browser (Android 4.0 and up with Crosswalk engine)

Desktop,

  • Latest version of Edge browser
  • Last 2 versions of Safari browser
  • Last 2 versions of Chrome browser
  • Last 2 versions of Firefox browser

For other platforms, please be aware that some components or features may not work correctly.

Responsive meta tag

ItsyUI is developed mobile-first, a strategy in which we first write code for mobile devices, and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head> element.

<meta
  name="viewport"
  content="minimum-scale=1, initial-scale=1, width=device-width"
/>