Leaf UI is a PHP library for building user interfaces

dev-master 2020-06-04 13:50 UTC

This package is auto-updated.

Last update: 2020-06-04 13:52:34 UTC


Leaf UI is a PHP library for building user interfaces.

Leaf UI simply takes away the 100s of lines of crazy HTML you'd need to write, so you can focus on only PHP. Leaf UI doesn't need a new compiler or any extensive compiling, it's just the same old PHP you write everyday; as such, you can build full scaleable Leaf UI powered apps or just sprinkle Leaf UI into your existing HTML/PHP code.

Installing Leaf UI

Like most PHP libraries, we recommend installing Leaf UI with composer. Just open up your console and type:

composer require leafs/ui

This will install Leaf UI into your application. You don't have to worry about bloating your application: Leaf UI has no external dependencies.

After this, you can use all of Leaf UI's methods and components.

View the mini documentation here

Working With Templates

Templates provide a quick way to scaffold a Leaf UI without sweating the tiny details. To get started, simply swap out the main the Leaf\UI package for Leaf\UI\Template.

use Leaf\UI\Template as UI;

$ui = new Leaf\UI\Template;


Template Methods


This method let's you create a plain HTML structure consisting which looks somewhat like this when rendered:

<!Doctype html  id="1590108145!Doctype html" />
<html  id="1590108145html">
	<head  id="1590108145head">
		<title  id="1590108145title">{ Title Here }</title>
		<meta name="viewport" content="width=device-width, initial-scale=1"  id="1590108145meta" />
		<link href="vendor/leafs/ui/src/UI/default/default.css" rel="stylesheet"  id="1590108145link" />
		{ Other Head Elements Here}
	<body  id="1590108145body">
		{ Body Here }


$html = (
	$ui::_template("Title Here", [
		// Body Components here


Wynter CSS Integration

Leaf UI with wynter css allows you to use wynter css components instead of raw HTML components. Wynter CSS is a CSS Framework (work-in-progress) based on spectre CSS. So, with Leaf UI - Wynter Components, you can build your amazing frontends without any additional CSS or Javascript.