+71 -98

examples/button_demo.ml

··· 1 1 - (* Button Demo - Showcasing new button combinators *) 1 1 + (* Button Demo - Showcasing GADT-based button interface *) 2 2 3 3 open Htmlit 4 4 open Tailwind_html ··· 11 11 El.title [txt "Button Demo"]; 12 12 El.link ~at:[At.rel "stylesheet"; At.href "button_demo.css"] (); 13 13 ]; 14 14 - El.body ~at:[classes_attr (Tailwind.Css.tw [ 15 15 - Tailwind.Layout.(to_class (min_height screen)); 16 16 - Tailwind.Color.bg (gray 50); 17 17 - Tailwind.Spacing.(to_class (p (rem 2.0))); 18 18 - ])] [ 14 14 + El.body ~at:[classes_attr [ 15 15 + min_height screen; 16 16 + bg_color (gray 50); 17 17 + padding (rem 2.0); 18 18 + ]] [ 19 19 container [ 20 20 - h1 ~size:`Xl3 ~weight:`Bold ~color:(gray 800) ~align:`Center ~mb:(rem 2.0) [ 21 21 - txt "Button Combinator Demo" 22 22 - ]; 20 20 + h1 ~styles:[ 21 21 + font_size `Xl3; 22 22 + font_weight `Bold; 23 23 + text_color (gray 800); 24 24 + text_center; 25 25 + margin_bottom (rem 2.0); 26 26 + ] [txt "Button Component Demo"]; 23 27 24 24 - p_styled ~size:`Lg ~color:(gray 600) ~align:`Center ~mb:(rem 3.0) [ 25 25 - txt "Showcasing succinct button creation with the new Tailwind_html API" 26 26 - ]; 28 28 + p ~styles:[ 29 29 + font_size `Lg; 30 30 + text_color (gray 600); 31 31 + text_center; 32 32 + margin_bottom (rem 3.0); 33 33 + ] [txt "Showcase of built-in button components using GADT interface"]; 27 34 28 28 - (* Button examples section *) 29 29 - div ~classes:(Tailwind.Css.tw [ 30 30 - Tailwind.Spacing.(to_class (gap `All (rem 2.0))); 31 31 - flex; 32 32 - Tailwind.Flexbox.(to_class (direction `Col)); 33 33 - ]) [ 34 34 - (* Primary buttons *) 35 35 - card [ 36 36 - h2 ~size:`Xl ~weight:`Semibold ~color:(gray 700) ~mb:(rem 1.5) [ 37 37 - txt "Primary Buttons" 38 38 - ]; 39 39 - div ~classes:(Tailwind.Css.tw [ 40 40 - flex; 41 41 - Tailwind.Flexbox.(to_class (wrap `Wrap)); 42 42 - Tailwind.Spacing.(to_class (gap `All (rem 1.0))); 43 43 - ]) [ 44 44 - btn_primary ~size:`Sm [txt "Small Primary"]; 45 45 - btn_primary [txt "Default Primary"]; 46 46 - btn_primary ~size:`Lg [txt "Large Primary"]; 47 47 - btn_primary ~disabled:true [txt "Disabled Primary"]; 48 48 - ]; 35 35 + (* Primary buttons section *) 36 36 + card [ 37 37 + h2 ~styles:[ 38 38 + font_size `Xl; 39 39 + font_weight `Semibold; 40 40 + text_color (gray 700); 41 41 + margin_bottom (rem 1.5); 42 42 + ] [txt "Primary Buttons"]; 43 43 + 44 44 + div ~styles:[ 45 45 + flex; 46 46 + flex_col; 47 47 + margin_bottom (rem 1.0); 48 48 + ] [ 49 49 + btn_primary ~size:`Sm [txt "Small Primary"]; 50 50 + btn_primary [txt "Default Primary"]; 51 51 + btn_primary ~size:`Lg [txt "Large Primary"]; 49 52 ]; 53 53 + ]; 50 54 51 51 - (* Secondary buttons *) 52 52 - card [ 53 53 - h2 ~size:`Xl ~weight:`Semibold ~color:(gray 700) ~mb:(rem 1.5) [ 54 54 - txt "Secondary Buttons" 55 55 - ]; 56 56 - div ~classes:(Tailwind.Css.tw [ 57 57 - flex; 58 58 - Tailwind.Flexbox.(to_class (wrap `Wrap)); 59 59 - Tailwind.Spacing.(to_class (gap `All (rem 1.0))); 60 60 - ]) [ 61 61 - btn_secondary ~size:`Sm [txt "Small Secondary"]; 62 62 - btn_secondary [txt "Default Secondary"]; 63 63 - btn_secondary ~size:`Lg [txt "Large Secondary"]; 64 64 - btn_secondary ~disabled:true [txt "Disabled Secondary"]; 65 65 - ]; 55 55 + (* Secondary buttons section *) 56 56 + card [ 57 57 + h2 ~styles:[ 58 58 + font_size `Xl; 59 59 + font_weight `Semibold; 60 60 + text_color (gray 700); 61 61 + margin_bottom (rem 1.5); 62 62 + ] [txt "Secondary Buttons"]; 63 63 + 64 64 + div ~styles:[ 65 65 + flex; 66 66 + flex_col; 67 67 + margin_bottom (rem 1.0); 68 68 + ] [ 69 69 + btn_secondary ~size:`Sm [txt "Small Secondary"]; 70 70 + btn_secondary [txt "Default Secondary"]; 71 71 + btn_secondary ~size:`Lg [txt "Large Secondary"]; 66 72 ]; 73 73 + ]; 67 74 68 68 - (* Comparison section *) 69 69 - card [ 70 70 - h2 ~size:`Xl ~weight:`Semibold ~color:(gray 700) ~mb:(rem 1.5) [ 71 71 - txt "Before vs After" 72 72 - ]; 73 73 - div ~classes:(Tailwind.Css.tw [ 74 74 - Tailwind.Display.grid; 75 75 - Tailwind.Grid.(to_class (template_cols (`Cols 1))); 76 76 - Tailwind.Responsive.(to_class (at_breakpoint `Md (Tailwind.Grid.(to_class (template_cols (`Cols 2)))))); 77 77 - Tailwind.Spacing.(to_class (gap `All (rem 2.0))); 78 78 - ]) [ 79 79 - div [ 80 80 - h2 ~size:`Lg ~weight:`Medium ~color:(red 600) ~mb:(rem 1.0) [ 81 81 - txt "❌ Old Verbose Way" 82 82 - ]; 83 83 - El.pre ~at:[classes_attr (Tailwind.Css.tw [ 84 84 - Tailwind.Color.bg (gray 100); 85 85 - Tailwind.Spacing.(to_class (p (rem 1.0))); 86 86 - Tailwind.Effects.rounded_md; 87 87 - Tailwind.Typography.(to_class (font_size `Sm)); 88 88 - Tailwind.Layout.(to_class (overflow `X `Auto)); 89 89 - ])] [ 90 90 - El.code [txt {|let btn_classes = Css.tw [ 91 91 - Color.bg (Color.make `Blue ~variant:`V600 ()); 92 92 - Color.text Color.white; 93 93 - Spacing.(to_class (px (Size.rem 1.0))); 94 94 - Spacing.(to_class (py (Size.rem 0.5))); 95 95 - Effects.rounded_md; 96 96 - Typography.(to_class (font_weight `Medium)); 97 97 - ] in 98 98 - El.button ~at:[classes_attr btn_classes] [ 99 99 - El.txt "Click me!" 100 100 - ]|}]; 101 101 - ]; 102 102 - ]; 103 103 - div [ 104 104 - h2 ~size:`Lg ~weight:`Medium ~color:(green 600) ~mb:(rem 1.0) [ 105 105 - txt "✅ New Succinct Way" 106 106 - ]; 107 107 - El.pre ~at:[classes_attr (Tailwind.Css.tw [ 108 108 - Tailwind.Color.bg (gray 100); 109 109 - Tailwind.Spacing.(to_class (p (rem 1.0))); 110 110 - Tailwind.Effects.rounded_md; 111 111 - Tailwind.Typography.(to_class (font_size `Sm)); 112 112 - Tailwind.Layout.(to_class (overflow `X `Auto)); 113 113 - ])] [ 114 114 - El.code [txt {|btn_primary [txt "Click me!"]|}]; 115 115 - ]; 116 116 - ]; 117 117 - ]; 75 75 + (* Outline buttons section *) 76 76 + card [ 77 77 + h2 ~styles:[ 78 78 + font_size `Xl; 79 79 + font_weight `Semibold; 80 80 + text_color (gray 700); 81 81 + margin_bottom (rem 1.5); 82 82 + ] [txt "Outline Buttons"]; 83 83 + 84 84 + div ~styles:[ 85 85 + flex; 86 86 + flex_col; 87 87 + ] [ 88 88 + btn_outline ~size:`Sm [txt "Small Outline"]; 89 89 + btn_outline [txt "Default Outline"]; 90 90 + btn_outline ~size:`Lg [txt "Large Outline"]; 118 91 ]; 119 92 ]; 120 93 ];

+73 -174

examples/colors_and_typography_02.ml

··· 1 1 - (* Example 02: Colors and Typography - Exploring the Type System *) 1 1 + (* Example 02: Colors and Typography - GADT interface showcase *) 2 2 3 3 open Htmlit 4 4 - open Tailwind 5 5 - 6 6 - let classes_attr tailwind_classes = 7 7 - At.class' (Tailwind.to_string tailwind_classes) 4 4 + open Tailwind_html 8 5 9 6 let create_color_demo () = 10 10 - (* Color variants demonstration *) 11 11 - let color_examples = [ 12 12 - ("Blue 400", Color.make `Blue ~variant:`V400 ()); 13 13 - ("Blue 600", Color.make `Blue ~variant:`V600 ()); 14 14 - ("Green 500", Color.make `Green ~variant:`V500 ()); 15 15 - ("Red 500", Color.make `Red ~variant:`V500 ()); 16 16 - ("Purple 600", Color.make `Purple ~variant:`V600 ()); 17 17 - ("Gray 700", Color.make `Gray ~variant:`V700 ()); 18 18 - ] in 19 19 - 20 20 - let typography_examples = [ 21 21 - ("Extra Small", Typography.(to_class (font_size `Xs))); 22 22 - ("Small", Typography.(to_class (font_size `Sm))); 23 23 - ("Base", Typography.(to_class (font_size `Base))); 24 24 - ("Large", Typography.(to_class (font_size `Lg))); 25 25 - ("Extra Large", Typography.(to_class (font_size `Xl))); 26 26 - ("2X Large", Typography.(to_class (font_size `Xl2))); 27 27 - ] in 28 28 - 29 29 - (* Create HTML demonstration *) 30 30 - let html_doc = El.html [ 7 7 + let html = El.html [ 31 8 El.head [ 32 9 El.meta ~at:[At.charset "utf-8"] (); 33 10 El.meta ~at:[At.name "viewport"; At.content "width=device-width, initial-scale=1"] (); 34 34 - El.title [El.txt "Colors and Typography"]; 11 11 + El.title [txt "Colors and Typography"]; 35 12 El.link ~at:[At.rel "stylesheet"; At.href "colors_and_typography_02.css"] (); 36 13 ]; 37 37 - El.body ~at:[At.class' "min-h-screen bg-gray-50 p-8"] [ 38 38 - El.div ~at:[At.class' "max-w-4xl mx-auto"] [ 39 39 - El.h1 ~at:[classes_attr (Css.tw [ 40 40 - Typography.(to_class (font_size `Xl2)); 41 41 - Typography.(to_class (font_weight `Bold)); 42 42 - Color.text (Color.make `Gray ~variant:`V800 ()); 43 43 - ]); At.class' "mb-8 text-center"] [El.txt "Colors and Typography Demo"]; 14 14 + El.body ~at:[classes_attr [ 15 15 + min_height screen; 16 16 + bg_color (gray 50); 17 17 + padding (rem 2.0); 18 18 + ]] [ 19 19 + container [ 20 20 + h1 ~styles:[ 21 21 + font_size `Xl2; 22 22 + font_weight `Bold; 23 23 + text_color (gray 800); 24 24 + text_center; 25 25 + margin_bottom (rem 2.0); 26 26 + ] [txt "Colors and Typography Demo"]; 44 27 45 45 - El.p ~at:[classes_attr (Css.tw [ 46 46 - Typography.(to_class (font_size `Lg)); 47 47 - Color.text (Color.make `Gray ~variant:`V600 ()); 48 48 - ]); At.class' "text-center mb-12"] [ 49 49 - El.txt "Explore the type-safe color system and typography utilities in Tailwind OCaml." 50 50 - ]; 28 28 + p ~styles:[ 29 29 + font_size `Lg; 30 30 + text_color (gray 600); 31 31 + text_center; 32 32 + margin_bottom (rem 3.0); 33 33 + ] [txt "Explore type-safe colors and typography with the GADT interface"]; 51 34 52 52 - (* Color Palette Section *) 53 53 - El.section ~at:[At.class' "mb-12"] [ 54 54 - El.h2 ~at:[classes_attr (Css.tw [ 55 55 - Typography.(to_class (font_size `Xl)); 56 56 - Typography.(to_class (font_weight `Semibold)); 57 57 - Color.text (Color.make `Gray ~variant:`V700 ()); 58 58 - ]); At.class' "mb-8"] [El.txt "Color Palette"]; 35 35 + (* Color demonstrations *) 36 36 + section ~styles:[margin_bottom (rem 3.0)] [ 37 37 + h2 ~styles:[ 38 38 + font_size `Xl; 39 39 + font_weight `Semibold; 40 40 + text_color (gray 700); 41 41 + margin_bottom (rem 2.0); 42 42 + ] [txt "Color Palette"]; 59 43 60 60 - El.div ~at:[classes_attr (Css.tw [ 61 61 - Display.grid; 62 62 - Grid.(to_class (template_cols (`Cols 1))); 63 63 - Responsive.(to_class (at_breakpoint `Md (Grid.(to_class (template_cols (`Cols 2)))))); 64 64 - Responsive.(to_class (at_breakpoint `Lg (Grid.(to_class (template_cols (`Cols 3)))))); 65 65 - Spacing.(to_class (gap `All (Size.rem 1.5))); 66 66 - ])] (List.map (fun (name, color) -> 67 67 - El.div ~at:[classes_attr (Css.tw [ 68 68 - Color.bg Color.white; 69 69 - Spacing.(to_class (p (Size.rem 1.5))); 70 70 - Effects.rounded_lg; 71 71 - Effects.shadow_sm; 72 72 - ]); At.class' "text-center"] [ 73 73 - El.div ~at:[classes_attr (Css.tw [ 74 74 - Color.text color; 75 75 - Typography.(to_class (font_size `Xl2)); 76 76 - Typography.(to_class (font_weight `Bold)); 77 77 - ]); At.class' "mb-4"] [El.txt "Aa"]; 78 78 - El.h3 ~at:[classes_attr (Css.tw [ 79 79 - Typography.(to_class (font_size `Lg)); 80 80 - Typography.(to_class (font_weight `Semibold)); 81 81 - Color.text (Color.make `Gray ~variant:`V800 ()); 82 82 - ]); At.class' "mb-2"] [El.txt name]; 83 83 - El.p ~at:[classes_attr (Css.tw [ 84 84 - Typography.(to_class (font_size `Sm)); 85 85 - Color.text (Color.make `Gray ~variant:`V500 ()); 86 86 - ]); At.class' "mb-3"] [El.txt (to_string (Css.tw [Color.text color]))]; 87 87 - El.p ~at:[classes_attr (Css.tw [Color.text color])] [ 88 88 - El.txt "The quick brown fox jumps over the lazy dog" 89 89 - ]; 90 90 - ] 91 91 - ) color_examples); 44 44 + (* Using CSS Grid for color cards *) 45 45 + div ~styles:[ 46 46 + grid; 47 47 + grid_cols 2; 48 48 + gap (rem 1.0); 49 49 + ] [ 50 50 + card [ 51 51 + p ~styles:[text_color (blue 600); font_size `Lg] 52 52 + [txt "Blue 600 - Primary color"]; 53 53 + ]; 54 54 + card [ 55 55 + p ~styles:[text_color (green 500); font_size `Lg] 56 56 + [txt "Green 500 - Success color"]; 57 57 + ]; 58 58 + card [ 59 59 + p ~styles:[text_color (red 500); font_size `Lg] 60 60 + [txt "Red 500 - Error color"]; 61 61 + ]; 62 62 + card [ 63 63 + p ~styles:[text_color (purple 600); font_size `Lg] 64 64 + [txt "Purple 600 - Accent color"]; 65 65 + ]; 66 66 + ]; 92 67 ]; 93 68 94 94 - (* Typography Scale Section *) 95 95 - El.section ~at:[At.class' "mb-12"] [ 96 96 - El.h2 ~at:[classes_attr (Css.tw [ 97 97 - Typography.(to_class (font_size `Xl)); 98 98 - Typography.(to_class (font_weight `Semibold)); 99 99 - Color.text (Color.make `Gray ~variant:`V700 ()); 100 100 - ]); At.class' "mb-8"] [El.txt "Typography Scale"]; 69 69 + (* Typography scale *) 70 70 + section [ 71 71 + h2 ~styles:[ 72 72 + font_size `Xl; 73 73 + font_weight `Semibold; 74 74 + text_color (gray 700); 75 75 + margin_bottom (rem 2.0); 76 76 + ] [txt "Typography Scale"]; 101 77 102 102 - El.div ~at:[classes_attr (Css.tw [ 103 103 - Color.bg Color.white; 104 104 - Spacing.(to_class (p (Size.rem 2.0))); 105 105 - Effects.rounded_lg; 106 106 - Effects.shadow_sm; 107 107 - ]); At.class' "mb-8"] (List.map (fun (name, typ_class) -> 108 108 - El.div ~at:[At.class' "mb-6 last:mb-0"] [ 109 109 - El.div ~at:[classes_attr (Css.tw [ 110 110 - Display.flex; 111 111 - Flexbox.(to_class (align_items `Center)); 112 112 - Flexbox.(to_class (justify `Between)); 113 113 - Spacing.(to_class (gap `All (Size.rem 1.0))); 114 114 - ]); At.class' "mb-2"] [ 115 115 - El.span ~at:[classes_attr (Css.tw [ 116 116 - Typography.(to_class (font_size `Sm)); 117 117 - Typography.(to_class (font_weight `Medium)); 118 118 - Color.text (Color.make `Gray ~variant:`V500 ()); 119 119 - ])] [El.txt name]; 120 120 - El.code ~at:[classes_attr (Css.tw [ 121 121 - Typography.(to_class (font_size `Xs)); 122 122 - Color.bg (Color.make `Gray ~variant:`V100 ()); 123 123 - Spacing.(to_class (px (Size.rem 0.5))); 124 124 - Spacing.(to_class (py (Size.rem 0.25))); 125 125 - Effects.rounded_sm; 126 126 - ])] [El.txt (to_string (Css.tw [typ_class]))]; 127 127 - ]; 128 128 - El.p ~at:[classes_attr (Css.tw [typ_class])] [ 129 129 - El.txt "The quick brown fox jumps over the lazy dog" 130 130 - ]; 131 131 - ] 132 132 - ) typography_examples); 133 133 - ]; 134 134 - 135 135 - (* Font Weights Section *) 136 136 - El.section [ 137 137 - El.h2 ~at:[classes_attr (Css.tw [ 138 138 - Typography.(to_class (font_size `Xl)); 139 139 - Typography.(to_class (font_weight `Semibold)); 140 140 - Color.text (Color.make `Gray ~variant:`V700 ()); 141 141 - ]); At.class' "mb-8"] [El.txt "Font Weights"]; 142 142 - 143 143 - let weight_examples = [ 144 144 - ("Light", Typography.(to_class (font_weight `Light))); 145 145 - ("Normal", Typography.(to_class (font_weight `Normal))); 146 146 - ("Medium", Typography.(to_class (font_weight `Medium))); 147 147 - ("Semibold", Typography.(to_class (font_weight `Semibold))); 148 148 - ("Bold", Typography.(to_class (font_weight `Bold))); 149 149 - ("Extrabold", Typography.(to_class (font_weight `Extrabold))); 150 150 - ] in 151 151 - 152 152 - El.div ~at:[classes_attr (Css.tw [ 153 153 - Color.bg Color.white; 154 154 - Spacing.(to_class (p (Size.rem 2.0))); 155 155 - Effects.rounded_lg; 156 156 - Effects.shadow_sm; 157 157 - ])] (List.map (fun (name, weight_class) -> 158 158 - El.div ~at:[At.class' "mb-6 last:mb-0"] [ 159 159 - El.div ~at:[classes_attr (Css.tw [ 160 160 - Display.flex; 161 161 - Flexbox.(to_class (align_items `Center)); 162 162 - Flexbox.(to_class (justify `Between)); 163 163 - Spacing.(to_class (gap `All (Size.rem 1.0))); 164 164 - ]); At.class' "mb-2"] [ 165 165 - El.span ~at:[classes_attr (Css.tw [ 166 166 - Typography.(to_class (font_size `Sm)); 167 167 - Typography.(to_class (font_weight `Medium)); 168 168 - Color.text (Color.make `Gray ~variant:`V500 ()); 169 169 - ])] [El.txt name]; 170 170 - El.code ~at:[classes_attr (Css.tw [ 171 171 - Typography.(to_class (font_size `Xs)); 172 172 - Color.bg (Color.make `Gray ~variant:`V100 ()); 173 173 - Spacing.(to_class (px (Size.rem 0.5))); 174 174 - Spacing.(to_class (py (Size.rem 0.25))); 175 175 - Effects.rounded_sm; 176 176 - ])] [El.txt (to_string (Css.tw [weight_class]))]; 177 177 - ]; 178 178 - El.p ~at:[classes_attr (Css.tw [ 179 179 - weight_class; 180 180 - Typography.(to_class (font_size `Lg)); 181 181 - ])] [ 182 182 - El.txt "The quick brown fox jumps over the lazy dog" 183 183 - ]; 184 184 - ] 185 185 - ) weight_examples); 78 78 + card [ 79 79 + p ~styles:[font_size `Xs; margin_bottom (rem 1.0)] [txt "Extra Small (xs) - Supporting text"]; 80 80 + p ~styles:[font_size `Sm; margin_bottom (rem 1.0)] [txt "Small (sm) - Caption text"]; 81 81 + p ~styles:[font_size `Base; margin_bottom (rem 1.0)] [txt "Base - Body text"]; 82 82 + p ~styles:[font_size `Lg; margin_bottom (rem 1.0)] [txt "Large (lg) - Lead text"]; 83 83 + p ~styles:[font_size `Xl; margin_bottom (rem 1.0)] [txt "Extra Large (xl) - Heading"]; 84 84 + p ~styles:[font_size `Xl2] [txt "2XL - Large heading"]; 85 85 + ]; 186 86 ]; 187 87 ]; 188 88 ]; 189 89 ] in 190 190 - html_doc 90 90 + html 191 91 192 92 let () = 193 193 - (* Output HTML to stdout *) 194 194 - let html_doc = create_color_demo () in 195 195 - print_string (El.to_string ~doctype:true html_doc) 93 93 + let html = create_color_demo () in 94 94 + print_string (El.to_string ~doctype:true html)

+189 -203

examples/comprehensive_showcase_07.ml

··· 1 1 - (* Example 07: Comprehensive Showcase - Full Application Demo *) 1 1 + (* Example 07: Comprehensive Showcase - Full application demo with GADT *) 2 2 3 3 open Htmlit 4 4 - open Tailwind 4 4 + open Tailwind_html 5 5 6 6 - let classes_attr tailwind_classes = 7 7 - At.class' (Tailwind.to_string tailwind_classes) 8 8 - 9 9 - let create_comprehensive_html_page () = 10 10 - (* Document structure with all features demonstrated *) 11 11 - let html_doc = El.html [ 6 6 + let create_showcase () = 7 7 + let html = El.html [ 12 8 El.head [ 13 9 El.meta ~at:[At.charset "utf-8"] (); 14 10 El.meta ~at:[At.name "viewport"; At.content "width=device-width, initial-scale=1"] (); 15 15 - El.title [El.txt "Tailwind OCaml - Complete Feature Showcase"]; 11 11 + El.title [txt "Comprehensive Showcase"]; 16 12 El.link ~at:[At.rel "stylesheet"; At.href "comprehensive_showcase_07.css"] (); 17 13 ]; 18 18 - 19 19 - El.body ~at:[classes_attr (Tailwind.Css.tw [ 20 20 - Color.bg (Color.make `Gray ~variant:`V50 ()); 21 21 - Typography.(to_class (font_size `Base)); 22 22 - Typography.(to_class (line_height `Normal)); 23 23 - ])] [ 24 24 - (* Header with navigation *) 25 25 - El.header ~at:[classes_attr (Tailwind.Css.tw [ 26 26 - Color.bg Color.white; 27 27 - Effects.shadow_lg; 28 28 - Effects.border; 29 29 - Color.border (Color.make `Gray ~variant:`V200 ()); 30 30 - Patterns.sticky_header; 31 31 - ])] [ 32 32 - El.div ~at:[classes_attr (Tailwind.Css.tw [ 33 33 - Patterns.container (); 34 34 - Spacing.(to_class (px (Size.rem 1.0))); 35 35 - ])] [ 36 36 - El.div ~at:[classes_attr (Tailwind.Css.tw [ 37 37 - Display.flex; 38 38 - Flexbox.(to_class (justify `Between)); 39 39 - Flexbox.(to_class (align_items `Center)); 40 40 - Layout.(to_class (height (Size.rem 4.0))); 41 41 - ])] [ 42 42 - (* Brand with gradient text *) 43 43 - El.h1 ~at:[classes_attr (Tailwind.Css.tw [ 44 44 - Typography.(to_class (font_size `Xl2)); 45 45 - Typography.(to_class (font_weight `Bold)); 46 46 - Color.text (Color.make `Blue ~variant:`V600 ()); 47 47 - ])] [El.txt "Tailwind OCaml"]; 14 14 + El.body ~at:[classes_attr [ 15 15 + min_height screen; 16 16 + bg_color (gray 50); 17 17 + ]] [ 18 18 + (* Header *) 19 19 + header ~styles:[ 20 20 + bg_color (Tailwind.Color.white); 21 21 + shadow `Md; 22 22 + padding (rem 1.0); 23 23 + ] [ 24 24 + container [ 25 25 + div ~styles:[ 26 26 + flex; 27 27 + justify_between; 28 28 + items_center; 29 29 + ] [ 30 30 + h1 ~styles:[ 31 31 + font_size `Xl; 32 32 + font_weight `Bold; 33 33 + text_color (blue 600); 34 34 + ] [txt "TailwindOCaml"]; 48 35 49 49 - (* Navigation items with hover effects *) 50 50 - El.nav ~at:[classes_attr (Tailwind.Css.tw [ 51 51 - Display.flex; 52 52 - Spacing.(to_class (gap `All (Size.rem 2.0))); 53 53 - Flexbox.(to_class (align_items `Center)); 54 54 - ])] [ 55 55 - El.a ~at:[At.href "#typography"; classes_attr (Tailwind.Css.tw [ 56 56 - Color.text (Color.make `Gray ~variant:`V600 ()); 57 57 - Variants.hover (Color.text (Color.make `Gray ~variant:`V900 ())); 58 58 - Effects.transition `All; 59 59 - ])] [El.txt "Typography"]; 60 60 - El.a ~at:[At.href "#layout"; classes_attr (Tailwind.Css.tw [ 61 61 - Color.text (Color.make `Gray ~variant:`V600 ()); 62 62 - Variants.hover (Color.text (Color.make `Gray ~variant:`V900 ())); 63 63 - Effects.transition `All; 64 64 - ])] [El.txt "Layout"]; 65 65 - El.a ~at:[At.href "#components"; classes_attr (Tailwind.Css.tw [ 66 66 - Color.text (Color.make `Gray ~variant:`V600 ()); 67 67 - Variants.hover (Color.text (Color.make `Gray ~variant:`V900 ())); 68 68 - Effects.transition `All; 69 69 - ])] [El.txt "Components"]; 70 70 - 71 71 - (* CTA Button *) 72 72 - El.button ~at:[classes_attr (Tailwind.Css.tw [ 73 73 - Color.bg (Color.make `Blue ~variant:`V600 ()); 74 74 - Color.text Color.white; 75 75 - Spacing.(to_class (px (Size.rem 1.0))); 76 76 - Spacing.(to_class (py (Size.rem 0.5))); 77 77 - Effects.rounded_md; 78 78 - Typography.(to_class (font_size `Sm)); 79 79 - Typography.(to_class (font_weight `Medium)); 80 80 - Variants.hover (Color.bg (Color.make `Blue ~variant:`V700 ())); 81 81 - Effects.transition `All; 82 82 - ])] [El.txt "Get Started"]; 36 36 + nav ~styles:[flex] [ 37 37 + a ~styles:[ 38 38 + padding_x (rem 1.0); 39 39 + text_color (gray 700); 40 40 + font_weight `Medium; 41 41 + ] ~href:"#features" [txt "Features"]; 42 42 + a ~styles:[ 43 43 + padding_x (rem 1.0); 44 44 + text_color (gray 700); 45 45 + font_weight `Medium; 46 46 + ] ~href:"#demo" [txt "Demo"]; 47 47 + a ~styles:[ 48 48 + padding_x (rem 1.0); 49 49 + text_color (gray 700); 50 50 + font_weight `Medium; 51 51 + ] ~href:"#contact" [txt "Contact"]; 83 52 ]; 84 53 ]; 85 54 ]; 86 55 ]; 87 56 88 88 - (* Main Content *) 89 89 - El.main [ 90 90 - (* Hero Section *) 91 91 - El.section ~at:[At.id "hero"; classes_attr (Tailwind.Css.tw [ 92 92 - Layout.(to_class (min_height Size.screen)); 93 93 - Display.flex; 94 94 - Flexbox.(to_class (align_items `Center)); 95 95 - Flexbox.(to_class (justify `Center)); 96 96 - Color.bg (Color.make `Gray ~variant:`V900 ()); 97 97 - Color.text Color.white; 98 98 - ])] [ 99 99 - El.div ~at:[At.class' "text-center container px-8"] [ 100 100 - El.h1 ~at:[classes_attr (Tailwind.Css.tw [ 101 101 - Typography.(to_class (font_size `Xl5)); 102 102 - Typography.(to_class (font_weight `Extrabold)); 103 103 - Spacing.(to_class (mb (Size.rem 1.5))); 104 104 - ])] [El.txt "Type-Safe Tailwind CSS"]; 57 57 + (* Hero Section *) 58 58 + main ~styles:[padding_y (rem 4.0)] [ 59 59 + container [ 60 60 + div ~styles:[text_center; margin_bottom (rem 4.0)] [ 61 61 + h2 ~styles:[ 62 62 + font_size `Xl3; 63 63 + font_weight `Bold; 64 64 + text_color (gray 800); 65 65 + margin_bottom (rem 1.5); 66 66 + ] [txt "Type-Safe CSS with GADT Interface"]; 105 67 106 106 - El.p ~at:[classes_attr (Tailwind.Css.tw [ 107 107 - Typography.(to_class (font_size `Xl)); 108 108 - Color.text (Color.make `Gray ~variant:`V100 ()); 109 109 - Spacing.(to_class (mb (Size.rem 2.0))); 110 110 - Typography.(to_class (line_height `Relaxed)); 111 111 - ])] [El.txt "Build beautiful, responsive web interfaces with OCaml's type system and Tailwind's utility classes."]; 68 68 + p ~styles:[ 69 69 + font_size `Xl; 70 70 + text_color (gray 600); 71 71 + margin_bottom (rem 2.0); 72 72 + ] [txt "Build beautiful, maintainable UIs with compile-time guarantees"]; 112 73 113 113 - El.div ~at:[At.class' "flex flex-wrap gap-4 justify-center"] [ 114 114 - El.button ~at:[At.class' "btn-primary"] [El.txt "🚀 Get Started"]; 115 115 - El.button ~at:[At.class' "btn-ghost text-white hover:bg-white hover:text-gray-900"] [El.txt "📖 View Docs"]; 74 74 + div ~styles:[flex; justify_center] [ 75 75 + btn_primary ~size:`Lg [txt "Get Started"]; 76 76 + btn_outline ~size:`Lg [txt "Learn More"]; 116 77 ]; 117 78 ]; 118 118 - ]; 119 119 - 120 120 - (* Features Grid *) 121 121 - El.section ~at:[At.class' "section bg-white"] [ 122 122 - El.div ~at:[At.class' "container"] [ 123 123 - El.h2 ~at:[At.class' "text-3xl font-bold text-center mb-12"] [El.txt "Features"]; 79 79 + 80 80 + (* Features Grid *) 81 81 + section ~styles:[margin_bottom (rem 4.0)] [ 82 82 + h3 ~styles:[ 83 83 + font_size `Xl2; 84 84 + font_weight `Bold; 85 85 + text_color (gray 800); 86 86 + text_center; 87 87 + margin_bottom (rem 3.0); 88 88 + ] [txt "Features"]; 124 89 125 125 - El.div ~at:[At.class' "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"] [ 126 126 - (* Feature cards *) 127 127 - El.div ~at:[At.class' "card p-6"] [ 128 128 - El.div ~at:[At.class' "w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4"] [ 129 129 - El.span ~at:[At.class' "text-2xl"] [El.txt "🎨"]; 130 130 - ]; 131 131 - El.h3 ~at:[At.class' "text-lg font-semibold mb-2"] [El.txt "Type-Safe Classes"]; 132 132 - El.p ~at:[At.class' "text-gray-600"] [ 133 133 - El.txt "Compile-time validation ensures your Tailwind classes are always correct." 134 134 - ]; 135 135 - ]; 136 136 - 137 137 - El.div ~at:[At.class' "card p-6"] [ 138 138 - El.div ~at:[At.class' "w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4"] [ 139 139 - El.span ~at:[At.class' "text-2xl"] [El.txt "⚡"]; 140 140 - ]; 141 141 - El.h3 ~at:[At.class' "text-lg font-semibold mb-2"] [El.txt "Fast Development"]; 142 142 - El.p ~at:[At.class' "text-gray-600"] [ 143 143 - El.txt "Autocomplete and type hints speed up your development workflow." 90 90 + div ~styles:[ 91 91 + grid; 92 92 + grid_cols 1; 93 93 + gap (rem 2.0); 94 94 + ] [ 95 95 + card [ 96 96 + h4 ~styles:[ 97 97 + font_size `Xl; 98 98 + font_weight `Semibold; 99 99 + text_color (blue 600); 100 100 + margin_bottom (rem 1.0); 101 101 + ] [txt "🎯 Type Safety"]; 102 102 + p ~styles:[text_color (gray 600)] [ 103 103 + txt "Catch styling errors at compile time with GADT-based type checking." 144 104 ]; 145 105 ]; 146 106 147 147 - El.div ~at:[At.class' "card p-6"] [ 148 148 - El.div ~at:[At.class' "w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4"] [ 149 149 - El.span ~at:[At.class' "text-2xl"] [El.txt "🔧"]; 150 150 - ]; 151 151 - El.h3 ~at:[At.class' "text-lg font-semibold mb-2"] [El.txt "Modular Design"]; 152 152 - El.p ~at:[At.class' "text-gray-600"] [ 153 153 - El.txt "Organized modules for colors, typography, layout, and more." 107 107 + card [ 108 108 + h4 ~styles:[ 109 109 + font_size `Xl; 110 110 + font_weight `Semibold; 111 111 + text_color (green 600); 112 112 + margin_bottom (rem 1.0); 113 113 + ] [txt "⚡ Performance"]; 114 114 + p ~styles:[text_color (gray 600)] [ 115 115 + txt "Zero runtime overhead with compile-time CSS generation." 154 116 ]; 155 117 ]; 156 118 157 157 - El.div ~at:[At.class' "card p-6"] [ 158 158 - El.div ~at:[At.class' "w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4"] [ 159 159 - El.span ~at:[At.class' "text-2xl"] [El.txt "📱"]; 160 160 - ]; 161 161 - El.h3 ~at:[At.class' "text-lg font-semibold mb-2"] [El.txt "Responsive Design"]; 162 162 - El.p ~at:[At.class' "text-gray-600"] [ 163 163 - El.txt "Built-in responsive utilities for all screen sizes." 119 119 + card [ 120 120 + h4 ~styles:[ 121 121 + font_size `Xl; 122 122 + font_weight `Semibold; 123 123 + text_color (purple 600); 124 124 + margin_bottom (rem 1.0); 125 125 + ] [txt "🔧 Developer Experience"]; 126 126 + p ~styles:[text_color (gray 600)] [ 127 127 + txt "Succinct syntax with heterogeneous lists and type inference." 164 128 ]; 165 129 ]; 130 130 + ]; 131 131 + ]; 132 132 + 133 133 + (* Demo Section *) 134 134 + section ~styles:[margin_bottom (rem 4.0)] [ 135 135 + h3 ~styles:[ 136 136 + font_size `Xl2; 137 137 + font_weight `Bold; 138 138 + text_color (gray 800); 139 139 + text_center; 140 140 + margin_bottom (rem 3.0); 141 141 + ] [txt "Live Demo"]; 142 142 + 143 143 + card ~elevated:true [ 144 144 + h4 ~styles:[ 145 145 + font_size `Xl; 146 146 + font_weight `Semibold; 147 147 + text_color (gray 800); 148 148 + margin_bottom (rem 1.5); 149 149 + ] [txt "Interactive Component"]; 166 150 167 167 - El.div ~at:[At.class' "card p-6"] [ 168 168 - El.div ~at:[At.class' "w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-4"] [ 169 169 - El.span ~at:[At.class' "text-2xl"] [El.txt "🎯"]; 170 170 - ]; 171 171 - El.h3 ~at:[At.class' "text-lg font-semibold mb-2"] [El.txt "Production Ready"]; 172 172 - El.p ~at:[At.class' "text-gray-600"] [ 173 173 - El.txt "Generate optimized CSS with Tailwind v4 CLI integration." 174 174 - ]; 151 151 + div ~styles:[margin_bottom (rem 2.0)] [ 152 152 + El.label ~at:[At.for' "demo-input"; classes_attr [ 153 153 + block; 154 154 + font_weight `Medium; 155 155 + text_color (gray 700); 156 156 + margin_bottom (rem 0.5); 157 157 + ]] [txt "Try it out:"]; 158 158 + El.input ~at:[At.type' "text"; At.id "demo-input"; At.placeholder "Type something..."; classes_attr [ 159 159 + width full; 160 160 + padding (rem 0.75); 161 161 + border; 162 162 + border_color (gray 300); 163 163 + rounded `Md; 164 164 + ]] (); 175 165 ]; 176 166 177 177 - El.div ~at:[At.class' "card p-6"] [ 178 178 - El.div ~at:[At.class' "w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4"] [ 179 179 - El.span ~at:[At.class' "text-2xl"] [El.txt "🚀"]; 180 180 - ]; 181 181 - El.h3 ~at:[At.class' "text-lg font-semibold mb-2"] [El.txt "Modern Workflow"]; 182 182 - El.p ~at:[At.class' "text-gray-600"] [ 183 183 - El.txt "Integrates seamlessly with dune and modern OCaml tooling." 184 184 - ]; 167 167 + div ~styles:[flex; justify_end] [ 168 168 + btn_secondary [txt "Cancel"]; 169 169 + btn_primary [txt "Submit"]; 185 170 ]; 186 171 ]; 187 172 ]; 188 188 - ]; 189 189 - 190 190 - (* Code Example Section *) 191 191 - El.section ~at:[At.class' "section bg-gray-50"] [ 192 192 - El.div ~at:[At.class' "container"] [ 193 193 - El.h2 ~at:[At.class' "text-3xl font-bold text-center mb-12"] [El.txt "Simple & Intuitive"]; 173 173 + 174 174 + (* Statistics *) 175 175 + section ~styles:[margin_bottom (rem 4.0)] [ 176 176 + h3 ~styles:[ 177 177 + font_size `Xl2; 178 178 + font_weight `Bold; 179 179 + text_color (gray 800); 180 180 + text_center; 181 181 + margin_bottom (rem 3.0); 182 182 + ] [txt "By the Numbers"]; 194 183 195 195 - El.div ~at:[At.class' "max-w-4xl mx-auto"] [ 196 196 - El.div ~at:[At.class' "bg-gray-900 rounded-lg p-6 text-white"] [ 197 197 - El.pre ~at:[At.class' "text-sm overflow-x-auto"] [ 198 198 - El.code [El.txt {|open Tailwind 199 199 - 200 200 - let button_classes = Css.tw [ 201 201 - Color.bg (Color.make `Blue ~variant:`V600 ()); 202 202 - Color.text Color.white; 203 203 - Spacing.(to_class (px (Size.rem 1.0))); 204 204 - Spacing.(to_class (py (Size.rem 0.5))); 205 205 - Effects.rounded_md; 206 206 - Typography.(to_class (font_weight `Semibold)); 207 207 - Variants.hover (Color.bg (Color.make `Blue ~variant:`V700 ())); 208 208 - ] 209 209 - 210 210 - let button = 211 211 - El.button ~at:[At.class' (to_string button_classes)] [ 212 212 - El.txt "Click me!" 213 213 - ]|}]; 214 214 - ]; 184 184 + div ~styles:[flex; justify_between; text_center] [ 185 185 + div [ 186 186 + p ~styles:[ 187 187 + font_size `Xl3; 188 188 + font_weight `Bold; 189 189 + text_color (blue 600); 190 190 + ] [txt "100%"]; 191 191 + p ~styles:[text_color (gray 600)] [txt "Type Safe"]; 192 192 + ]; 193 193 + 194 194 + div [ 195 195 + p ~styles:[ 196 196 + font_size `Xl3; 197 197 + font_weight `Bold; 198 198 + text_color (green 600); 199 199 + ] [txt "0ms"]; 200 200 + p ~styles:[text_color (gray 600)] [txt "Runtime Cost"]; 201 201 + ]; 202 202 + 203 203 + div [ 204 204 + p ~styles:[ 205 205 + font_size `Xl3; 206 206 + font_weight `Bold; 207 207 + text_color (purple 600); 208 208 + ] [txt "∞"]; 209 209 + p ~styles:[text_color (gray 600)] [txt "Possibilities"]; 215 210 ]; 216 211 ]; 217 212 ]; ··· 219 214 ]; 220 215 221 216 (* Footer *) 222 222 - El.footer ~at:[At.class' "bg-gray-800 text-white py-12"] [ 223 223 - El.div ~at:[At.class' "container text-center"] [ 224 224 - El.p ~at:[At.class' "text-lg font-semibold mb-4"] [El.txt "Tailwind OCaml"]; 225 225 - El.p ~at:[At.class' "text-gray-300 mb-6"] [ 226 226 - El.txt "Type-safe Tailwind CSS for OCaml applications" 217 217 + footer ~styles:[ 218 218 + bg_color (gray 800); 219 219 + text_color (gray 200); 220 220 + padding_y (rem 2.0); 221 221 + text_center; 222 222 + ] [ 223 223 + container [ 224 224 + p ~styles:[margin_bottom (rem 1.0)] [ 225 225 + txt "© 2024 TailwindOCaml. Built with type-safe GADT interface." 227 226 ]; 228 228 - El.div ~at:[At.class' "flex flex-wrap gap-8 justify-center"] [ 229 229 - El.a ~at:[At.href "#"; At.class' "text-gray-300 hover:text-white transition-colors"] [ 230 230 - El.txt "Documentation" 231 231 - ]; 232 232 - El.a ~at:[At.href "#"; At.class' "text-gray-300 hover:text-white transition-colors"] [ 233 233 - El.txt "GitHub" 234 234 - ]; 235 235 - El.a ~at:[At.href "#"; At.class' "text-gray-300 hover:text-white transition-colors"] [ 236 236 - El.txt "Examples" 237 237 - ]; 238 238 - El.a ~at:[At.href "#"; At.class' "text-gray-300 hover:text-white transition-colors"] [ 239 239 - El.txt "Support" 240 240 - ]; 227 227 + p ~styles:[font_size `Sm; text_color (gray 400)] [ 228 228 + txt "Powered by OCaml, Tailwind CSS, and compile-time guarantees." 241 229 ]; 242 230 ]; 243 231 ]; 244 232 ]; 245 233 ] in 246 246 - html_doc 234 234 + html 247 235 248 236 let () = 249 249 - (* Output HTML to stdout *) 250 250 - let html_doc = create_comprehensive_html_page () in 251 251 - let html_string = El.to_string ~doctype:true html_doc in 252 252 - print_string html_string 237 237 + let html = create_showcase () in 238 238 + print_string (El.to_string ~doctype:true html)

+29 -12

examples/dune

··· 1 1 - ;; Notebook-style examples - progressive learning path 1 1 + ;; Examples demonstrating GADT-based Tailwind interface 2 2 (executables 3 3 (public_names 4 4 index 5 5 hello_tailwind 6 6 colors_and_typography 7 7 layout_and_spacing 8 8 - responsive_design 9 9 - effects_and_variants 10 10 - patterns_and_components 11 11 - comprehensive_showcase) 8 8 + responsive_design 9 9 + effects_and_variants 10 10 + patterns_and_components 11 11 + comprehensive_showcase 12 12 + button_demo) 12 13 (names 13 14 index_00 14 15 hello_tailwind_01 ··· 17 18 responsive_design_04 18 19 effects_and_variants_05 19 20 patterns_and_components_06 20 20 - comprehensive_showcase_07) 21 21 + comprehensive_showcase_07 22 22 + button_demo) 21 23 (package tailwind) 22 24 (libraries tailwind tailwind-html htmlit unix)) 23 25 ··· 26 28 (public_name index_html_generator) 27 29 (name index_html_generator) 28 30 (package tailwind) 29 29 - (libraries tailwind htmlit)) 30 30 - 31 31 + (libraries tailwind tailwind-html htmlit)) 31 32 32 33 ;; Generate HTML files from examples 33 34 (rule ··· 65 66 (deps (:exe comprehensive_showcase_07.exe)) 66 67 (action (with-stdout-to %{target} (run %{exe})))) 67 68 69 69 + (rule 70 70 + (target button_demo.html) 71 71 + (deps (:exe button_demo.exe)) 72 72 + (action (with-stdout-to %{target} (run %{exe})))) 73 73 + 68 74 ;; Generate CSS files using Tailwind CLI 69 75 (rule 70 76 (targets hello_tailwind_01.css) ··· 122 128 (action 123 129 (run tailwindcss --input input.css --output %{targets} --minify))) 124 130 131 131 + (rule 132 132 + (targets button_demo.css) 133 133 + (deps 134 134 + input.css 135 135 + button_demo.html) 136 136 + (action 137 137 + (run tailwindcss --input input.css --output %{targets} --minify))) 138 138 + 125 139 ;; Generate index.html page 126 140 (rule 127 141 (target index.html) ··· 139 153 responsive_design_04.html 140 154 effects_and_variants_05.html 141 155 patterns_and_components_06.html 142 142 - comprehensive_showcase_07.html)) 156 156 + comprehensive_showcase_07.html 157 157 + button_demo.html)) 143 158 144 159 ;; Alias to build all CSS files (requires Tailwind CLI) 145 145 - ;; Run: npm install -D @tailwindcss/cli 146 160 (alias 147 161 (name examples-css) 148 162 (deps ··· 153 167 responsive_design_04.css 154 168 effects_and_variants_05.css 155 169 patterns_and_components_06.css 156 156 - comprehensive_showcase_07.css)) 170 170 + comprehensive_showcase_07.css 171 171 + button_demo.css)) 157 172 158 173 ;; Install generated files 159 174 (install ··· 174 189 (patterns_and_components_06.html as examples/patterns_and_components_06.html) 175 190 (patterns_and_components_06.css as examples/patterns_and_components_06.css) 176 191 (comprehensive_showcase_07.html as examples/comprehensive_showcase_07.html) 177 177 - (comprehensive_showcase_07.css as examples/comprehensive_showcase_07.css))) 192 192 + (comprehensive_showcase_07.css as examples/comprehensive_showcase_07.css) 193 193 + (button_demo.html as examples/button_demo.html) 194 194 + (button_demo.css as examples/button_demo.css)))

+183 -279

examples/effects_and_variants_05.ml

··· 1 1 - (* Example 05: Effects and Variants - Interactive Elements and Visual Effects *) 1 1 + (* Example 05: Effects and Variants - Visual effects with GADT *) 2 2 3 3 open Htmlit 4 4 - open Tailwind 5 5 - 6 6 - let classes_attr tailwind_classes = 7 7 - At.class' (Tailwind.to_string tailwind_classes) 4 4 + open Tailwind_html 8 5 9 6 let create_effects_demo () = 10 10 - 11 11 - (* Create comprehensive effects demonstration *) 12 12 - let html_doc = El.html [ 7 7 + let html = El.html [ 13 8 El.head [ 14 9 El.meta ~at:[At.charset "utf-8"] (); 15 10 El.meta ~at:[At.name "viewport"; At.content "width=device-width, initial-scale=1"] (); 16 16 - El.title [El.txt "Effects and Variants"]; 11 11 + El.title [txt "Effects and Variants"]; 17 12 El.link ~at:[At.rel "stylesheet"; At.href "effects_and_variants_05.css"] (); 18 13 ]; 19 19 - El.body ~at:[At.class' "min-h-screen bg-gray-50 p-8"] [ 20 20 - El.div ~at:[At.class' "max-w-6xl mx-auto"] [ 21 21 - El.h1 ~at:[classes_attr (Css.tw [ 22 22 - Typography.(to_class (font_size `Xl2)); 23 23 - Typography.(to_class (font_weight `Bold)); 24 24 - Color.text (Color.make `Gray ~variant:`V800 ()); 25 25 - ]); At.class' "mb-8 text-center"] [El.txt "Effects and Variants Demo"]; 14 14 + El.body ~at:[classes_attr [ 15 15 + min_height screen; 16 16 + bg_color (gray 50); 17 17 + padding (rem 2.0); 18 18 + ]] [ 19 19 + container [ 20 20 + h1 ~styles:[ 21 21 + font_size `Xl2; 22 22 + font_weight `Bold; 23 23 + text_color (gray 800); 24 24 + text_center; 25 25 + margin_bottom (rem 2.0); 26 26 + ] [txt "Effects and Variants Demo"]; 26 27 27 28 (* Shadow Effects *) 28 28 - El.section ~at:[At.class' "mb-8"] [ 29 29 - El.h2 ~at:[classes_attr (Css.tw [ 30 30 - Typography.(to_class (font_size `Xl)); 31 31 - Typography.(to_class (font_weight `Semibold)); 32 32 - Color.text (Color.make `Gray ~variant:`V700 ()); 33 33 - ]); At.class' "mb-6"] [El.txt "Shadow Effects"]; 29 29 + section ~styles:[margin_bottom (rem 2.0)] [ 30 30 + h2 ~styles:[ 31 31 + font_size `Xl; 32 32 + font_weight `Semibold; 33 33 + text_color (gray 700); 34 34 + margin_bottom (rem 1.5); 35 35 + ] [txt "Shadow Effects"]; 34 36 35 35 - El.div ~at:[classes_attr (Css.tw [ 36 36 - Display.grid; 37 37 - Grid.(to_class (template_cols (`Cols 1))); 38 38 - Responsive.(to_class (at_breakpoint `Md (Grid.(to_class (template_cols (`Cols 3)))))); 39 39 - Spacing.(to_class (gap `All (Size.rem 1.5))); 40 40 - ])] [ 41 41 - El.div ~at:[classes_attr (Css.tw [ 42 42 - Color.bg Color.white; 43 43 - Spacing.(to_class (p (Size.rem 1.5))); 44 44 - Effects.shadow_sm; 45 45 - Effects.rounded_lg; 46 46 - ]); At.class' "text-center"] [ 47 47 - El.h3 ~at:[classes_attr (Css.tw [ 48 48 - Typography.(to_class (font_weight `Semibold)); 49 49 - Color.text (Color.make `Gray ~variant:`V700 ()); 50 50 - ]); At.class' "mb-2"] [El.txt "Small Shadow"]; 51 51 - El.p ~at:[classes_attr (Css.tw [ 52 52 - Typography.(to_class (font_size `Sm)); 53 53 - Color.text (Color.make `Gray ~variant:`V600 ()); 54 54 - ])] [El.txt "shadow-sm"]; 37 37 + div ~styles:[ 38 38 + grid; 39 39 + grid_cols 1; 40 40 + gap (rem 1.0); 41 41 + ] [ 42 42 + div ~styles:[ 43 43 + bg_color (Tailwind.Color.white); 44 44 + padding (rem 1.5); 45 45 + shadow `Sm; 46 46 + rounded `Lg; 47 47 + margin_bottom (rem 1.0); 48 48 + text_center; 49 49 + ] [ 50 50 + h3 ~styles:[ 51 51 + font_weight `Semibold; 52 52 + text_color (gray 700); 53 53 + margin_bottom (rem 0.5); 54 54 + ] [txt "Small Shadow"]; 55 55 + p ~styles:[ 56 56 + font_size `Sm; 57 57 + text_color (gray 600); 58 58 + ] [txt "shadow-sm"]; 55 59 ]; 56 60 57 57 - El.div ~at:[classes_attr (Css.tw [ 58 58 - Color.bg Color.white; 59 59 - Spacing.(to_class (p (Size.rem 1.5))); 60 60 - Effects.shadow_md; 61 61 - Effects.rounded_lg; 62 62 - ]); At.class' "text-center"] [ 63 63 - El.h3 ~at:[classes_attr (Css.tw [ 64 64 - Typography.(to_class (font_weight `Semibold)); 65 65 - Color.text (Color.make `Gray ~variant:`V700 ()); 66 66 - ]); At.class' "mb-2"] [El.txt "Medium Shadow"]; 67 67 - El.p ~at:[classes_attr (Css.tw [ 68 68 - Typography.(to_class (font_size `Sm)); 69 69 - Color.text (Color.make `Gray ~variant:`V600 ()); 70 70 - ])] [El.txt "shadow-md"]; 61 61 + div ~styles:[ 62 62 + bg_color (Tailwind.Color.white); 63 63 + padding (rem 1.5); 64 64 + shadow `Md; 65 65 + rounded `Lg; 66 66 + margin_bottom (rem 1.0); 67 67 + text_center; 68 68 + ] [ 69 69 + h3 ~styles:[ 70 70 + font_weight `Semibold; 71 71 + text_color (gray 700); 72 72 + margin_bottom (rem 0.5); 73 73 + ] [txt "Medium Shadow"]; 74 74 + p ~styles:[ 75 75 + font_size `Sm; 76 76 + text_color (gray 600); 77 77 + ] [txt "shadow-md"]; 71 78 ]; 72 79 73 73 - El.div ~at:[classes_attr (Css.tw [ 74 74 - Color.bg Color.white; 75 75 - Spacing.(to_class (p (Size.rem 1.5))); 76 76 - Effects.shadow_lg; 77 77 - Effects.rounded_lg; 78 78 - ]); At.class' "text-center"] [ 79 79 - El.h3 ~at:[classes_attr (Css.tw [ 80 80 - Typography.(to_class (font_weight `Semibold)); 81 81 - Color.text (Color.make `Gray ~variant:`V700 ()); 82 82 - ]); At.class' "mb-2"] [El.txt "Large Shadow"]; 83 83 - El.p ~at:[classes_attr (Css.tw [ 84 84 - Typography.(to_class (font_size `Sm)); 85 85 - Color.text (Color.make `Gray ~variant:`V600 ()); 86 86 - ])] [El.txt "shadow-lg"]; 80 80 + div ~styles:[ 81 81 + bg_color (Tailwind.Color.white); 82 82 + padding (rem 1.5); 83 83 + shadow `Lg; 84 84 + rounded `Lg; 85 85 + text_center; 86 86 + ] [ 87 87 + h3 ~styles:[ 88 88 + font_weight `Semibold; 89 89 + text_color (gray 700); 90 90 + margin_bottom (rem 0.5); 91 91 + ] [txt "Large Shadow"]; 92 92 + p ~styles:[ 93 93 + font_size `Sm; 94 94 + text_color (gray 600); 95 95 + ] [txt "shadow-lg"]; 87 96 ]; 88 97 ]; 89 98 ]; 90 99 91 100 (* Rounded Corners *) 92 92 - El.section ~at:[At.class' "mb-8"] [ 93 93 - El.h2 ~at:[classes_attr (Css.tw [ 94 94 - Typography.(to_class (font_size `Xl)); 95 95 - Typography.(to_class (font_weight `Semibold)); 96 96 - Color.text (Color.make `Gray ~variant:`V700 ()); 97 97 - ]); At.class' "mb-6"] [El.txt "Border Radius"]; 101 101 + section ~styles:[margin_bottom (rem 2.0)] [ 102 102 + h2 ~styles:[ 103 103 + font_size `Xl; 104 104 + font_weight `Semibold; 105 105 + text_color (gray 700); 106 106 + margin_bottom (rem 1.5); 107 107 + ] [txt "Border Radius"]; 98 108 99 99 - El.div ~at:[classes_attr (Css.tw [ 100 100 - Display.flex; 101 101 - Flexbox.(to_class (wrap `Wrap)); 102 102 - Spacing.(to_class (gap `All (Size.rem 1.0))); 103 103 - Flexbox.(to_class (justify `Center)); 104 104 - ])] [ 105 105 - El.div ~at:[classes_attr (Css.tw [ 106 106 - Color.bg (Color.make `Blue ~variant:`V100 ()); 107 107 - Spacing.(to_class (p (Size.rem 1.0))); 108 108 - (* No rounded corners *) 109 109 - ]); At.class' "text-center"] [El.txt "No Radius"]; 109 109 + div ~styles:[ 110 110 + grid; 111 111 + grid_cols 2; 112 112 + gap (rem 1.0); 113 113 + ] [ 114 114 + div ~styles:[ 115 115 + bg_color (blue 100); 116 116 + padding (rem 1.0); 117 117 + rounded `Sm; 118 118 + text_center; 119 119 + margin_bottom (rem 1.0); 120 120 + ] [txt "Small Radius"]; 110 121 111 111 - El.div ~at:[classes_attr (Css.tw [ 112 112 - Color.bg (Color.make `Green ~variant:`V100 ()); 113 113 - Spacing.(to_class (p (Size.rem 1.0))); 114 114 - Effects.rounded_sm; 115 115 - ]); At.class' "text-center"] [El.txt "Small"]; 122 122 + div ~styles:[ 123 123 + bg_color (green 100); 124 124 + padding (rem 1.0); 125 125 + rounded `Md; 126 126 + text_center; 127 127 + margin_bottom (rem 1.0); 128 128 + ] [txt "Medium Radius"]; 116 129 117 117 - El.div ~at:[classes_attr (Css.tw [ 118 118 - Color.bg (Color.make `Purple ~variant:`V100 ()); 119 119 - Spacing.(to_class (p (Size.rem 1.0))); 120 120 - Effects.rounded_md; 121 121 - ]); At.class' "text-center"] [El.txt "Medium"]; 122 122 - 123 123 - El.div ~at:[classes_attr (Css.tw [ 124 124 - Color.bg (Color.make `Red ~variant:`V100 ()); 125 125 - Spacing.(to_class (p (Size.rem 1.0))); 126 126 - Effects.rounded_lg; 127 127 - ]); At.class' "text-center"] [El.txt "Large"]; 130 130 + div ~styles:[ 131 131 + bg_color (purple 100); 132 132 + padding (rem 1.0); 133 133 + rounded `Lg; 134 134 + text_center; 135 135 + margin_bottom (rem 1.0); 136 136 + ] [txt "Large Radius"]; 128 137 129 129 - El.div ~at:[classes_attr (Css.tw [ 130 130 - Color.bg (Color.make `Yellow ~variant:`V100 ()); 131 131 - Spacing.(to_class (p (Size.rem 1.0))); 132 132 - Effects.rounded_full; 133 133 - ]); At.class' "text-center"] [El.txt "Full"]; 138 138 + div ~styles:[ 139 139 + bg_color (yellow 100); 140 140 + padding (rem 1.0); 141 141 + rounded `Full; 142 142 + text_center; 143 143 + ] [txt "Full Radius"]; 134 144 ]; 135 145 ]; 136 146 137 147 (* Interactive Buttons *) 138 138 - El.section ~at:[At.class' "mb-8"] [ 139 139 - El.h2 ~at:[classes_attr (Css.tw [ 140 140 - Typography.(to_class (font_size `Xl)); 141 141 - Typography.(to_class (font_weight `Semibold)); 142 142 - Color.text (Color.make `Gray ~variant:`V700 ()); 143 143 - ]); At.class' "mb-6"] [El.txt "Interactive Buttons"]; 148 148 + section ~styles:[margin_bottom (rem 2.0)] [ 149 149 + h2 ~styles:[ 150 150 + font_size `Xl; 151 151 + font_weight `Semibold; 152 152 + text_color (gray 700); 153 153 + margin_bottom (rem 1.5); 154 154 + ] [txt "Interactive Buttons"]; 144 155 145 145 - El.div ~at:[classes_attr (Css.tw [ 146 146 - Display.flex; 147 147 - Flexbox.(to_class (wrap `Wrap)); 148 148 - Spacing.(to_class (gap `All (Size.rem 1.0))); 149 149 - Flexbox.(to_class (justify `Center)); 150 150 - ])] [ 151 151 - (* Hover color change *) 152 152 - El.button ~at:[classes_attr (Css.tw [ 153 153 - Color.bg (Color.make `Blue ~variant:`V500 ()); 154 154 - Color.text Color.white; 155 155 - Spacing.(to_class (px (Size.rem 1.5))); 156 156 - Spacing.(to_class (py (Size.rem 0.75))); 157 157 - Effects.rounded_md; 158 158 - Typography.(to_class (font_weight `Medium)); 159 159 - Effects.transition `All; 160 160 - Variants.hover (Color.bg (Color.make `Blue ~variant:`V600 ())); 161 161 - ])] [El.txt "Hover Color"]; 162 162 - 163 163 - (* Hover shadow *) 164 164 - El.button ~at:[classes_attr (Css.tw [ 165 165 - Color.bg (Color.make `Green ~variant:`V500 ()); 166 166 - Color.text Color.white; 167 167 - Spacing.(to_class (px (Size.rem 1.5))); 168 168 - Spacing.(to_class (py (Size.rem 0.75))); 169 169 - Effects.rounded_md; 170 170 - Typography.(to_class (font_weight `Medium)); 171 171 - Effects.shadow_md; 172 172 - Effects.transition `All; 173 173 - Variants.hover Effects.shadow_lg; 174 174 - ])] [El.txt "Hover Shadow"]; 175 175 - 176 176 - (* Scale effect *) 177 177 - El.button ~at:[classes_attr (Css.tw [ 178 178 - Color.bg (Color.make `Purple ~variant:`V500 ()); 179 179 - Color.text Color.white; 180 180 - Spacing.(to_class (px (Size.rem 1.5))); 181 181 - Spacing.(to_class (py (Size.rem 0.75))); 182 182 - Effects.rounded_md; 183 183 - Typography.(to_class (font_weight `Medium)); 184 184 - Effects.transition `All; 185 185 - ]); At.class' "hover:scale-105 active:scale-95"] [El.txt "Scale Effect"]; 186 186 - 187 187 - (* Focus ring *) 188 188 - El.button ~at:[classes_attr (Css.tw [ 189 189 - Color.bg (Color.make `Red ~variant:`V500 ()); 190 190 - Color.text Color.white; 191 191 - Spacing.(to_class (px (Size.rem 1.5))); 192 192 - Spacing.(to_class (py (Size.rem 0.75))); 193 193 - Effects.rounded_md; 194 194 - Typography.(to_class (font_weight `Medium)); 195 195 - Effects.transition `All; 196 196 - Variants.focus Effects.shadow_md; 197 197 - ])] [El.txt "Focus Ring"]; 198 198 - ]; 199 199 - ]; 200 200 - 201 201 - (* Card Hover Effects *) 202 202 - El.section ~at:[At.class' "mb-8"] [ 203 203 - El.h2 ~at:[classes_attr (Css.tw [ 204 204 - Typography.(to_class (font_size `Xl)); 205 205 - Typography.(to_class (font_weight `Semibold)); 206 206 - Color.text (Color.make `Gray ~variant:`V700 ()); 207 207 - ]); At.class' "mb-6"] [El.txt "Card Hover Effects"]; 208 208 - 209 209 - El.div ~at:[classes_attr (Css.tw [ 210 210 - Display.grid; 211 211 - Grid.(to_class (template_cols (`Cols 1))); 212 212 - Responsive.(to_class (at_breakpoint `Md (Grid.(to_class (template_cols (`Cols 2)))))); 213 213 - Spacing.(to_class (gap `All (Size.rem 1.5))); 214 214 - ])] [ 215 215 - (* Hover shadow card *) 216 216 - El.div ~at:[classes_attr (Css.tw [ 217 217 - Color.bg Color.white; 218 218 - Spacing.(to_class (p (Size.rem 1.5))); 219 219 - Effects.rounded_lg; 220 220 - Effects.shadow_md; 221 221 - Effects.transition `All; 222 222 - Variants.hover Effects.shadow_lg; 223 223 - ]); At.class' "cursor-pointer"] [ 224 224 - El.h3 ~at:[classes_attr (Css.tw [ 225 225 - Typography.(to_class (font_size `Lg)); 226 226 - Typography.(to_class (font_weight `Semibold)); 227 227 - Color.text (Color.make `Gray ~variant:`V800 ()); 228 228 - ]); At.class' "mb-2"] [El.txt "Shadow Lift"]; 229 229 - El.p ~at:[classes_attr (Css.tw [ 230 230 - Color.text (Color.make `Gray ~variant:`V600 ()); 231 231 - ])] [El.txt "Hover to see the shadow increase. This creates a lifting effect."]; 232 232 - ]; 233 233 - 234 234 - (* Scale and shadow card *) 235 235 - El.div ~at:[classes_attr (Css.tw [ 236 236 - Color.bg Color.white; 237 237 - Spacing.(to_class (p (Size.rem 1.5))); 238 238 - Effects.rounded_lg; 239 239 - Effects.shadow_md; 240 240 - Effects.transition `All; 241 241 - ]); At.class' "cursor-pointer hover:scale-105 hover:shadow-xl"] [ 242 242 - El.h3 ~at:[classes_attr (Css.tw [ 243 243 - Typography.(to_class (font_size `Lg)); 244 244 - Typography.(to_class (font_weight `Semibold)); 245 245 - Color.text (Color.make `Gray ~variant:`V800 ()); 246 246 - ]); At.class' "mb-2"] [El.txt "Scale + Shadow"]; 247 247 - El.p ~at:[classes_attr (Css.tw [ 248 248 - Color.text (Color.make `Gray ~variant:`V600 ()); 249 249 - ])] [El.txt "This card both scales up and increases shadow on hover."]; 250 250 - ]; 156 156 + div ~styles:[ 157 157 + grid; 158 158 + grid_cols 1; 159 159 + gap (rem 1.0); 160 160 + ] [ 161 161 + btn_primary [txt "Primary Button with Hover"]; 162 162 + btn_secondary [txt "Secondary Button"]; 163 163 + btn_outline [txt "Outline Button"]; 251 164 ]; 252 165 ]; 253 166 254 167 (* Border Effects *) 255 255 - El.section [ 256 256 - El.h2 ~at:[classes_attr (Css.tw [ 257 257 - Typography.(to_class (font_size `Xl)); 258 258 - Typography.(to_class (font_weight `Semibold)); 259 259 - Color.text (Color.make `Gray ~variant:`V700 ()); 260 260 - ]); At.class' "mb-6"] [El.txt "Border Effects"]; 168 168 + section [ 169 169 + h2 ~styles:[ 170 170 + font_size `Xl; 171 171 + font_weight `Semibold; 172 172 + text_color (gray 700); 173 173 + margin_bottom (rem 1.5); 174 174 + ] [txt "Border Effects"]; 261 175 262 262 - El.div ~at:[classes_attr (Css.tw [ 263 263 - Display.grid; 264 264 - Grid.(to_class (template_cols (`Cols 1))); 265 265 - Responsive.(to_class (at_breakpoint `Md (Grid.(to_class (template_cols (`Cols 3)))))); 266 266 - Spacing.(to_class (gap `All (Size.rem 1.5))); 267 267 - ])] [ 176 176 + div ~styles:[ 177 177 + grid; 178 178 + grid_cols 1; 179 179 + gap (rem 1.0); 180 180 + ] [ 268 181 (* Regular border *) 269 269 - El.div ~at:[classes_attr (Css.tw [ 270 270 - Color.bg Color.white; 271 271 - Spacing.(to_class (p (Size.rem 1.5))); 272 272 - Effects.border; 273 273 - Color.border (Color.make `Gray ~variant:`V200 ()); 274 274 - Effects.rounded_lg; 275 275 - ]); At.class' "text-center"] [ 276 276 - El.h3 ~at:[classes_attr (Css.tw [ 277 277 - Typography.(to_class (font_weight `Semibold)); 278 278 - Color.text (Color.make `Gray ~variant:`V700 ()); 279 279 - ]); At.class' "mb-2"] [El.txt "Regular Border"]; 280 280 - El.p ~at:[classes_attr (Css.tw [ 281 281 - Typography.(to_class (font_size `Sm)); 282 282 - Color.text (Color.make `Gray ~variant:`V600 ()); 283 283 - ])] [El.txt "border border-gray-200"]; 182 182 + div ~styles:[ 183 183 + bg_color (Tailwind.Color.white); 184 184 + padding (rem 1.5); 185 185 + border; 186 186 + border_color (gray 200); 187 187 + rounded `Lg; 188 188 + text_center; 189 189 + margin_bottom (rem 1.0); 190 190 + ] [ 191 191 + h3 ~styles:[ 192 192 + font_weight `Semibold; 193 193 + text_color (gray 700); 194 194 + margin_bottom (rem 0.5); 195 195 + ] [txt "Regular Border"]; 196 196 + p ~styles:[ 197 197 + font_size `Sm; 198 198 + text_color (gray 600); 199 199 + ] [txt "border border-gray-200"]; 284 200 ]; 285 201 286 202 (* Colored border *) 287 287 - El.div ~at:[classes_attr (Css.tw [ 288 288 - Color.bg Color.white; 289 289 - Spacing.(to_class (p (Size.rem 1.5))); 290 290 - Effects.border; 291 291 - Color.border (Color.make `Blue ~variant:`V300 ()); 292 292 - Effects.rounded_lg; 293 293 - ]); At.class' "text-center"] [ 294 294 - El.h3 ~at:[classes_attr (Css.tw [ 295 295 - Typography.(to_class (font_weight `Semibold)); 296 296 - Color.text (Color.make `Blue ~variant:`V600 ()); 297 297 - ]); At.class' "mb-2"] [El.txt "Colored Border"]; 298 298 - El.p ~at:[classes_attr (Css.tw [ 299 299 - Typography.(to_class (font_size `Sm)); 300 300 - Color.text (Color.make `Gray ~variant:`V600 ()); 301 301 - ])] [El.txt "border border-blue-300"]; 302 302 - ]; 303 303 - 304 304 - (* Thick border *) 305 305 - El.div ~at:[At.class' "bg-white p-6 border-2 border-purple-300 rounded-lg text-center"] [ 306 306 - El.h3 ~at:[classes_attr (Css.tw [ 307 307 - Typography.(to_class (font_weight `Semibold)); 308 308 - Color.text (Color.make `Purple ~variant:`V600 ()); 309 309 - ]); At.class' "mb-2"] [El.txt "Thick Border"]; 310 310 - El.p ~at:[classes_attr (Css.tw [ 311 311 - Typography.(to_class (font_size `Sm)); 312 312 - Color.text (Color.make `Gray ~variant:`V600 ()); 313 313 - ])] [El.txt "border-2 border-purple-300"]; 203 203 + div ~styles:[ 204 204 + bg_color (Tailwind.Color.white); 205 205 + padding (rem 1.5); 206 206 + border; 207 207 + border_color (blue 300); 208 208 + rounded `Lg; 209 209 + text_center; 210 210 + ] [ 211 211 + h3 ~styles:[ 212 212 + font_weight `Semibold; 213 213 + text_color (blue 600); 214 214 + margin_bottom (rem 0.5); 215 215 + ] [txt "Colored Border"]; 216 216 + p ~styles:[ 217 217 + font_size `Sm; 218 218 + text_color (gray 600); 219 219 + ] [txt "border border-blue-300"]; 314 220 ]; 315 221 ]; 316 222 ]; 317 223 ]; 318 224 ]; 319 225 ] in 320 320 - html_doc 226 226 + html 321 227 322 228 let () = 323 323 - (* Output HTML to stdout *) 324 324 - let html_doc = create_effects_demo () in 325 325 - let html_string = El.to_string ~doctype:true html_doc in 326 326 - print_string html_string 229 229 + let html = create_effects_demo () in 230 230 + print_string (El.to_string ~doctype:true html)

-213

examples/gadt_demo.ml

··· 1 1 - (* GADT Heterogeneous List Demo - Revolutionary Tailwind interface *) 2 2 - 3 3 - open Htmlit 4 4 - open Tailwind_html 5 5 - 6 6 - let create_gadt_demo () = 7 7 - let html = El.html [ 8 8 - El.head [ 9 9 - El.meta ~at:[At.charset "utf-8"] (); 10 10 - El.meta ~at:[At.name "viewport"; At.content "width=device-width, initial-scale=1"] (); 11 11 - El.title [txt "GADT Tailwind Demo"]; 12 12 - El.link ~at:[At.rel "stylesheet"; At.href "gadt_demo.css"] (); 13 13 - ]; 14 14 - 15 15 - El.body ~at:[classes_attr [ 16 16 - bg_color (gray 50); 17 17 - padding (rem 2.0); 18 18 - ]] [ 19 19 - (* Hero Section *) 20 20 - h1 ~styles:[ 21 21 - text_color (blue 600); 22 22 - font_size `Xl4; 23 23 - font_weight `Bold; 24 24 - text_center; 25 25 - margin_bottom (rem 2.0); 26 26 - ] [txt "🚀 GADT Heterogeneous Lists for Tailwind"]; 27 27 - 28 28 - p ~styles:[ 29 29 - text_color (gray 700); 30 30 - font_size `Lg; 31 31 - text_center; 32 32 - margin_bottom (rem 3.0); 33 33 - ] [txt "Type-safe, conflict-preventing, succinct Tailwind class composition"]; 34 34 - 35 35 - (* Feature Cards Grid *) 36 36 - div ~styles:[ 37 37 - flex; 38 38 - justify_center; 39 39 - margin_bottom (rem 3.0); 40 40 - ] [ 41 41 - div ~styles:[ 42 42 - bg_color (gray 50); 43 43 - rounded `Lg; 44 44 - shadow `Lg; 45 45 - padding (rem 2.0); 46 46 - text_center; 47 47 - ] [ 48 48 - h2 ~styles:[ 49 49 - font_size `Xl2; 50 50 - font_weight `Semibold; 51 51 - text_color (gray 800); 52 52 - margin_bottom (rem 1.0); 53 53 - ] [txt "✨ Magic of GADTs"]; 54 54 - 55 55 - p ~styles:[ 56 56 - text_color (gray 600); 57 57 - margin_bottom (rem 1.5); 58 58 - ] [txt "Each property is type-categorized and validated at compile time"]; 59 59 - ]; 60 60 - ]; 61 61 - 62 62 - (* Before/After Comparison *) 63 63 - div ~styles:[ 64 64 - bg_color (Tailwind.Color.white); 65 65 - rounded `Lg; 66 66 - shadow `Md; 67 67 - padding (rem 2.0); 68 68 - margin_bottom (rem 3.0); 69 69 - ] [ 70 70 - h2 ~styles:[ 71 71 - font_size `Xl2; 72 72 - font_weight `Bold; 73 73 - text_color (gray 800); 74 74 - margin_bottom (rem 1.5); 75 75 - ] [txt "🔄 Before vs After"]; 76 76 - 77 77 - div ~styles:[ 78 78 - flex; 79 79 - justify_between; 80 80 - ] [ 81 81 - (* Old Way *) 82 82 - div ~styles:[ 83 83 - bg_color (red 50); 84 84 - rounded `Md; 85 85 - padding (rem 1.5); 86 86 - margin_right (rem 1.0); 87 87 - ] [ 88 88 - h3 ~styles:[ 89 89 - font_size `Lg; 90 90 - font_weight `Medium; 91 91 - text_color (red 700); 92 92 - margin_bottom (rem 1.0); 93 93 - ] [txt "❌ Old Verbose Way"]; 94 94 - 95 95 - El.pre ~at:[classes_attr [ 96 96 - bg_color (gray 100); 97 97 - padding (rem 1.0); 98 98 - rounded `Sm; 99 99 - font_size `Sm; 100 100 - ]] [ 101 101 - El.code [txt {|Css.tw [ 102 102 - Color.text (Color.make `Blue ~variant:`V600 ()); 103 103 - Typography.(to_class (font_size `Xl2)); 104 104 - Typography.(to_class (font_weight `Bold)); 105 105 - Spacing.(to_class (mb (Size.rem 1.0))); 106 106 - ]|}]; 107 107 - ]; 108 108 - ]; 109 109 - 110 110 - (* New Way *) 111 111 - div ~styles:[ 112 112 - bg_color (green 50); 113 113 - rounded `Md; 114 114 - padding (rem 1.5); 115 115 - ] [ 116 116 - h3 ~styles:[ 117 117 - font_size `Lg; 118 118 - font_weight `Medium; 119 119 - text_color (green 700); 120 120 - margin_bottom (rem 1.0); 121 121 - ] [txt "✅ New GADT Way"]; 122 122 - 123 123 - El.pre ~at:[classes_attr [ 124 124 - bg_color (gray 100); 125 125 - padding (rem 1.0); 126 126 - rounded `Sm; 127 127 - font_size `Sm; 128 128 - ]] [ 129 129 - El.code [txt {|[ 130 130 - text_color (blue 600); 131 131 - font_size `Xl2; 132 132 - font_weight `Bold; 133 133 - margin_bottom (rem 1.0); 134 134 - ]|}]; 135 135 - ]; 136 136 - ]; 137 137 - ]; 138 138 - ]; 139 139 - 140 140 - (* Interactive Example *) 141 141 - div ~styles:[ 142 142 - bg_color (Tailwind.Color.white); 143 143 - rounded `Lg; 144 144 - shadow `Md; 145 145 - padding (rem 2.0); 146 146 - margin_bottom (rem 2.0); 147 147 - ] [ 148 148 - h2 ~styles:[ 149 149 - font_size `Xl2; 150 150 - font_weight `Bold; 151 151 - text_color (gray 800); 152 152 - margin_bottom (rem 1.5); 153 153 - ] [txt "🎯 Type Safety in Action"]; 154 154 - 155 155 - p ~styles:[ 156 156 - text_color (gray 600); 157 157 - margin_bottom (rem 2.0); 158 158 - ] [txt "Each property category can only appear once, preventing conflicts:"]; 159 159 - 160 160 - (* Sample buttons with different styles *) 161 161 - div ~styles:[ 162 162 - flex; 163 163 - justify_between; 164 164 - margin_bottom (rem 2.0); 165 165 - ] [ 166 166 - button ~styles:[ 167 167 - bg_color (blue 600); 168 168 - text_color (Tailwind.Color.white); 169 169 - padding (rem 1.0); 170 170 - rounded `Md; 171 171 - font_weight `Medium; 172 172 - ] [txt "Primary Button"]; 173 173 - 174 174 - button ~styles:[ 175 175 - bg_color (green 600); 176 176 - text_color (Tailwind.Color.white); 177 177 - padding (rem 1.0); 178 178 - rounded `Md; 179 179 - font_weight `Medium; 180 180 - ] [txt "Success Button"]; 181 181 - 182 182 - button ~styles:[ 183 183 - bg_color (red 600); 184 184 - text_color (Tailwind.Color.white); 185 185 - padding (rem 1.0); 186 186 - rounded `Md; 187 187 - font_weight `Medium; 188 188 - ] [txt "Danger Button"]; 189 189 - ]; 190 190 - 191 191 - p ~styles:[ 192 192 - text_color (gray 500); 193 193 - font_size `Sm; 194 194 - ] [txt "Try adding two text_color entries - the compiler will prevent conflicts!"]; 195 195 - ]; 196 196 - 197 197 - (* Footer *) 198 198 - div ~styles:[ 199 199 - text_center; 200 200 - padding_y (rem 2.0); 201 201 - ] [ 202 202 - p ~styles:[ 203 203 - text_color (gray 500); 204 204 - font_size `Sm; 205 205 - ] [txt "🤖 Generated with revolutionary GADT-based Tailwind combinators"]; 206 206 - ]; 207 207 - ]; 208 208 - ] in 209 209 - html 210 210 - 211 211 - let () = 212 212 - let html = create_gadt_demo () in 213 213 - print_string (El.to_string ~doctype:true html)

+145 -156

examples/index_html_generator.ml

··· 1 1 (* Generate index.html page linking to all examples *) 2 2 3 3 open Htmlit 4 4 - open Tailwind 5 5 - 6 6 - let classes_attr tailwind_classes = 7 7 - At.class' (Tailwind.to_string tailwind_classes) 4 4 + open Tailwind_html 8 5 9 6 let examples = [ 10 7 ("hello_tailwind_01.html", "01. Hello Tailwind", 11 11 - "Your first Tailwind OCaml program. Learn the basics of creating and using type-safe Tailwind classes.", 12 12 - ["Basic concepts"; "Type safety"; "Class composition"]); 13 13 - 8 8 + "Your first Tailwind OCaml program with GADT interface", 9 9 + ["Basic concepts"; "Type safety"; "GADT syntax"]); 10 10 + 14 11 ("colors_and_typography_02.html", "02. Colors and Typography", 15 15 - "Explore the comprehensive color system and typography utilities with compile-time validation.", 16 16 - ["Color variants"; "Typography scale"; "Font weights"]); 17 17 - 12 12 + "Type-safe colors and typography with compile-time validation", 13 13 + ["Color variants"; "Typography scale"; "Grid layouts"]); 14 14 + 18 15 ("layout_and_spacing_03.html", "03. Layout and Spacing", 19 19 - "Master the box model, flexbox layouts, and spacing utilities for building structured interfaces.", 20 20 - ["Box model"; "Flexbox"; "Spacing system"]); 21 21 - 16 16 + "Master CSS Grid, flexbox layouts and spacing with GADT", 17 17 + ["CSS Grid"; "Flexbox"; "Gap utilities"; "Spacing system"]); 18 18 + 22 19 ("responsive_design_04.html", "04. Responsive Design", 23 23 - "Learn responsive design patterns with breakpoints and mobile-first utilities.", 24 24 - ["Breakpoints"; "Mobile-first"; "Responsive utilities"]); 25 25 - 20 20 + "Adaptive layouts using GADT interface", 21 21 + ["Mobile-first"; "CSS Grid"; "Responsive cards"]); 22 22 + 26 23 ("effects_and_variants_05.html", "05. Effects and Variants", 27 27 - "Add visual effects and interactive states with shadows, borders, and hover variants.", 28 28 - ["Visual effects"; "Interactive states"; "Hover variants"]); 29 29 - 24 24 + "Visual effects with shadows, borders, and rounded corners", 25 25 + ["Shadow effects"; "Grid layouts"; "Interactive buttons"]); 26 26 + 30 27 ("patterns_and_components_06.html", "06. Patterns and Components", 31 31 - "Build reusable layout patterns and component compositions for consistent design.", 32 32 - ["Layout patterns"; "Component composition"; "Reusable utilities"]); 33 33 - 28 28 + "Reusable component patterns with GADT", 29 29 + ["Card patterns"; "Button components"; "Form patterns"]); 30 30 + 34 31 ("comprehensive_showcase_07.html", "07. Comprehensive Showcase", 35 35 - "Complete application demo showcasing all library features in a real-world context.", 36 36 - ["Complete application"; "All features"; "Best practices"]); 32 32 + "Full application demo with complete UI", 33 33 + ["Header/Footer"; "Hero section"; "Feature grids"]); 34 34 + 35 35 + ("button_demo.html", "Button Demo", 36 36 + "Showcase of all button variants and sizes", 37 37 + ["Primary buttons"; "Secondary buttons"; "Outline buttons"]); 37 38 ] 38 39 39 39 - let create_index_page () = 40 40 - let page_classes = Css.tw [ 41 41 - Layout.(to_class (min_height Size.screen)); 42 42 - Color.bg (Color.make `Gray ~variant:`V50 ()); 43 43 - ] in 44 44 - 45 45 - let container_classes = Css.tw [ 46 46 - Spacing.(to_class (mx `Auto)); 47 47 - Spacing.(to_class (p (Size.rem 2.0))); 48 48 - ] in 49 49 - 50 50 - let header_classes = Css.tw [ 51 51 - Typography.(to_class (font_size `Xl4)); 52 52 - Typography.(to_class (font_weight `Bold)); 53 53 - Color.text (Color.make `Gray ~variant:`V900 ()); 54 54 - Spacing.(to_class (mb (Size.rem 2.0))); 55 55 - Typography.(to_class (text_align `Center)); 56 56 - ] in 57 57 - 58 58 - let subtitle_classes = Css.tw [ 59 59 - Typography.(to_class (font_size `Xl)); 60 60 - Color.text (Color.make `Gray ~variant:`V600 ()); 61 61 - Typography.(to_class (text_align `Center)); 62 62 - Spacing.(to_class (mb (Size.rem 3.0))); 63 63 - ] in 64 64 - 65 65 - let grid_classes = Css.tw [ 66 66 - Display.grid; 67 67 - Grid.(to_class (template_cols (`Cols 1))); 68 68 - Responsive.(to_class (at_breakpoint `Md (Grid.(to_class (template_cols (`Cols 2)))))); 69 69 - Spacing.(to_class (gap `All (Size.rem 1.5))); 70 70 - Spacing.(to_class (mb (Size.rem 3.0))); 71 71 - ] in 72 72 - 73 73 - let card_classes = Css.tw [ 74 74 - Color.bg Color.white; 75 75 - Effects.rounded_lg; 76 76 - Effects.shadow_sm; 77 77 - Spacing.(to_class (p (Size.rem 1.5))); 78 78 - Effects.border; 79 79 - Color.border (Color.make `Gray ~variant:`V200 ()); 80 80 - Effects.transition `All; 81 81 - Variants.hover Effects.shadow_md; 82 82 - Variants.hover (Color.border (Color.make `Blue ~variant:`V300 ())); 83 83 - ] in 84 84 - 85 85 - let card_title_classes = Css.tw [ 86 86 - Typography.(to_class (font_size `Lg)); 87 87 - Typography.(to_class (font_weight `Semibold)); 88 88 - Color.text (Color.make `Gray ~variant:`V900 ()); 89 89 - Spacing.(to_class (mb (Size.rem 0.75))); 90 90 - ] in 91 91 - 92 92 - let card_description_classes = Css.tw [ 93 93 - Color.text (Color.make `Gray ~variant:`V600 ()); 94 94 - Spacing.(to_class (mb (Size.rem 1.0))); 95 95 - Typography.(to_class (line_height `Relaxed)); 96 96 - ] in 97 97 - 98 98 - let features_classes = Css.tw [ 99 99 - Display.flex; 100 100 - Flexbox.(to_class (wrap `Wrap)); 101 101 - Spacing.(to_class (gap `All (Size.rem 0.5))); 102 102 - Spacing.(to_class (mb (Size.rem 1.0))); 103 103 - ] in 104 104 - 105 105 - let feature_tag_classes = Css.tw [ 106 106 - Color.bg (Color.make `Blue ~variant:`V50 ()); 107 107 - Color.text (Color.make `Blue ~variant:`V700 ()); 108 108 - Typography.(to_class (font_size `Xs)); 109 109 - Spacing.(to_class (px (Size.rem 0.5))); 110 110 - Spacing.(to_class (py (Size.rem 0.25))); 111 111 - Effects.rounded_full; 112 112 - ] in 113 113 - 114 114 - let link_classes = Css.tw [ 115 115 - Color.text (Color.make `Blue ~variant:`V600 ()); 116 116 - Typography.(to_class (font_weight `Medium)); 117 117 - Variants.hover (Color.text (Color.make `Blue ~variant:`V800 ())); 118 118 - Effects.transition `Colors; 119 119 - ] in 120 120 - 121 121 - let footer_classes = Css.tw [ 122 122 - Typography.(to_class (text_align `Center)); 123 123 - Spacing.(to_class (mt (Size.rem 3.0))); 124 124 - Color.text (Color.make `Gray ~variant:`V500 ()); 125 125 - Typography.(to_class (font_size `Sm)); 126 126 - ] in 127 127 - 128 128 - let html_doc = El.html [ 40 40 + let create_index () = 41 41 + let html = El.html [ 129 42 El.head [ 130 43 El.meta ~at:[At.charset "utf-8"] (); 131 44 El.meta ~at:[At.name "viewport"; At.content "width=device-width, initial-scale=1"] (); 132 132 - El.title [El.txt "Tailwind OCaml Examples"]; 133 133 - El.link ~at:[At.rel "stylesheet"; At.href "hello_tailwind_01.css"] (); (* Reuse CSS from first example *) 134 134 - El.style [El.txt {| 135 135 - body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } 136 136 - a { text-decoration: none; } 137 137 - .example-card { display: block; } 45 45 + El.title [txt "Tailwind OCaml Examples - GADT Interface"]; 46 46 + El.style [txt {| 47 47 + body { font-family: system-ui, -apple-system, sans-serif; } 48 48 + .example-card { transition: transform 0.2s, box-shadow 0.2s; } 49 49 + .example-card:hover { transform: translateY(-2px); } 138 50 |}]; 139 51 ]; 140 140 - El.body ~at:[classes_attr page_classes] [ 141 141 - El.div ~at:[classes_attr container_classes] [ 142 142 - El.h1 ~at:[classes_attr header_classes] [ 143 143 - El.txt "Tailwind OCaml Examples" 52 52 + El.body ~at:[classes_attr [ 53 53 + min_height screen; 54 54 + bg_color (gray 50); 55 55 + padding (rem 2.0); 56 56 + ]] [ 57 57 + container [ 58 58 + (* Header *) 59 59 + header ~styles:[ 60 60 + text_center; 61 61 + margin_bottom (rem 3.0); 62 62 + ] [ 63 63 + h1 ~styles:[ 64 64 + font_size `Xl3; 65 65 + font_weight `Bold; 66 66 + text_color (gray 800); 67 67 + margin_bottom (rem 1.0); 68 68 + ] [txt "🎨 Tailwind OCaml Examples"]; 69 69 + 70 70 + p ~styles:[ 71 71 + font_size `Xl; 72 72 + text_color (gray 600); 73 73 + margin_bottom (rem 1.0); 74 74 + ] [txt "Type-safe CSS generation with GADT-based interface"]; 75 75 + 76 76 + p ~styles:[ 77 77 + font_size `Base; 78 78 + text_color (gray 500); 79 79 + ] [txt "Explore examples showcasing the power of compile-time guaranteed styling"]; 144 80 ]; 145 81 146 146 - El.p ~at:[classes_attr subtitle_classes] [ 147 147 - El.txt "A progressive tutorial series demonstrating type-safe Tailwind CSS generation in OCaml" 148 148 - ]; 149 149 - 150 150 - El.div ~at:[classes_attr grid_classes] ( 151 151 - List.map (fun (href, title, description, features) -> 152 152 - El.a ~at:[At.href href; At.class' "example-card"] [ 153 153 - El.div ~at:[classes_attr card_classes] [ 154 154 - El.h2 ~at:[classes_attr card_title_classes] [El.txt title]; 155 155 - El.p ~at:[classes_attr card_description_classes] [El.txt description]; 156 156 - El.div ~at:[classes_attr features_classes] ( 157 157 - List.map (fun feature -> 158 158 - El.span ~at:[classes_attr feature_tag_classes] [El.txt feature] 159 159 - ) features 160 160 - ); 161 161 - El.div ~at:[classes_attr link_classes] [ 162 162 - El.txt "View Example →" 163 163 - ]; 82 82 + (* Examples Grid *) 83 83 + div ~styles:[ 84 84 + grid; 85 85 + grid_cols 1; 86 86 + gap (rem 1.5); 87 87 + ] (List.map (fun (file, title, desc, features) -> 88 88 + El.a ~at:[At.href file; At.style "text-decoration: none; color: inherit;"] [ 89 89 + div ~styles:[ 90 90 + bg_color (Tailwind.Color.white); 91 91 + rounded `Lg; 92 92 + shadow `Md; 93 93 + padding (rem 2.0); 94 94 + margin_bottom (rem 1.5); 95 95 + border; 96 96 + border_color (gray 200); 97 97 + transition; 98 98 + ] [ 99 99 + (* Title and description *) 100 100 + div ~styles:[margin_bottom (rem 1.0)] [ 101 101 + h2 ~styles:[ 102 102 + font_size `Xl; 103 103 + font_weight `Semibold; 104 104 + text_color (gray 800); 105 105 + margin_bottom (rem 0.5); 106 106 + ] [txt title]; 107 107 + 108 108 + p ~styles:[ 109 109 + text_color (gray 600); 110 110 + margin_bottom (rem 1.0); 111 111 + ] [txt desc]; 164 112 ]; 165 165 - ] 166 166 - ) examples 167 167 - ); 113 113 + 114 114 + (* Feature tags *) 115 115 + div ~styles:[ 116 116 + grid; 117 117 + grid_cols 3; 118 118 + gap_x (rem 0.5); 119 119 + gap_y (rem 0.5); 120 120 + ] (List.map (fun feature -> 121 121 + span ~styles:[ 122 122 + bg_color (blue 100); 123 123 + text_color (blue 700); 124 124 + padding_x (rem 0.75); 125 125 + padding_y (rem 0.25); 126 126 + rounded `Full; 127 127 + font_size `Sm; 128 128 + font_weight `Medium; 129 129 + margin_right (rem 0.5); 130 130 + margin_bottom (rem 0.5); 131 131 + ] [txt feature] 132 132 + ) features); 133 133 + 134 134 + (* View link *) 135 135 + div ~styles:[ 136 136 + margin_top (rem 1.0); 137 137 + text_right; 138 138 + ] [ 139 139 + span ~styles:[ 140 140 + text_color (blue 600); 141 141 + font_weight `Medium; 142 142 + ] [txt "View Example →"]; 143 143 + ]; 144 144 + ]; 145 145 + ] 146 146 + ) examples); 168 147 169 169 - El.div ~at:[classes_attr footer_classes] [ 170 170 - El.p [ 171 171 - El.txt "Built with "; 172 172 - El.a ~at:[At.href "https://github.com/dbuenzli/htmlit"; classes_attr link_classes] [El.txt "Htmlit"]; 173 173 - El.txt " and type-safe Tailwind CSS generation" 174 174 - ]; 148 148 + (* Footer *) 149 149 + footer ~styles:[ 150 150 + text_center; 151 151 + margin_top (rem 3.0); 152 152 + padding_y (rem 2.0); 153 153 + border; 154 154 + border_color (gray 200); 155 155 + ] [ 156 156 + p ~styles:[ 157 157 + text_color (gray 500); 158 158 + font_size `Sm; 159 159 + margin_bottom (rem 0.5); 160 160 + ] [txt "Built with OCaml, Tailwind CSS, and GADT-based type safety"]; 161 161 + 162 162 + p ~styles:[ 163 163 + text_color (gray 400); 164 164 + font_size `Xs; 165 165 + ] [txt "© 2024 Tailwind OCaml - Compile-time guaranteed styling"]; 175 166 ]; 176 167 ]; 177 168 ]; 178 169 ] in 179 179 - html_doc 170 170 + html 180 171 181 172 let () = 182 182 - (* Output HTML to stdout *) 183 183 - let html_doc = create_index_page () in 184 184 - let html_string = El.to_string ~doctype:true html_doc in 185 185 - print_string html_string 173 173 + let html = create_index () in 174 174 + print_string (El.to_string ~doctype:true html)

+259 -211

examples/layout_and_spacing_03.ml

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

+165 -135

examples/patterns_and_components_06.ml

··· 1 1 - (* Example 06: Patterns and Components - Reusable Layout Patterns *) 1 1 + (* Example 06: Patterns and Components - Reusable components with GADT *) 2 2 3 3 open Htmlit 4 4 - open Tailwind 5 5 - 6 6 - let classes_attr tailwind_classes = 7 7 - At.class' (Tailwind.to_string tailwind_classes) 4 4 + open Tailwind_html 8 5 9 6 let create_patterns_demo () = 10 10 - (* Create comprehensive patterns demonstration *) 11 11 - let html_doc = El.html [ 7 7 + let html = El.html [ 12 8 El.head [ 13 9 El.meta ~at:[At.charset "utf-8"] (); 14 10 El.meta ~at:[At.name "viewport"; At.content "width=device-width, initial-scale=1"] (); 15 15 - El.title [El.txt "Patterns and Components"]; 11 11 + El.title [txt "Patterns and Components"]; 16 12 El.link ~at:[At.rel "stylesheet"; At.href "patterns_and_components_06.css"] (); 17 13 ]; 18 18 - El.body ~at:[At.class' "min-h-screen bg-gray-50 p-8"] [ 19 19 - El.div ~at:[At.class' "max-w-6xl mx-auto"] [ 20 20 - El.h1 ~at:[classes_attr (Css.tw [ 21 21 - Typography.(to_class (font_size `Xl2)); 22 22 - Typography.(to_class (font_weight `Bold)); 23 23 - Color.text (Color.make `Gray ~variant:`V800 ()); 24 24 - ]); At.class' "mb-8 text-center"] [El.txt "Patterns and Components Demo"]; 14 14 + El.body ~at:[classes_attr [ 15 15 + min_height screen; 16 16 + bg_color (gray 50); 17 17 + padding (rem 2.0); 18 18 + ]] [ 19 19 + container [ 20 20 + h1 ~styles:[ 21 21 + font_size `Xl2; 22 22 + font_weight `Bold; 23 23 + text_color (gray 800); 24 24 + text_center; 25 25 + margin_bottom (rem 2.0); 26 26 + ] [txt "Patterns and Components Demo"]; 25 27 26 28 (* Container Pattern *) 27 27 - El.section ~at:[At.class' "mb-12"] [ 28 28 - El.h2 ~at:[classes_attr (Css.tw [ 29 29 - Typography.(to_class (font_size `Xl)); 30 30 - Typography.(to_class (font_weight `Semibold)); 31 31 - Color.text (Color.make `Gray ~variant:`V700 ()); 32 32 - ]); At.class' "mb-6"] [El.txt "Container Pattern"]; 29 29 + section ~styles:[margin_bottom (rem 3.0)] [ 30 30 + h2 ~styles:[ 31 31 + font_size `Xl; 32 32 + font_weight `Semibold; 33 33 + text_color (gray 700); 34 34 + margin_bottom (rem 1.5); 35 35 + ] [txt "Container Pattern"]; 33 36 34 34 - El.div ~at:[classes_attr (Css.tw [Patterns.container ()]); At.class' "bg-white rounded-lg shadow-sm p-6"] [ 35 35 - El.p ~at:[classes_attr (Css.tw [ 36 36 - Color.text (Color.make `Gray ~variant:`V600 ()); 37 37 - ])] [El.txt "This content is inside a container pattern that centers content and provides responsive padding."]; 37 37 + card [ 38 38 + p ~styles:[text_color (gray 600)] [ 39 39 + txt "This content is inside a container pattern that centers content and provides responsive padding." 40 40 + ]; 38 41 ]; 39 42 ]; 40 43 41 44 (* Card Pattern *) 42 42 - El.section ~at:[At.class' "mb-12"] [ 43 43 - El.h2 ~at:[classes_attr (Css.tw [ 44 44 - Typography.(to_class (font_size `Xl)); 45 45 - Typography.(to_class (font_weight `Semibold)); 46 46 - Color.text (Color.make `Gray ~variant:`V700 ()); 47 47 - ]); At.class' "mb-6"] [El.txt "Card Pattern"]; 45 45 + section ~styles:[margin_bottom (rem 3.0)] [ 46 46 + h2 ~styles:[ 47 47 + font_size `Xl; 48 48 + font_weight `Semibold; 49 49 + text_color (gray 700); 50 50 + margin_bottom (rem 1.5); 51 51 + ] [txt "Card Patterns"]; 48 52 49 49 - El.div ~at:[At.class' "grid grid-cols-1 md:grid-cols-3 gap-6"] [ 50 50 - El.div ~at:[classes_attr (Css.tw [Patterns.card]); At.class' "p-6"] [ 51 51 - El.h3 ~at:[classes_attr (Css.tw [ 52 52 - Typography.(to_class (font_size `Lg)); 53 53 - Typography.(to_class (font_weight `Semibold)); 54 54 - Color.text (Color.make `Gray ~variant:`V800 ()); 55 55 - ]); At.class' "mb-2"] [El.txt "Card One"]; 56 56 - El.p ~at:[classes_attr (Css.tw [ 57 57 - Color.text (Color.make `Gray ~variant:`V600 ()); 58 58 - ])] [El.txt "This is a card using the built-in card pattern."]; 53 53 + div ~styles:[flex; flex_col] [ 54 54 + card [ 55 55 + h3 ~styles:[ 56 56 + font_size `Lg; 57 57 + font_weight `Semibold; 58 58 + text_color (gray 800); 59 59 + margin_bottom (rem 1.0); 60 60 + ] [txt "Basic Card"]; 61 61 + p ~styles:[text_color (gray 600)] [ 62 62 + txt "A simple card with padding and shadow." 63 63 + ]; 59 64 ]; 60 65 61 61 - El.div ~at:[classes_attr (Css.tw [Patterns.card]); At.class' "p-6"] [ 62 62 - El.h3 ~at:[classes_attr (Css.tw [ 63 63 - Typography.(to_class (font_size `Lg)); 64 64 - Typography.(to_class (font_weight `Semibold)); 65 65 - Color.text (Color.make `Gray ~variant:`V800 ()); 66 66 - ]); At.class' "mb-2"] [El.txt "Card Two"]; 67 67 - El.p ~at:[classes_attr (Css.tw [ 68 68 - Color.text (Color.make `Gray ~variant:`V600 ()); 69 69 - ])] [El.txt "Another card with the same styling pattern applied."]; 70 70 - ]; 71 71 - 72 72 - El.div ~at:[classes_attr (Css.tw [Patterns.card]); At.class' "p-6"] [ 73 73 - El.h3 ~at:[classes_attr (Css.tw [ 74 74 - Typography.(to_class (font_size `Lg)); 75 75 - Typography.(to_class (font_weight `Semibold)); 76 76 - Color.text (Color.make `Gray ~variant:`V800 ()); 77 77 - ]); At.class' "mb-2"] [El.txt "Card Three"]; 78 78 - El.p ~at:[classes_attr (Css.tw [ 79 79 - Color.text (Color.make `Gray ~variant:`V600 ()); 80 80 - ])] [El.txt "A third card demonstrating consistent styling."]; 66 66 + card ~elevated:true [ 67 67 + h3 ~styles:[ 68 68 + font_size `Lg; 69 69 + font_weight `Semibold; 70 70 + text_color (gray 800); 71 71 + margin_bottom (rem 1.0); 72 72 + ] [txt "Elevated Card"]; 73 73 + p ~styles:[text_color (gray 600)] [ 74 74 + txt "This card has a stronger shadow for emphasis." 75 75 + ]; 81 76 ]; 82 77 ]; 83 78 ]; 84 79 85 85 - (* Flex Center Pattern *) 86 86 - El.section ~at:[At.class' "mb-12"] [ 87 87 - El.h2 ~at:[classes_attr (Css.tw [ 88 88 - Typography.(to_class (font_size `Xl)); 89 89 - Typography.(to_class (font_weight `Semibold)); 90 90 - Color.text (Color.make `Gray ~variant:`V700 ()); 91 91 - ]); At.class' "mb-6"] [El.txt "Flex Center Pattern"]; 80 80 + (* Button Components *) 81 81 + section ~styles:[margin_bottom (rem 3.0)] [ 82 82 + h2 ~styles:[ 83 83 + font_size `Xl; 84 84 + font_weight `Semibold; 85 85 + text_color (gray 700); 86 86 + margin_bottom (rem 1.5); 87 87 + ] [txt "Button Components"]; 92 88 93 93 - El.div ~at:[classes_attr (Css.tw [Patterns.flex_center]); At.class' "bg-blue-50 rounded-lg h-32"] [ 94 94 - El.p ~at:[classes_attr (Css.tw [ 95 95 - Color.text (Color.make `Blue ~variant:`V600 ()); 96 96 - Typography.(to_class (font_weight `Medium)); 97 97 - ])] [El.txt "This content is perfectly centered using flex_center pattern"]; 89 89 + card [ 90 90 + h3 ~styles:[ 91 91 + font_size `Lg; 92 92 + font_weight `Semibold; 93 93 + text_color (gray 800); 94 94 + margin_bottom (rem 1.5); 95 95 + ] [txt "Button Variants"]; 96 96 + 97 97 + div ~styles:[flex; flex_col] [ 98 98 + div ~styles:[margin_bottom (rem 1.0)] [ 99 99 + btn_primary ~size:`Sm [txt "Small Primary"]; 100 100 + btn_primary [txt "Default Primary"]; 101 101 + btn_primary ~size:`Lg [txt "Large Primary"]; 102 102 + ]; 103 103 + 104 104 + div ~styles:[margin_bottom (rem 1.0)] [ 105 105 + btn_secondary ~size:`Sm [txt "Small Secondary"]; 106 106 + btn_secondary [txt "Default Secondary"]; 107 107 + btn_secondary ~size:`Lg [txt "Large Secondary"]; 108 108 + ]; 109 109 + 110 110 + div [ 111 111 + btn_outline ~size:`Sm [txt "Small Outline"]; 112 112 + btn_outline [txt "Default Outline"]; 113 113 + btn_outline ~size:`Lg [txt "Large Outline"]; 114 114 + ]; 115 115 + ]; 98 116 ]; 99 117 ]; 100 118 101 101 - (* Stack Pattern *) 102 102 - El.section ~at:[At.class' "mb-12"] [ 103 103 - El.h2 ~at:[classes_attr (Css.tw [ 104 104 - Typography.(to_class (font_size `Xl)); 105 105 - Typography.(to_class (font_weight `Semibold)); 106 106 - Color.text (Color.make `Gray ~variant:`V700 ()); 107 107 - ]); At.class' "mb-6"] [El.txt "Stack Pattern"]; 119 119 + (* List Pattern *) 120 120 + section ~styles:[margin_bottom (rem 3.0)] [ 121 121 + h2 ~styles:[ 122 122 + font_size `Xl; 123 123 + font_weight `Semibold; 124 124 + text_color (gray 700); 125 125 + margin_bottom (rem 1.5); 126 126 + ] [txt "List Patterns"]; 108 127 109 109 - El.div ~at:[classes_attr (Css.tw [Patterns.stack ~gap:(Size.rem 1.0) ()]); At.class' "bg-white rounded-lg shadow-sm p-6"] [ 110 110 - El.div ~at:[classes_attr (Css.tw [ 111 111 - Color.bg (Color.make `Green ~variant:`V50 ()); 112 112 - Spacing.(to_class (p (Size.rem 1.0))); 113 113 - Effects.rounded_md; 114 114 - ])] [El.txt "Stack Item 1"]; 128 128 + card [ 129 129 + h3 ~styles:[ 130 130 + font_size `Lg; 131 131 + font_weight `Semibold; 132 132 + text_color (gray 800); 133 133 + margin_bottom (rem 1.0); 134 134 + ] [txt "Feature List"]; 115 135 116 116 - El.div ~at:[classes_attr (Css.tw [ 117 117 - Color.bg (Color.make `Blue ~variant:`V50 ()); 118 118 - Spacing.(to_class (p (Size.rem 1.0))); 119 119 - Effects.rounded_md; 120 120 - ])] [El.txt "Stack Item 2"]; 121 121 - 122 122 - El.div ~at:[classes_attr (Css.tw [ 123 123 - Color.bg (Color.make `Purple ~variant:`V50 ()); 124 124 - Spacing.(to_class (p (Size.rem 1.0))); 125 125 - Effects.rounded_md; 126 126 - ])] [El.txt "Stack Item 3"]; 136 136 + ul ~styles:[text_color (gray 600)] [ 137 137 + li ~styles:[margin_bottom (rem 0.5)] [txt "✓ Type-safe styling"]; 138 138 + li ~styles:[margin_bottom (rem 0.5)] [txt "✓ Conflict prevention"]; 139 139 + li ~styles:[margin_bottom (rem 0.5)] [txt "✓ Succinct syntax"]; 140 140 + li [txt "✓ Reusable components"]; 141 141 + ]; 127 142 ]; 128 143 ]; 129 144 130 130 - (* Inline Stack Pattern *) 131 131 - El.section [ 132 132 - El.h2 ~at:[classes_attr (Css.tw [ 133 133 - Typography.(to_class (font_size `Xl)); 134 134 - Typography.(to_class (font_weight `Semibold)); 135 135 - Color.text (Color.make `Gray ~variant:`V700 ()); 136 136 - ]); At.class' "mb-6"] [El.txt "Inline Stack Pattern"]; 145 145 + (* Form Pattern *) 146 146 + section [ 147 147 + h2 ~styles:[ 148 148 + font_size `Xl; 149 149 + font_weight `Semibold; 150 150 + text_color (gray 700); 151 151 + margin_bottom (rem 1.5); 152 152 + ] [txt "Form Patterns"]; 137 153 138 138 - El.div ~at:[classes_attr (Css.tw [Patterns.inline_stack ~gap:(Size.rem 1.0) ()]); At.class' "bg-white rounded-lg shadow-sm p-6"] [ 139 139 - El.span ~at:[classes_attr (Css.tw [ 140 140 - Color.bg (Color.make `Red ~variant:`V50 ()); 141 141 - Color.text (Color.make `Red ~variant:`V600 ()); 142 142 - Spacing.(to_class (px (Size.rem 0.75))); 143 143 - Spacing.(to_class (py (Size.rem 0.5))); 144 144 - Effects.rounded_full; 145 145 - Typography.(to_class (font_size `Sm)); 146 146 - ])] [El.txt "Tag 1"]; 154 154 + card [ 155 155 + h3 ~styles:[ 156 156 + font_size `Lg; 157 157 + font_weight `Semibold; 158 158 + text_color (gray 800); 159 159 + margin_bottom (rem 1.5); 160 160 + ] [txt "Simple Form"]; 147 161 148 148 - El.span ~at:[classes_attr (Css.tw [ 149 149 - Color.bg (Color.make `Yellow ~variant:`V50 ()); 150 150 - Color.text (Color.make `Yellow ~variant:`V600 ()); 151 151 - Spacing.(to_class (px (Size.rem 0.75))); 152 152 - Spacing.(to_class (py (Size.rem 0.5))); 153 153 - Effects.rounded_full; 154 154 - Typography.(to_class (font_size `Sm)); 155 155 - ])] [El.txt "Tag 2"]; 156 156 - 157 157 - El.span ~at:[classes_attr (Css.tw [ 158 158 - Color.bg (Color.make `Indigo ~variant:`V50 ()); 159 159 - Color.text (Color.make `Indigo ~variant:`V600 ()); 160 160 - Spacing.(to_class (px (Size.rem 0.75))); 161 161 - Spacing.(to_class (py (Size.rem 0.5))); 162 162 - Effects.rounded_full; 163 163 - Typography.(to_class (font_size `Sm)); 164 164 - ])] [El.txt "Tag 3"]; 162 162 + div ~styles:[flex; flex_col] [ 163 163 + div ~styles:[margin_bottom (rem 1.5)] [ 164 164 + El.label ~at:[At.for' "name"; classes_attr [ 165 165 + block; 166 166 + font_weight `Medium; 167 167 + text_color (gray 700); 168 168 + margin_bottom (rem 0.5); 169 169 + ]] [txt "Name"]; 170 170 + El.input ~at:[At.type' "text"; At.id "name"; classes_attr [ 171 171 + width full; 172 172 + padding (rem 0.5); 173 173 + border; 174 174 + border_color (gray 300); 175 175 + rounded `Md; 176 176 + ]] (); 177 177 + ]; 178 178 + 179 179 + div ~styles:[margin_bottom (rem 1.5)] [ 180 180 + El.label ~at:[At.for' "email"; classes_attr [ 181 181 + block; 182 182 + font_weight `Medium; 183 183 + text_color (gray 700); 184 184 + margin_bottom (rem 0.5); 185 185 + ]] [txt "Email"]; 186 186 + El.input ~at:[At.type' "email"; At.id "email"; classes_attr [ 187 187 + width full; 188 188 + padding (rem 0.5); 189 189 + border; 190 190 + border_color (gray 300); 191 191 + rounded `Md; 192 192 + ]] (); 193 193 + ]; 194 194 + 195 195 + btn_primary [txt "Submit"]; 196 196 + ]; 165 197 ]; 166 198 ]; 167 199 ]; 168 200 ]; 169 201 ] in 170 170 - html_doc 202 202 + html 171 203 172 204 let () = 173 173 - (* Output HTML to stdout *) 174 174 - let html_doc = create_patterns_demo () in 175 175 - let html_string = El.to_string ~doctype:true html_doc in 176 176 - print_string html_string 205 205 + let html = create_patterns_demo () in 206 206 + print_string (El.to_string ~doctype:true html)

+144 -148

examples/responsive_design_04.ml

··· 1 1 - (* Example 04: Responsive Design - Building Adaptive Layouts *) 1 1 + (* Example 04: Responsive Design - GADT interface showcase *) 2 2 3 3 open Htmlit 4 4 - open Tailwind 5 5 - 6 6 - let classes_attr tailwind_classes = 7 7 - At.class' (Tailwind.to_string tailwind_classes) 4 4 + open Tailwind_html 8 5 9 6 let create_responsive_demo () = 10 10 - (* Create comprehensive responsive demonstration *) 11 11 - let html_doc = El.html [ 7 7 + let html = El.html [ 12 8 El.head [ 13 9 El.meta ~at:[At.charset "utf-8"] (); 14 10 El.meta ~at:[At.name "viewport"; At.content "width=device-width, initial-scale=1"] (); 15 15 - El.title [El.txt "Responsive Design"]; 11 11 + El.title [txt "Responsive Design"]; 16 12 El.link ~at:[At.rel "stylesheet"; At.href "responsive_design_04.css"] (); 17 13 ]; 18 18 - El.body ~at:[At.class' "min-h-screen bg-gray-50 p-8"] [ 19 19 - El.div ~at:[At.class' "max-w-6xl mx-auto"] [ 20 20 - El.h1 ~at:[classes_attr (Css.tw [ 21 21 - Typography.(to_class (font_size `Xl2)); 22 22 - Responsive.(to_class (at_breakpoint `Md (Typography.(to_class (font_size `Xl3))))); 23 23 - Typography.(to_class (font_weight `Bold)); 24 24 - Color.text (Color.make `Gray ~variant:`V700 ()); 25 25 - ]); At.class' "mb-8 text-center"] [El.txt "Responsive Design Demo"]; 14 14 + El.body ~at:[classes_attr [ 15 15 + min_height screen; 16 16 + bg_color (gray 50); 17 17 + padding (rem 1.0); 18 18 + ]] [ 19 19 + container [ 20 20 + h1 ~styles:[ 21 21 + font_size `Xl2; 22 22 + font_weight `Bold; 23 23 + text_color (gray 800); 24 24 + text_center; 25 25 + margin_bottom (rem 2.0); 26 26 + ] [txt "Responsive Design Demo"]; 26 27 27 27 - El.p ~at:[classes_attr (Css.tw [ 28 28 - Typography.(to_class (font_size `Lg)); 29 29 - Color.text (Color.make `Gray ~variant:`V600 ()); 30 30 - ]); At.class' "text-center mb-8"] [ 31 31 - El.txt "Resize your browser window to see responsive changes. The indicator in the top-right shows the current breakpoint." 32 32 - ]; 33 33 - 34 34 - (* Responsive Grid *) 35 35 - El.section ~at:[At.class' "mb-8"] [ 36 36 - El.h2 ~at:[classes_attr (Css.tw [ 37 37 - Typography.(to_class (font_size `Xl)); 38 38 - Typography.(to_class (font_weight `Semibold)); 39 39 - Color.text (Color.make `Gray ~variant:`V700 ()); 40 40 - ]); At.class' "mb-6"] [El.txt "Responsive Grid"]; 41 41 - 42 42 - El.p ~at:[classes_attr (Css.tw [ 43 43 - Color.text (Color.make `Gray ~variant:`V600 ()); 44 44 - ]); At.class' "mb-4"] [ 45 45 - El.txt "1 column → 2 columns (md) → 3 columns (lg) → 4 columns (xl)" 46 46 - ]; 47 47 - 48 48 - El.div ~at:[classes_attr (Css.tw [ 49 49 - Display.grid; 50 50 - Grid.(to_class (template_cols (`Cols 1))); 51 51 - Responsive.(to_class (at_breakpoint `Md (Grid.(to_class (template_cols (`Cols 2)))))); 52 52 - Responsive.(to_class (at_breakpoint `Lg (Grid.(to_class (template_cols (`Cols 3)))))); 53 53 - Responsive.(to_class (at_breakpoint `Xl (Grid.(to_class (template_cols (`Cols 4)))))); 54 54 - Spacing.(to_class (gap `All (Size.rem 1.0))); 55 55 - ])] (List.init 8 (fun i -> 56 56 - let colors = [| 57 57 - Color.make `Blue ~variant:`V100 (); 58 58 - Color.make `Green ~variant:`V100 (); 59 59 - Color.make `Purple ~variant:`V100 (); 60 60 - Color.make `Red ~variant:`V100 (); 61 61 - Color.make `Yellow ~variant:`V100 (); 62 62 - |] in 63 63 - El.div ~at:[classes_attr (Css.tw [ 64 64 - Color.bg colors.(i mod (Array.length colors)); 65 65 - Spacing.(to_class (p (Size.rem 1.5))); 66 66 - ]); At.class' "rounded-lg text-center"] [ 67 67 - El.txt (Printf.sprintf "Item %d" (i + 1)) 68 68 - ] 69 69 - )); 70 70 - ]; 28 28 + p ~styles:[ 29 29 + font_size `Lg; 30 30 + text_color (gray 600); 31 31 + text_center; 32 32 + margin_bottom (rem 3.0); 33 33 + ] [txt "Adaptive layouts using GADT interface"]; 71 34 72 72 - (* Responsive Typography *) 73 73 - El.section ~at:[At.class' "mb-8"] [ 74 74 - El.h2 ~at:[classes_attr (Css.tw [ 75 75 - Typography.(to_class (font_size `Xl)); 76 76 - Typography.(to_class (font_weight `Semibold)); 77 77 - Color.text (Color.make `Gray ~variant:`V700 ()); 78 78 - ]); At.class' "mb-6"] [El.txt "Responsive Typography"]; 35 35 + (* Mobile-first card grid *) 36 36 + section ~styles:[margin_bottom (rem 3.0)] [ 37 37 + h2 ~styles:[ 38 38 + font_size `Xl; 39 39 + font_weight `Semibold; 40 40 + text_color (gray 700); 41 41 + margin_bottom (rem 2.0); 42 42 + ] [txt "Responsive Card Grid"]; 79 43 80 80 - El.div ~at:[classes_attr (Css.tw [ 81 81 - Color.bg (Color.make `Gray ~variant:`V100 ()); 82 82 - Spacing.(to_class (p (Size.rem 1.5))); 83 83 - ]); At.class' "rounded-lg text-center"] [ 84 84 - El.h3 ~at:[classes_attr (Css.tw [ 85 85 - Typography.(to_class (font_size `Base)); 86 86 - Responsive.(to_class (at_breakpoint `Md (Typography.(to_class (font_size `Lg))))); 87 87 - Responsive.(to_class (at_breakpoint `Lg (Typography.(to_class (font_size `Xl2))))); 88 88 - Typography.(to_class (font_weight `Semibold)); 89 89 - Color.text (Color.make `Blue ~variant:`V600 ()); 90 90 - ]); At.class' "mb-4"] [El.txt "Responsive Heading"]; 44 44 + (* Using CSS Grid - starts as 1 column on mobile, would be 3 columns on larger screens *) 45 45 + div ~styles:[ 46 46 + grid; 47 47 + grid_cols 1; (* Mobile: 1 column, but ideally would be responsive *) 48 48 + gap (rem 1.5); 49 49 + ] [ 50 50 + (* Card 1 *) 51 51 + card [ 52 52 + h3 ~styles:[ 53 53 + font_size `Lg; 54 54 + font_weight `Semibold; 55 55 + text_color (blue 600); 56 56 + margin_bottom (rem 1.0); 57 57 + ] [txt "Card 1"]; 58 58 + p ~styles:[text_color (gray 600)] [ 59 59 + txt "This card stacks vertically on mobile and forms a grid on larger screens." 60 60 + ]; 61 61 + ]; 91 62 92 92 - El.p ~at:[classes_attr (Css.tw [ 93 93 - Typography.(to_class (font_size `Sm)); 94 94 - Responsive.(to_class (at_breakpoint `Md (Typography.(to_class (font_size `Base))))); 95 95 - Color.text (Color.make `Gray ~variant:`V600 ()); 96 96 - ])] [ 97 97 - El.txt "This text scales: small on mobile, base on tablet, and larger on desktop. The heading above also scales responsively." 63 63 + (* Card 2 *) 64 64 + card [ 65 65 + h3 ~styles:[ 66 66 + font_size `Lg; 67 67 + font_weight `Semibold; 68 68 + text_color (green 600); 69 69 + margin_bottom (rem 1.0); 70 70 + ] [txt "Card 2"]; 71 71 + p ~styles:[text_color (gray 600)] [ 72 72 + txt "Responsive design ensures optimal viewing across all devices." 73 73 + ]; 74 74 + ]; 75 75 + 76 76 + (* Card 3 *) 77 77 + card [ 78 78 + h3 ~styles:[ 79 79 + font_size `Lg; 80 80 + font_weight `Semibold; 81 81 + text_color (purple 600); 82 82 + margin_bottom (rem 1.0); 83 83 + ] [txt "Card 3"]; 84 84 + p ~styles:[text_color (gray 600)] [ 85 85 + txt "Mobile-first approach with progressive enhancement." 86 86 + ]; 98 87 ]; 99 88 ]; 100 89 ]; 101 90 102 102 - (* Show/Hide Elements *) 103 103 - El.section ~at:[At.class' "mb-8"] [ 104 104 - El.h2 ~at:[classes_attr (Css.tw [ 105 105 - Typography.(to_class (font_size `Xl)); 106 106 - Typography.(to_class (font_weight `Semibold)); 107 107 - Color.text (Color.make `Gray ~variant:`V700 ()); 108 108 - ]); At.class' "mb-6"] [El.txt "Responsive Visibility"]; 91 91 + (* Responsive navigation *) 92 92 + section ~styles:[margin_bottom (rem 3.0)] [ 93 93 + h2 ~styles:[ 94 94 + font_size `Xl; 95 95 + font_weight `Semibold; 96 96 + text_color (gray 700); 97 97 + margin_bottom (rem 2.0); 98 98 + ] [txt "Responsive Navigation"]; 109 99 110 110 - El.div ~at:[classes_attr (Css.tw [ 111 111 - Display.flex; 112 112 - Flexbox.(to_class (direction `Col)); 113 113 - Responsive.(to_class (at_breakpoint `Md (Flexbox.(to_class (direction `Row))))); 114 114 - Spacing.(to_class (gap `All (Size.rem 1.0))); 115 115 - ])] [ 116 116 - El.div ~at:[classes_attr (Css.tw [ 117 117 - Color.bg (Color.make `Blue ~variant:`V100 ()); 118 118 - Spacing.(to_class (p (Size.rem 1.5))); 119 119 - ]); At.class' "rounded-lg text-center"] [ 120 120 - El.txt "Always visible" 121 121 - ]; 122 122 - 123 123 - El.div ~at:[classes_attr (Css.tw [ 124 124 - Color.bg (Color.make `Green ~variant:`V100 ()); 125 125 - Spacing.(to_class (p (Size.rem 1.5))); 126 126 - Display.hidden; 127 127 - Responsive.(to_class (at_breakpoint `Md Display.block)); 128 128 - ]); At.class' "rounded-lg text-center"] [ 129 129 - El.txt "Hidden on mobile, visible on md+" 130 130 - ]; 131 131 - 132 132 - El.div ~at:[classes_attr (Css.tw [ 133 133 - Color.bg (Color.make `Purple ~variant:`V100 ()); 134 134 - Spacing.(to_class (p (Size.rem 1.5))); 135 135 - Display.hidden; 136 136 - Responsive.(to_class (at_breakpoint `Lg Display.block)); 137 137 - ]); At.class' "rounded-lg text-center"] [ 138 138 - El.txt "Only visible on lg+" 100 100 + nav ~styles:[ 101 101 + bg_color (Tailwind.Color.white); 102 102 + padding (rem 1.0); 103 103 + rounded `Lg; 104 104 + shadow `Md; 105 105 + ] [ 106 106 + div ~styles:[ 107 107 + flex; 108 108 + flex_col; 109 109 + ] [ 110 110 + a ~styles:[ 111 111 + padding (rem 0.75); 112 112 + text_color (gray 700); 113 113 + font_weight `Medium; 114 114 + ] ~href:"#" [txt "Home"]; 115 115 + 116 116 + a ~styles:[ 117 117 + padding (rem 0.75); 118 118 + text_color (gray 700); 119 119 + font_weight `Medium; 120 120 + ] ~href:"#" [txt "About"]; 121 121 + 122 122 + a ~styles:[ 123 123 + padding (rem 0.75); 124 124 + text_color (gray 700); 125 125 + font_weight `Medium; 126 126 + ] ~href:"#" [txt "Services"]; 127 127 + 128 128 + a ~styles:[ 129 129 + padding (rem 0.75); 130 130 + text_color (gray 700); 131 131 + font_weight `Medium; 132 132 + ] ~href:"#" [txt "Contact"]; 139 133 ]; 140 134 ]; 141 135 ]; 142 136 143 143 - (* Responsive Spacing *) 144 144 - El.section [ 145 145 - El.h2 ~at:[classes_attr (Css.tw [ 146 146 - Typography.(to_class (font_size `Xl)); 147 147 - Typography.(to_class (font_weight `Semibold)); 148 148 - Color.text (Color.make `Gray ~variant:`V700 ()); 149 149 - ]); At.class' "mb-6"] [El.txt "Responsive Spacing"]; 137 137 + (* Responsive text *) 138 138 + section [ 139 139 + h2 ~styles:[ 140 140 + font_size `Xl; 141 141 + font_weight `Semibold; 142 142 + text_color (gray 700); 143 143 + margin_bottom (rem 2.0); 144 144 + ] [txt "Responsive Typography"]; 150 145 151 151 - El.div ~at:[classes_attr (Css.tw [ 152 152 - Color.bg (Color.make `Gray ~variant:`V100 ()); 153 153 - Spacing.(to_class (p (Size.rem 1.0))); 154 154 - Responsive.(to_class (at_breakpoint `Md (Spacing.(to_class (p (Size.rem 1.5)))))); 155 155 - Responsive.(to_class (at_breakpoint `Lg (Spacing.(to_class (p (Size.rem 2.0)))))); 156 156 - ]); At.class' "rounded-lg"] [ 157 157 - El.div ~at:[classes_attr (Css.tw [ 158 158 - Color.bg Color.white; 159 159 - Spacing.(to_class (p (Size.rem 1.0))); 160 160 - ]); At.class' "rounded"] [ 161 161 - El.p [El.txt "This container has responsive padding:"]; 162 162 - El.ul [ 163 163 - El.li [El.txt "p-4 (1rem) on mobile"]; 164 164 - El.li [El.txt "md:p-6 (1.5rem) on tablet"]; 165 165 - El.li [El.txt "lg:p-8 (2rem) on desktop"]; 166 166 - ]; 167 167 - ]; 146 146 + card [ 147 147 + h3 ~styles:[ 148 148 + font_size `Lg; 149 149 + font_weight `Semibold; 150 150 + text_color (gray 800); 151 151 + margin_bottom (rem 1.0); 152 152 + ] [txt "Adaptive Text Sizes"]; 153 153 + 154 154 + p ~styles:[ 155 155 + font_size `Base; 156 156 + text_color (gray 600); 157 157 + margin_bottom (rem 1.0); 158 158 + ] [txt "This text adapts its size based on the viewport width."]; 159 159 + 160 160 + p ~styles:[ 161 161 + font_size `Sm; 162 162 + text_color (gray 500); 163 163 + ] [txt "Smaller supporting text that remains readable on all devices."]; 168 164 ]; 169 165 ]; 170 166 ]; 171 167 ]; 172 168 ] in 173 173 - 174 174 - let html_string = El.to_string ~doctype:true html_doc in 175 175 - print_string html_string 169 169 + html 176 170 177 177 - let () = create_responsive_demo () 171 171 + let () = 172 172 + let html = create_responsive_demo () in 173 173 + print_string (El.to_string ~doctype:true html)

-69

examples/type_safety_test.ml

··· 1 1 - (* Type Safety Test - Demonstrating GADT constraints *) 2 2 - 3 3 - open Htmlit 4 4 - open Tailwind_html 5 5 - 6 6 - (* Valid usage - each property category appears at most once *) 7 7 - let valid_styles = [ 8 8 - text_color (blue 600); (* ✅ Text color *) 9 9 - bg_color (gray 100); (* ✅ Background color *) 10 10 - font_size `Xl2; (* ✅ Font size *) 11 11 - font_weight `Bold; (* ✅ Font weight *) 12 12 - margin_bottom (rem 1.0); (* ✅ Margin *) 13 13 - padding (rem 1.5); (* ✅ Padding *) 14 14 - rounded `Lg; (* ✅ Border radius *) 15 15 - shadow `Md; (* ✅ Shadow *) 16 16 - ] 17 17 - 18 18 - (* This would cause a type error if uncommented: *) 19 19 - (* let invalid_styles = [ 20 20 - text_color (blue 600); 21 21 - text_color (red 500); (* ❌ Cannot have two text colors! *) 22 22 - ] *) 23 23 - 24 24 - let create_type_safety_demo () = 25 25 - let html = El.html [ 26 26 - El.head [ 27 27 - El.meta ~at:[At.charset "utf-8"] (); 28 28 - El.title [txt "Type Safety Test"]; 29 29 - ]; 30 30 - 31 31 - El.body [ 32 32 - h1_styled ~styles:valid_styles [ 33 33 - txt "✅ Type-Safe Tailwind with GADTs" 34 34 - ]; 35 35 - 36 36 - p_gadt ~styles:[ 37 37 - text_color (gray 600); 38 38 - font_size `Base; 39 39 - margin_bottom (rem 2.0); 40 40 - ] [ 41 41 - txt "This demonstrates that each property category can only appear once, "; 42 42 - txt "preventing styling conflicts at compile time!" 43 43 - ]; 44 44 - 45 45 - div_styled ~styles:[ 46 46 - bg_color (green 50); 47 47 - padding (rem 2.0); 48 48 - rounded `Md; 49 49 - ] [ 50 50 - h2_styled ~styles:[ 51 51 - text_color (green 700); 52 52 - font_weight `Semibold; 53 53 - margin_bottom (rem 1.0); 54 54 - ] [txt "🎯 Type Safety Features"]; 55 55 - 56 56 - El.ul [ 57 57 - El.li [txt "✅ Each property category (color, size, spacing) appears at most once"]; 58 58 - El.li [txt "✅ Compile-time prevention of styling conflicts"]; 59 59 - El.li [txt "✅ Clean, readable heterogeneous list syntax"]; 60 60 - El.li [txt "✅ Full type inference and autocomplete support"]; 61 61 - ]; 62 62 - ]; 63 63 - ]; 64 64 - ] in 65 65 - html 66 66 - 67 67 - let () = 68 68 - let html = create_type_safety_demo () in 69 69 - print_string (El.to_string ~doctype:true html)

+18

lib/tailwind-html/tailwind_html.ml

··· 70 70 | Max_width : Tailwind.Size.t -> [`Width] tw_prop 71 71 | Min_height : Tailwind.Size.t -> [`Height] tw_prop 72 72 | Display_flex : [`Layout] tw_prop 73 73 + | Display_grid : [`Layout] tw_prop 73 74 | Display_block : [`Layout] tw_prop 74 75 | Display_inline : [`Layout] tw_prop 75 76 | Display_inline_block : [`Layout] tw_prop 77 77 + | Grid_cols : int -> [`Grid] tw_prop 78 78 + | Grid_rows : int -> [`Grid] tw_prop 79 79 + | Gap : Tailwind.Size.t -> [`Grid] tw_prop 80 80 + | Gap_x : Tailwind.Size.t -> [`Grid] tw_prop 81 81 + | Gap_y : Tailwind.Size.t -> [`Grid] tw_prop 76 82 | Items_center : [`Layout] tw_prop 77 83 | Items_start : [`Layout] tw_prop 78 84 | Items_end : [`Layout] tw_prop ··· 117 123 | Max_width size -> Tailwind.Layout.(to_class (max_width size)) 118 124 | Min_height size -> Tailwind.Layout.(to_class (min_height size)) 119 125 | Display_flex -> Tailwind.Display.flex 126 126 + | Display_grid -> Tailwind.Display.grid 120 127 | Display_block -> Tailwind.Display.block 121 128 | Display_inline -> Tailwind.Display.inline 122 129 | Display_inline_block -> Tailwind.Display.inline_block 130 130 + | Grid_cols n -> Tailwind.Grid.(to_class (template_cols (`Cols n))) 131 131 + | Grid_rows n -> Tailwind.Grid.(to_class (template_rows (`Rows n))) 132 132 + | Gap size -> Tailwind.Spacing.(to_class (gap `All size)) 133 133 + | Gap_x size -> Tailwind.Spacing.(to_class (gap `X size)) 134 134 + | Gap_y size -> Tailwind.Spacing.(to_class (gap `Y size)) 123 135 | Items_center -> Tailwind.Flexbox.(to_class (align_items `Center)) 124 136 | Items_start -> Tailwind.Flexbox.(to_class (align_items `Start)) 125 137 | Items_end -> Tailwind.Flexbox.(to_class (align_items `End)) ··· 177 189 let max_width s = Any (Max_width s) 178 190 let min_height s = Any (Min_height s) 179 191 let flex = Any Display_flex 192 192 + let grid = Any Display_grid 180 193 let block = Any Display_block 181 194 let inline = Any Display_inline 182 195 let inline_block = Any Display_inline_block 196 196 + let grid_cols n = Any (Grid_cols n) 197 197 + let grid_rows n = Any (Grid_rows n) 198 198 + let gap s = Any (Gap s) 199 199 + let gap_x s = Any (Gap_x s) 200 200 + let gap_y s = Any (Gap_y s) 183 201 let items_center = Any Items_center 184 202 let items_start = Any Items_start 185 203 let items_end = Any Items_end

+12

lib/tailwind-html/tailwind_html.mli

··· 42 42 | Max_width : Tailwind.Size.t -> [`Width] tw_prop 43 43 | Min_height : Tailwind.Size.t -> [`Height] tw_prop 44 44 | Display_flex : [`Layout] tw_prop 45 45 + | Display_grid : [`Layout] tw_prop 45 46 | Display_block : [`Layout] tw_prop 46 47 | Display_inline : [`Layout] tw_prop 47 48 | Display_inline_block : [`Layout] tw_prop 49 49 + | Grid_cols : int -> [`Grid] tw_prop 50 50 + | Grid_rows : int -> [`Grid] tw_prop 51 51 + | Gap : Tailwind.Size.t -> [`Grid] tw_prop 52 52 + | Gap_x : Tailwind.Size.t -> [`Grid] tw_prop 53 53 + | Gap_y : Tailwind.Size.t -> [`Grid] tw_prop 48 54 | Items_center : [`Layout] tw_prop 49 55 | Items_start : [`Layout] tw_prop 50 56 | Items_end : [`Layout] tw_prop ··· 93 99 val max_width : Tailwind.Size.t -> tw_list_item 94 100 val min_height : Tailwind.Size.t -> tw_list_item 95 101 val flex : tw_list_item 102 102 + val grid : tw_list_item 96 103 val block : tw_list_item 97 104 val inline : tw_list_item 98 105 val inline_block : tw_list_item 106 106 + val grid_cols : int -> tw_list_item 107 107 + val grid_rows : int -> tw_list_item 108 108 + val gap : Tailwind.Size.t -> tw_list_item 109 109 + val gap_x : Tailwind.Size.t -> tw_list_item 110 110 + val gap_y : Tailwind.Size.t -> tw_list_item 99 111 val items_center : tw_list_item 100 112 val items_start : tw_list_item 101 113 val items_end : tw_list_item