UI Samples

A few examples of ways to integrate the UI components of Ivy's stack.

We aim to establish a set of robust UI components that are highly reusable and customisable. These samples serve both as an initial exploration of tech options for the UI and potentially as a future reference.

The menu sections on the left refer to the following:

UI Elements

This concerns the ui_elements app, which lives at lib/ui_elements and is a butchered version of django-bootstrap5.

bootstrap5 has been replaced with uie in most internal names, so that this app can evolve to accommodate a potential switch to another CSS framework.

Crispy

django-crispy-forms, along with the crispy-bootstrap5 template package, are an option to render Django forms in Ivy. Both are installed as 3rd-party dependencies.

The current samples only scratch the surface of what's possible with Crispy forms.

Tables

Just a couple of sample tables using straight Bootstrap 5 markup. You need to set the browser width to 320 px (the smallest we're expecting to support) in order to see the difference between them.

Styles

Copy of most of AdminLTE's demo reflecting Ivy's style customisations.

Theme

Ivy's theme is based on the AdminLTE template.

AdminLTE is a relatively lean template written in Typescript and Sass and leveraging Bootstrap 5, which is the same frontend stack that Ivy uses.