Tailwind classes in OCaml
anil.recoil.org
1(* Example 03: Layout and Spacing - GADT flexbox and spacing demo *)
2
3open Htmlit
4open Tailwind_html
5
6let create_layout_demo () =
7 let html = El.html [
8 El.head [
9 El.meta ~at:[At.charset "utf-8"] ();
10 El.meta ~at:[At.name "viewport"; At.content "width=device-width, initial-scale=1"] ();
11 El.title [txt "Layout and Spacing"];
12 El.link ~at:[At.rel "stylesheet"; At.href "layout_and_spacing_03.css"] ();
13 ];
14 El.body ~at:[classes_attr [
15 min_height screen;
16 bg_color (gray 50);
17 padding (rem 2.0);
18 ]] [
19 container [
20 h1 ~styles:[
21 font_size `Xl2;
22 font_weight `Bold;
23 text_color (gray 800);
24 text_center;
25 margin_bottom (rem 2.0);
26 ] [txt "Layout and Spacing Demo"];
27
28 p ~styles:[
29 font_size `Lg;
30 text_color (gray 600);
31 text_center;
32 margin_bottom (rem 3.0);
33 ] [txt "Master flexbox layouts and spacing with GADT interface"];
34
35 (* Flexbox Examples *)
36 section ~styles:[margin_bottom (rem 3.0)] [
37 h2 ~styles:[
38 font_size `Xl;
39 font_weight `Semibold;
40 text_color (gray 700);
41 margin_bottom (rem 2.0);
42 ] [txt "Flexbox Layouts"];
43
44 (* Centered content *)
45 card [
46 h3 ~styles:[
47 font_size `Lg;
48 font_weight `Semibold;
49 text_color (gray 700);
50 margin_bottom (rem 1.0);
51 ] [txt "Centered Content"];
52
53 div ~styles:[
54 flex;
55 justify_center;
56 items_center;
57 bg_color (blue 100);
58 height (rem 8.0);
59 rounded `Lg;
60 margin_bottom (rem 1.5);
61 ] [
62 div ~styles:[
63 bg_color (Tailwind.Color.white);
64 padding (rem 1.5);
65 rounded `Md;
66 shadow `Sm;
67 ] [
68 txt "Perfectly Centered Content"
69 ];
70 ];
71 ];
72
73 (* Space between items *)
74 card [
75 h3 ~styles:[
76 font_size `Lg;
77 font_weight `Semibold;
78 text_color (gray 700);
79 margin_bottom (rem 1.0);
80 ] [txt "Space Between"];
81
82 div ~styles:[
83 flex;
84 justify_between;
85 items_center;
86 bg_color (green 100);
87 padding (rem 1.5);
88 rounded `Lg;
89 ] [
90 div ~styles:[
91 bg_color (Tailwind.Color.white);
92 padding (rem 1.0);
93 rounded `Md;
94 ] [txt "Left"];
95 div ~styles:[
96 bg_color (Tailwind.Color.white);
97 padding (rem 1.0);
98 rounded `Md;
99 ] [txt "Center"];
100 div ~styles:[
101 bg_color (Tailwind.Color.white);
102 padding (rem 1.0);
103 rounded `Md;
104 ] [txt "Right"];
105 ];
106 ];
107 ];
108
109 (* Grid Layout Examples *)
110 section ~styles:[margin_bottom (rem 3.0)] [
111 h2 ~styles:[
112 font_size `Xl;
113 font_weight `Semibold;
114 text_color (gray 700);
115 margin_bottom (rem 2.0);
116 ] [txt "CSS Grid Layouts"];
117
118 (* 3-column grid *)
119 card [
120 h3 ~styles:[
121 font_size `Lg;
122 font_weight `Semibold;
123 text_color (gray 700);
124 margin_bottom (rem 1.0);
125 ] [txt "Three Column Grid"];
126
127 div ~styles:[
128 grid;
129 grid_cols 3;
130 gap (rem 1.0);
131 ] [
132 div ~styles:[
133 bg_color (blue 100);
134 padding (rem 1.0);
135 rounded `Md;
136 text_center;
137 ] [txt "Item 1"];
138 div ~styles:[
139 bg_color (green 100);
140 padding (rem 1.0);
141 rounded `Md;
142 text_center;
143 ] [txt "Item 2"];
144 div ~styles:[
145 bg_color (purple 100);
146 padding (rem 1.0);
147 rounded `Md;
148 text_center;
149 ] [txt "Item 3"];
150 div ~styles:[
151 bg_color (red 100);
152 padding (rem 1.0);
153 rounded `Md;
154 text_center;
155 ] [txt "Item 4"];
156 div ~styles:[
157 bg_color (yellow 100);
158 padding (rem 1.0);
159 rounded `Md;
160 text_center;
161 ] [txt "Item 5"];
162 div ~styles:[
163 bg_color (indigo 100);
164 padding (rem 1.0);
165 rounded `Md;
166 text_center;
167 ] [txt "Item 6"];
168 ];
169 ];
170
171 (* Grid gap examples *)
172 card [
173 h3 ~styles:[
174 font_size `Lg;
175 font_weight `Semibold;
176 text_color (gray 700);
177 margin_bottom (rem 1.0);
178 ] [txt "Grid Gap Variations"];
179
180 div ~styles:[margin_bottom (rem 1.5)] [
181 h4 ~styles:[
182 font_size `Base;
183 font_weight `Medium;
184 text_color (gray 600);
185 margin_bottom (rem 0.5);
186 ] [txt "Small Gap"];
187 div ~styles:[
188 grid;
189 grid_cols 4;
190 gap (rem 0.5);
191 ] (List.init 4 (fun i ->
192 div ~styles:[
193 bg_color (blue 200);
194 padding (rem 0.5);
195 rounded `Sm;
196 text_center;
197 ] [txt (string_of_int (i + 1))]
198 ));
199 ];
200
201 div ~styles:[margin_bottom (rem 1.5)] [
202 h4 ~styles:[
203 font_size `Base;
204 font_weight `Medium;
205 text_color (gray 600);
206 margin_bottom (rem 0.5);
207 ] [txt "Large Gap"];
208 div ~styles:[
209 grid;
210 grid_cols 3;
211 gap (rem 2.0);
212 ] (List.init 3 (fun i ->
213 div ~styles:[
214 bg_color (green 200);
215 padding (rem 1.0);
216 rounded `Md;
217 text_center;
218 ] [txt (Printf.sprintf "Item %d" (i + 1))]
219 ));
220 ];
221
222 div [
223 h4 ~styles:[
224 font_size `Base;
225 font_weight `Medium;
226 text_color (gray 600);
227 margin_bottom (rem 0.5);
228 ] [txt "Asymmetric Gap"];
229 div ~styles:[
230 grid;
231 grid_cols 2;
232 gap_x (rem 2.0);
233 gap_y (rem 0.5);
234 ] (List.init 4 (fun i ->
235 div ~styles:[
236 bg_color (purple 200);
237 padding (rem 0.75);
238 rounded `Md;
239 text_center;
240 ] [txt (Printf.sprintf "Box %d" (i + 1))]
241 ));
242 ];
243 ];
244 ];
245
246 (* Spacing Examples *)
247 section [
248 h2 ~styles:[
249 font_size `Xl;
250 font_weight `Semibold;
251 text_color (gray 700);
252 margin_bottom (rem 2.0);
253 ] [txt "Spacing System"];
254
255 (* Using grid for spacing examples *)
256 div ~styles:[
257 grid;
258 grid_cols 2;
259 gap (rem 1.5);
260 ] [
261 (* Padding example *)
262 card [
263 h4 ~styles:[
264 font_size `Base;
265 font_weight `Semibold;
266 text_color (gray 700);
267 margin_bottom (rem 0.75);
268 ] [txt "Padding Example"];
269 div ~styles:[
270 bg_color (Tailwind.Color.white);
271 padding (rem 2.0);
272 rounded `Md;
273 border;
274 border_color (gray 200);
275 ] [
276 txt "This content has padding (2rem)"
277 ];
278 ];
279
280 (* Margin example *)
281 card [
282 h4 ~styles:[
283 font_size `Base;
284 font_weight `Semibold;
285 text_color (gray 700);
286 margin_bottom (rem 0.75);
287 ] [txt "Margin Example"];
288 div ~styles:[
289 bg_color (Tailwind.Color.white);
290 padding (rem 1.0);
291 margin (rem 1.5);
292 rounded `Md;
293 border;
294 border_color (gray 200);
295 ] [
296 txt "This box has margin (1.5rem) from its container"
297 ];
298 ];
299 ];
300 ];
301 ];
302 ];
303 ] in
304 html
305
306let () =
307 let html = create_layout_demo () in
308 print_string (El.to_string ~doctype:true html)