About Fohn-Ui

Fohn-Ui is a PHP framework that make use of utility-first css framework: Tailwind CSS. This is a powerful combination for building and styling your Web applications.

At the hearth of Fohn-Ui is the Service\Ui::class. This service main function is to supply various elements needed by Fohn-Ui during the request life cycle:

1. the application class need for outputting content to browser;
2. the theme class used by views or components for styling purpose;
3. the rendered engine class for rendering Page into Html;
4. the Html template class for template content manipulation and rendering.
5. the PSR7 request object;
6. and many mores...

Minimal setup of the Ui service.

 // Minimal service setup.
 Ui::service()->boot(function (Ui $ui) {
    // set App.
    $ui->setApp(new App());
    // Add default exception handler.
    $ui->setExceptionHandler(PageException::factory());
    // Set page and layout to be output by App.
    $ui->initAppPage(Page::factory(['title' => 'myTitle']));
});

Once Ui service is boot, simply add content to your page layout using Ui::layout().

View::addTo(Ui::layout())->setTextContent('Hello World!');

Note that content is added to a page 'layout' region and not the page itself.

This actual web application is build using Fohn-Ui. If you wish to see how it is done, visit the fohn-ui.com repository.

Default theme and css stylesheet

Since Fohn-Ui is built around Tailwind CSS, it is possible to create themes using PHP. Fohn-Ui allow you to create new themes, change view's style or update color recipes for a specific theme.

For example, Fohn-Ui button element is styled with the default theme:

Ui::theme()->styleAs('Button', [$btn])

The default theme generated a minimal set of Tailwind CSS utilities. However, it is possible to customize the Tailwind CSS utilites needed for a project.

For more information on how to create a custom stylesheet, visit the fohn-css repository.

Javascript

Fohn-Ui comes with its own javascript package. The package contains functionalities needed for component's user interface in order to ensure a good user experience. The package contents vary from simple utilities functions, jQuery plugins or more complex Vue component, like Modal, Form or Table to name a few.

Vue.js

Component like form, table or modal uses Vue.js in order to build their user interfaces. Most of the Vue components are renderless components, i.e. their templates are provide by the View::class html template while the behavior is done in Vue.js. This allows for incredible flexibility, specially using Tailwind CSS, in styling your component without having to change the js package.

jQuery

There is a direct integration between jQuery and Fohn-Ui. It is possible to assign jQuery event and function to a Fohn-Ui view directly using PHP code.

Jquery::addEventTo($btn, 'click')->executes([Jquery::withThis()->text('Hello')])

Fohn-Ui js package can be adapted to your project. For more information on how to do this, visit the fohn-js repository.