Purpose
Kolibri comes with many features. Every feature is tested and used in an application. Many features have additional, self-contained example pages that visualize the feature.
This page provides an overview over the example pages such that you can browse through your favorites.
Forms and Input
- Simple Form
- The Simple Form example shows how to create a form by only providing the essential information and get a web form that is fully styled and bound to the underlying controller and model.
- Master - Detail
- The Master - Detail example uses a form in the detail view and a table-like overview where you can select a person for editing. It shines with direct manipulation, instant-update behavior, and multi-way editing.
- Workday mini app
- A mini application for timekeeping within a single day. Enforced business rules make it somewhat realistic.
- Workweek mini app
- An extension of the workday to a work week to show the aggregation of data and business rules while re-using the workday building blocks.
- Debounce
- This is a tiny example for an input field with debounce behavior such that the user input gets transmitted only after the user stops typing.
Navigation
- Simple Navigation
- Kolibri comes with a Simple Navigation facility that supports animated page transitions, style isolation, and type-safe navigation.
- Extensive Navigation
- A more Extensive Navigation is an external showcase with many different views on a tree-like navigation structure, consistent visualization, add/remove of navigation points at runtime, and a debugging view.
Sequences
- Stairs
- Kolibri sequences are lazy, immutable, persistent data structures with a rich API and a purely functional, monadic nature. They can still be used with even animated graphics as the Stairs example shows.
- Beautiful Math
- Who would have thought that a simple multiplication table can lead to such Beautiful Math when distributed over a circle?
- Collatz Number Exploration
- Explore the Collatz Numbers. With the help of sequences and memoization you can browse through them in realtime.
- Approximating PI
- Different sequences to approximate PI like Gregory, Leibniz, and Nilakantha have shown. We use the sequence API and the "limit" helper to celebrate their work in a functional approach.
- Fibonacci
- While the fibonacci sequence is of course everybody's favorite, it is also lends itself to a nice graphical Fibonacci construction. Explore for yourself and let the golden ratio emerge!
- Fizzbuzz
- Prepare for the next job interview by solving the fizzbuzz challenge as a Simple Functional Fizzbuzz solution or even in an interactive Generalized Functional Fizzbuzz solution - all made from Kolibri sequences.
- Focusring
- The focusring is a usage or sequences where a sequence builds an endless ring while one element in the ring is considered the focus. For example, the Slot Machine is made from three focus rings.
- Tic Tac Toe
- Playing Tic Tac Toe against the computer gives you some winning chances since the computer only looks three half-moves ahead. However, this is an example of the functional minimax algorithm (see John Hughes "Why FP matters") based on Kolibri sequences and the monadic JINQ (read "jinx") API.
Interactive
- Kolibri Bundle
- You can try the Kolibri production bundle on a dedicated bundle page. Open the page and use the console of your browser's developer tools as a REPL to play with the Kolibri!
Logging
- Logger
- An interactive way to play with Loggers, log levels, appenders, and more. Please note that a "logger" is the entity that issues a potential log message, while "logging" refers to the facility that controls which log messages are currently written and where they go.
- Log UI
- Kolibri allows to change the logging characteristics from the browser console. However, some applications might want to include a user interface to control the logging. Don't be surprised if the page appears empty. Just open the drawer from the upper-right corner.
Styling
- Style Overview
- Kolibri makes use of modern CSS features but also provides some css-in-js solutions and plain programmatic styling. The Style Overview serves as a visual checkpoint to see what is available and helps to ensure consistent visual representations.
- Layered Style
- The Kolibri CSS does not by itself define any layers but can easily be used with the @layer construct as Layered Style shows. The Kolibri user is in full control whether Kolibri or application-specific styles should have precedence - regardless of selector specificity.
- CSS Best Practices
- The Kolibri contains a lot of modern CSS features and examples of best practices including: @import, @layer, @container, style isolation, css-in-js, custom properties, "CSS-API", design system, layout, color palette, font handling, animations, consistency, validation, and accessibility features like disabled animations and "tab into content".