commit 262572476cdceec24444d5cee8a81190d655bb71 · anil.recoil.org/ocaml-tailwind

+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