Skip to content

Commit cfb3b64

Browse files
emmadesilvaemmadesilva
authored
Merge pull request #1524 from hydephp/release-the-ui-kit
Add UI Kit documentation
2 parents 61bd0d5 + e0210e1 commit cfb3b64

File tree

2 files changed

+165
-1
lines changed

2 files changed

+165
-1
lines changed

‎docs/extensions/ui-kit.md‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
# HydePHP UI Kit - Documentation
2+
3+
The HydePHP UI Kit is a collection of minimalistic and un-opinionated TailwindCSS components for Laravel Blade,
4+
indented to be used with HydePHP. Note that these components may require CSS classes not present in the bundled app.css
5+
file and that you may need to recompile the CSS file using the included Laravel Mix configuration.
6+
7+
## Screenshot
8+
9+
Here are some of the components you can use to build your next project! As you can see, all components support both light and dark mode out of the box, just like the rest of HydePHP.
10+
11+
![Components Screenshot](https://raw.githubusercontent.com/hydephp/ui-kit/art/header-large-min.png)
12+
13+
## Components
14+
15+
Please make sure you're familiar with [Laravel Blade](https://laravel.com/docs/blade) before using the HydePHP UI Kit.
16+
17+
>info Tip: Most components allow you to pass any additional HTML attributes to the element!
18+
19+
### Buttons
20+
21+
#### Primary
22+
23+
```blade
24+
<x-hyde-ui::button-primary>
25+
Primary Button
26+
</x-hyde-ui::button-primary>
27+
```
28+
29+
#### Secondary
30+
31+
```blade
32+
<x-hyde-ui::button-secondary>
33+
Secondary Button
34+
</x-hyde-ui::button-secondary>
35+
```
36+
37+
### Input
38+
39+
The base component is `<x-hyde-ui::input />`, any additional attributes will be passed to the input element as seen below.
40+
41+
```blade
42+
<x-hyde-ui::input type="text" name="name" placeholder="Name" value="John Doe" />
43+
```
44+
45+
### Card
46+
47+
An incredibly versatile component that can be used for a wide variety of purposes.
48+
49+
In the most basic form, a card is just a container with a white background and a shadow.
50+
However, it also supports two slots: `title` and `footer`.
51+
52+
```blade
53+
<x-hyde-ui::card>
54+
A card with some content.
55+
</x-hyde-ui::card>
56+
```
57+
58+
```blade
59+
<x-hyde-ui::card>
60+
<x-slot name="title">
61+
Card Title
62+
</x-slot>
63+
</x-hyde-ui::card>
64+
```
65+
66+
```blade
67+
<x-hyde-ui::card>
68+
<x-slot name="footer">
69+
Some footer content.
70+
</x-slot>
71+
</x-hyde-ui::card>
72+
```
73+
74+
Why not combine the components?
75+
76+
```blade
77+
<x-hyde-ui::card>
78+
<x-slot name="title">
79+
My Amazing Card
80+
</x-slot>
81+
82+
A card with some content and a footer with a button.
83+
84+
<x-slot name="footer" class="text-center">
85+
<x-hyde-ui::button-primary>
86+
Primary Button
87+
</x-hyde-ui::button-primary>
88+
</x-slot>
89+
</x-hyde-ui::card>
90+
```
91+
92+
### Typography Components
93+
94+
#### Heading
95+
96+
This component will create a styled `<h1>` level heading centered on the page.
97+
98+
```blade
99+
<x-hyde-ui::heading>
100+
Lorem ipsum dolor sit amet.
101+
</x-hyde-ui::heading>
102+
```
103+
104+
#### Prose
105+
106+
This simple component will create an `<article>` element with [TailwindCSS Typography](https://tailwindcss.com/docs/typography-plugin) (prose) styles applied.
107+
108+
```blade
109+
<x-hyde-ui::prose>
110+
<h2>Prose Heading</h2>
111+
<p>Prose paragraph</p>
112+
</x-hyde-ui::prose>
113+
```
114+
115+
#### Markdown
116+
117+
This component will convert any Markdown within it to HTML using the Hyde Markdown compiler.
118+
119+
```blade
120+
<x-hyde-ui::markdown>
121+
## Markdown Heading
122+
123+
Hello world!
124+
</x-hyde-ui::markdown>
125+
```
126+
127+
>info Tip: You may also want to wrap this in the prose element or the Markdown will not be styled.
128+
129+
### What's Next?
130+
131+
The UI kit is minimal by design. It's up to you to create something amazing, we just want to give you a head start.
132+
You can get surprisingly far when you combine the components. Take this newsletter signup card for example!
133+
134+
```blade
135+
<x-hyde-ui::card>
136+
<x-slot name="title">
137+
Let your creativity flow!
138+
</x-slot>
139+
140+
<x-slot name="main" style="padding-top: 0; padding-bottom: 0;">
141+
<x-hyde-ui::prose>
142+
<x-hyde-ui::markdown>
143+
The UI kit is minimal by design. It's up to **you** to create something _amazing_.
144+
145+
Maybe create a form to collect newsletter subscriptions?
146+
</x-hyde-ui::markdown>
147+
</x-hyde-ui::prose>
148+
</x-slot>
149+
150+
<x-slot name="footer" class="text-center flex">
151+
<x-hyde-ui::input placeholder="Enter email" />
152+
153+
<x-hyde-ui::button-primary>
154+
Subscribe
155+
</x-hyde-ui::button-primary>
156+
</x-slot>
157+
</x-hyde-ui::card>
158+
```
159+
160+
![Newsletter Screenshot](https://raw.githubusercontent.com/hydephp/ui-kit/art/newsletter-signup-example-min.png)
161+
162+
## GitHub Repository
163+
164+
You can find the source code for the UI Kit on GitHub at [hydephp/ui-kit](https://github.com/hydephp/ui-kit).

‎packages/ui-kit/docs/documentation.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ This component will convert any Markdown within it to HTML using the Hyde Markdo
132132
133133
### What's Next?
134134

135-
The UI kit is minimal by design. It's up to you to create something amazing.
135+
The UI kit is minimal by design. It's up to you to create something amazing, we just want to give you a head start.
136136
You can get surprisingly far when you combine the components. Take this newsletter signup card for example!
137137

138138
```blade

0 commit comments

Comments
 (0)