···

       
40
       
40
       
 
       
  --color-indigo-50: #eef2ff;

     

       
41
       
41
       
 
       
  --color-indigo-600: #4f46e5;

     

       
42
       
42
       
 
       
  

     

       
43
       
43
       
+
       
  /* Additional responsive grid values */

     

       
44
       
44
       
+
       
  --spacing-6xl: 80rem;

     

       
45
       
45
       
+
       
  

     

       
43
       
46
       
 
       
  /* Spacing */

     

       
44
       
47
       
 
       
  --spacing-0: 0px;

     

       
45
       
48
       
 
       
  --spacing-0_25: 0.0625rem;

     

···

       
172
       
172
       
 
       
  ] in

     

       
173
       
173
       
 
       
  

     

       
174
       
174
       
 
       
  let html_string = El.to_string ~doctype:true html_doc in

     

       
175
       
175
       
-
       
  let oc = open_out "04_responsive_design.html" in

     

       
176
       
176
       
-
       
  output_string oc html_string;

     

       
177
       
177
       
-
       
  close_out oc;

     

       
178
       
178
       
-
       
  

     

       
179
       
179
       
-
       
  Printf.printf "\n✅ Generated: 04_responsive_design.html (%d bytes)\n" (String.length html_string);

     

       
180
       
180
       
-
       
  Printf.printf "\n🎯 What you learned:\n";

     

       
181
       
181
       
-
       
  Printf.printf "   • Mobile-first responsive design approach\n";

     

       
182
       
182
       
-
       
  Printf.printf "   • Breakpoint system: sm, md, lg, xl\n";

     

       
183
       
183
       
-
       
  Printf.printf "   • Responsive utilities with at_breakpoint function\n";

     

       
184
       
184
       
-
       
  Printf.printf "   • Show/hide elements at different screen sizes\n";

     

       
185
       
185
       
-
       
  Printf.printf "   • Responsive typography and spacing\n";

     

       
186
       
186
       
-
       
  Printf.printf "   • Grid columns that adapt to screen size\n"

     

       
175
       
175
       
+
       
  print_string html_string

     

       
187
       
176
       
 
       


     

       
188
       
177
       
 
       
let () = create_responsive_demo ()