Skip to content

Commit c6e771b

Browse files
mychidarkomychidarko
committed
📝 updated readme
1 parent 0f7f9da commit c6e771b

2 files changed

Lines changed: 30 additions & 44 deletions

File tree

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
vendor
1+
vendor
2+
try

‎readme.md‎

Lines changed: 28 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -16,57 +16,42 @@ This will install Leaf UI into your application. You don't have to worry about b
1616

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

19-
View the [mini documentation here](//leafphp.netlify.app/#/2.1/views/ui/)
19+
View the [mini documentation here](//leafphp.netlify.app/#//ui/)
2020

21-
## Working With Templates
21+
## Working with Leaf UI
2222

23-
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`.
23+
What does leaf UI offer you?
2424

25-
```php
26-
use Leaf\UI\Template as UI;
27-
28-
UI::element(...);
29-
```
25+
Instead of this:
3026

3127
```php
32-
$ui = new Leaf\UI\Template;
33-
34-
$ui::element(...);
28+
<?php
29+
// all your logic
30+
31+
echo "<section class=\"box\">
32+
<h2 class=\"box-title\">Item name</h2>
33+
<p class=\"box-body\">
34+
Your body here
35+
</p>
36+
</section>";
37+
?>
3538
```
3639

37-
### Template Methods
38-
39-
#### _template
40-
41-
This method let's you create a plain HTML structure consisting which looks somewhat like this when rendered:
42-
43-
```html
44-
<!Doctype html id="1590108145!Doctype html" />
45-
<html id="1590108145html">
46-
<head id="1590108145head">
47-
<title id="1590108145title">{ Title Here }</title>
48-
<meta name="viewport" content="width=device-width, initial-scale=1" id="1590108145meta" />
49-
<link href="vendor/leafs/ui/src/UI/default/default.css" rel="stylesheet" id="1590108145link" />
50-
{ Other Head Elements Here}
51-
</head>
52-
<body id="1590108145body">
53-
{ Body Here }
54-
</body>
55-
</html>
56-
```
40+
You get to write this:
5741

58-
Usage:
59-
60-
```js
61-
$html = (
62-
$ui::_template("Title Here", [
63-
// Body Components here
64-
])
65-
);
66-
67-
$ui::render($html);
42+
```php
43+
<?php
44+
// all your logic
45+
46+
echo section(["class" => "box"], [
47+
h2("Item name"),
48+
p("Your body here")
49+
]);
50+
?>
6851
```
6952

70-
### Wynter CSS Integration
53+
In the end, leaf ui allows you to write your whole app peacefully without having to deal with weird strings, interpollation and all that. Just write PHP!
54+
55+
*This file is still being updated!*
7156

72-
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](https://picturepan2.github.io/spectre/). So, with Leaf UI - Wynter Components, you can build your amazing frontends without any additional CSS or Javascript.
57+
Built with ❤ by [**Mychi Darko**](https://mychi.netlify.app)

0 commit comments

Comments
 (0)