x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<div class="p-6 max-w-full mx-auto space-y-8"> <!-- Header / Introduction --> <div class="callout"> <p class="mb-1 text-sm font-mono"> <strong>CONTAINER SYSTEM:</strong> Complete reference for layout containers<br> <strong>VARIANTS:</strong> Fixed-Width | Fluid | Responsive Breakpoint-Based </p> <p class="mb-0 text-sm"> Containers are the foundation of your page layout. They center content, provide consistent padding, and adapt to different screen sizes for optimal reading width and user experience. </p> </div> <!-- Section 1: Fixed-Width Container --> <div class="border-t pt-6"> <h2 class="h4 mb-4">Fixed-Width Container</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>.container:</strong> Responsive fixed-width container that centers content with max-widths optimized for each breakpoint. Automatically adjusts padding for comfortable spacing on all screen sizes. </p> </div> <div class="container bg-primary text-white p-4 rounded-md"> <p class="mb-2 fw-bold">.container</p> <p class="mb-0 text-sm">This container has responsive max-widths and centers content. Resize your browser to see it adapt at different breakpoints (540px → 720px → 960px → 1140px → 1280px).</p> </div> <div class="mt-4 p-4 bg-light rounded"> <p class="text-sm font-semibold mb-2">Responsive Max-Widths</p> <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm"> <div class="flex justify-between"> <span class="font-semibold">sm (640px+):</span> <span>540px</span> </div> <div class="flex justify-between"> <span class="font-semibold">md (768px+):</span> <span>720px</span> </div> <div class="flex justify-between"> <span class="font-semibold">lg (1024px+):</span> <span>960px</span> </div> <div class="flex justify-between"> <span class="font-semibold">xl (1280px+):</span> <span>1140px</span> </div> <div class="flex justify-between"> <span class="font-semibold">2xl (1536px+):</span> <span>1280px</span> </div> </div> </div> <div class="mt-4 text-sm text-gray-600"> <code><div class="container">Your content here</div></code> </div> </div> <!-- Section 2: Fluid Container --> <div class="border-t pt-6"> <h2 class="h4 mb-4">Fluid Container</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>.container-fluid:</strong> Full-width container that spans 100% of the viewport at all breakpoints. Same responsive padding as fixed container, but no max-width constraints. Use for full-width layouts, heroes, or edge-to-edge designs. </p> </div> <div class="space-y-4"> <div> <p class="text-sm font-semibold mb-2">Comparison: Fixed vs Fluid</p> <div class="container bg-primary text-white p-4 rounded-md mb-3"> <p class="mb-2 fw-bold">.container (Fixed-Width)</p> <p class="mb-0 text-sm">Centered with max-width constraints at each breakpoint</p> </div> <div class="container-fluid bg-secondary text-white p-4 rounded-md"> <p class="mb-2 fw-bold">.container-fluid (Full-Width)</p> <p class="mb-0 text-sm">Spans 100% width at all screen sizes, no max-width</p> </div> </div> </div> <div class="mt-4 text-sm text-gray-600"> <code><div class="container-fluid">Full-width content</div></code> </div> </div> <!-- Section 3: Responsive Breakpoint-Based Containers --> <div class="border-t pt-6"> <h2 class="h4 mb-4">Responsive Breakpoint-Based Containers</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>Responsive Containers:</strong> Containers that are 100% width (fluid) until a specific breakpoint, then become fixed-width and centered. Perfect for mobile-first designs where you want full-width layout on small screens but centered content on larger screens. </p> </div> <div class="space-y-6"> <!-- container-sm --> <div> <div class="flex items-baseline gap-2 mb-2"> <p class="text-sm font-semibold">.container-sm</p> <p class="text-xs">Activates at 640px (sm breakpoint)</p> </div> <p class="text-sm mb-2" style="color: var(--color-secondary);"> 100% width below 640px, then fixed-width and centered </p> <div class="container-sm bg-primary text-white p-4 rounded-md"> <p class="mb-0 text-sm">.container-sm</p> </div> </div> <!-- container-md --> <div> <div class="flex items-baseline gap-2 mb-2"> <p class="text-sm font-semibold">.container-md</p> <p class="text-xs">Activates at 768px (md breakpoint)</p> </div> <p class="text-sm mb-2" style="color: var(--color-secondary);"> 100% width below 768px, then fixed-width and centered </p> <div class="container-md bg-success text-white p-4 rounded-md"> <p class="mb-0 text-sm">.container-md</p> </div> </div> <!-- container-lg --> <div> <div class="flex items-baseline gap-2 mb-2"> <p class="text-sm font-semibold">.container-lg</p> <p class="text-xs">Activates at 1024px (lg breakpoint)</p> </div> <p class="text-sm mb-2" style="color: var(--color-secondary);"> 100% width below 1024px, then fixed-width and centered </p> <div class="container-lg bg-info text-white p-4 rounded-md"> <p class="mb-0 text-sm">.container-lg</p> </div> </div> <!-- container-xl --> <div> <div class="flex items-baseline gap-2 mb-2"> <p class="text-sm font-semibold">.container-xl</p> <p class="text-xs">Activates at 1280px (xl breakpoint)</p> </div> <p class="text-sm mb-2" style="color: var(--color-secondary);"> 100% width below 1280px, then fixed-width and centered </p> <div class="container-xl bg-warning text-dark p-4 rounded-md"> <p class="mb-0 text-sm">.container-xl</p> </div> </div> <!-- container-2xl --> <div> <div class="flex items-baseline gap-2 mb-2"> <p class="text-sm font-semibold">.container-2xl</p> <p class="text-xs">Activates at 1536px (2xl breakpoint)</p> </div> <p class="text-sm mb-2" style="color: var(--color-secondary);"> 100% width below 1536px, then fixed-width and centered </p> <div class="container-2xl bg-danger text-white p-4 rounded-md"> <p class="mb-0 text-sm">.container-2xl</p> </div> </div> </div> <div class="mt-4 p-4 bg-light rounded"> <p class="text-sm font-semibold mb-3">Breakpoint Activation Table</p> <div class="overflow-x-auto"> <table class="w-full text-sm"> <thead> <tr class="border-b"> <th class="text-left pb-2">Class</th> <th class="text-left pb-2">Breakpoint</th> <th class="text-left pb-2">Behavior Below</th> <th class="text-left pb-2">Behavior Above</th> </tr> </thead> <tbody> <tr class="border-b"> <td class="py-2 font-mono">.container-sm</td> <td class="py-2">640px (sm)</td> <td class="py-2">100% width</td> <td class="py-2">Fixed & centered</td> </tr> <tr class="border-b"> <td class="py-2 font-mono">.container-md</td> <td class="py-2">768px (md)</td> <td class="py-2">100% width</td> <td class="py-2">Fixed & centered</td> </tr> <tr class="border-b"> <td class="py-2 font-mono">.container-lg</td> <td class="py-2">1024px (lg)</td> <td class="py-2">100% width</td> <td class="py-2">Fixed & centered</td> </tr> <tr class="border-b"> <td class="py-2 font-mono">.container-xl</td> <td class="py-2">1280px (xl)</td> <td class="py-2">100% width</td> <td class="py-2">Fixed & centered</td> </tr> <tr> <td class="py-2 font-mono">.container-2xl</td> <td class="py-2">1536px (2xl)</td> <td class="py-2">100% width</td> <td class="py-2">Fixed & centered</td> </tr> </tbody> </table> </div> </div> <div class="mt-4 text-sm text-gray-600 space-y-1"> <div><code><div class="container-sm">...</div></code></div> <div><code><div class="container-md">...</div></code></div> <div><code><div class="container-lg">...</div></code></div> <div class="mt-2" style="color: var(--color-secondary);">💡 Tip: Resize your browser to see responsive behavior</div> </div> </div> <!-- Section 4: Usage Examples & Best Practices --> <div class="border-t pt-6"> <h2 class="h4 mb-4">Usage Examples & Best Practices</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>When to use each container type:</strong> Choose based on your layout needs and content width requirements. </p> </div> <div class="space-y-4"> <!-- Standard Content Pages --> <div class="p-4 border rounded"> <p class="text-sm font-semibold mb-2">✅ Standard Content Pages</p> <p class="text-sm mb-2" style="color: var(--color-secondary);">Use <code>.container</code> for articles, forms, documentation</p> <div class="text-xs text-gray-600"> <code><div class="container">Main content</div></code> </div> </div> <!-- Full-Width Layouts --> <div class="p-4 border rounded"> <p class="text-sm font-semibold mb-2">✅ Full-Width Layouts</p> <p class="text-sm mb-2" style="color: var(--color-secondary);">Use <code>.container-fluid</code> for dashboards, maps, data tables, edge-to-edge designs</p> <div class="text-xs text-gray-600"> <code><div class="container-fluid">Dashboard</div></code> </div> </div> <!-- Mobile-First Responsive --> <div class="p-4 border rounded"> <p class="text-sm font-semibold mb-2">✅ Mobile-First Responsive Design</p> <p class="text-sm mb-2" style="color: var(--color-secondary);">Use <code>.container-md</code> for mobile-full, desktop-centered layouts</p> <div class="text-xs text-gray-600"> <code><div class="container-md">Responsive content</div></code> </div> </div> <!-- Hero Sections --> <div class="p-4 border rounded"> <p class="text-sm font-semibold mb-2">✅ Hero Sections with Centered Content</p> <p class="text-sm mb-2" style="color: var(--color-secondary);">Use <code>.container-fluid</code> for background, nested <code>.container</code> for content</p> <div class="text-xs text-gray-600"> <code><div class="container-fluid bg-primary"><div class="container">Hero</div></div></code> </div> </div> </div> </div> <!-- Quick Reference Footer --> <div class="border-t pt-6 mt-8"> <div class="callout"> <p class="mb-1 text-sm font-semibold">Quick Reference</p> <p class="mb-0 text-xs font-mono"> <strong>Fixed-Width:</strong> .container (responsive max-widths: 540px → 720px → 960px → 1140px → 1280px)<br> <strong>Fluid:</strong> .container-fluid (100% width at all breakpoints)<br> <strong>Responsive:</strong> .container-{sm|md|lg|xl|2xl} (fluid until breakpoint, then fixed)<br> <strong>Breakpoints:</strong> sm:640px | md:768px | lg:1024px | xl:1280px | 2xl:1536px<br> <strong>Padding:</strong> Responsive (px-4 → px-6 → px-8)<br> <strong>Alignment:</strong> All fixed-width containers are centered with mx-auto </p> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
<div class="p-6 max-w-full mx-auto space-y-8"> <!-- Header / Introduction --> <div class="callout"> <p class="mb-1 text-sm font-mono"> <strong>CONTAINER SYSTEM:</strong> Complete reference for layout containers<br> <strong>VARIANTS:</strong> Fixed-Width | Fluid | Responsive Breakpoint-Based </p> <p class="mb-0 text-sm"> Containers are the foundation of your page layout. They center content, provide consistent padding, and adapt to different screen sizes for optimal reading width and user experience. </p> </div> <!-- Section 1: Fixed-Width Container --> <div class="border-t pt-6"> <h2 class="h4 mb-4">Fixed-Width Container</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>.container:</strong> Responsive fixed-width container that centers content with max-widths optimized for each breakpoint. Automatically adjusts padding for comfortable spacing on all screen sizes. </p> </div> <div class="container bg-primary text-white p-4 rounded-md"> <p class="mb-2 fw-bold">.container</p> <p class="mb-0 text-sm">This container has responsive max-widths and centers content. Resize your browser to see it adapt at different breakpoints (540px → 720px → 960px → 1140px → 1280px).</p> </div> <div class="mt-4 p-4 bg-light rounded"> <p class="text-sm font-semibold mb-2">Responsive Max-Widths</p> <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm"> <div class="flex justify-between"> <span class="font-semibold">sm (640px+):</span> <span>540px</span> </div> <div class="flex justify-between"> <span class="font-semibold">md (768px+):</span> <span>720px</span> </div> <div class="flex justify-between"> <span class="font-semibold">lg (1024px+):</span> <span>960px</span> </div> <div class="flex justify-between"> <span class="font-semibold">xl (1280px+):</span> <span>1140px</span> </div> <div class="flex justify-between"> <span class="font-semibold">2xl (1536px+):</span> <span>1280px</span> </div> </div> </div> <div class="mt-4 text-sm text-gray-600"> <code><div class="container">Your content here</div></code> </div> </div> <!-- Section 2: Fluid Container --> <div class="border-t pt-6"> <h2 class="h4 mb-4">Fluid Container</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>.container-fluid:</strong> Full-width container that spans 100% of the viewport at all breakpoints. Same responsive padding as fixed container, but no max-width constraints. Use for full-width layouts, heroes, or edge-to-edge designs. </p> </div> <div class="space-y-4"> <div> <p class="text-sm font-semibold mb-2">Comparison: Fixed vs Fluid</p> <div class="container bg-primary text-white p-4 rounded-md mb-3"> <p class="mb-2 fw-bold">.container (Fixed-Width)</p> <p class="mb-0 text-sm">Centered with max-width constraints at each breakpoint</p> </div> <div class="container-fluid bg-secondary text-white p-4 rounded-md"> <p class="mb-2 fw-bold">.container-fluid (Full-Width)</p> <p class="mb-0 text-sm">Spans 100% width at all screen sizes, no max-width</p> </div> </div> </div> <div class="mt-4 text-sm text-gray-600"> <code><div class="container-fluid">Full-width content</div></code> </div> </div> <!-- Section 3: Responsive Breakpoint-Based Containers --> <div class="border-t pt-6"> <h2 class="h4 mb-4">Responsive Breakpoint-Based Containers</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>Responsive Containers:</strong> Containers that are 100% width (fluid) until a specific breakpoint, then become fixed-width and centered. Perfect for mobile-first designs where you want full-width layout on small screens but centered content on larger screens. </p> </div> <div class="space-y-6"> <!-- container-sm --> <div> <div class="flex items-baseline gap-2 mb-2"> <p class="text-sm font-semibold">.container-sm</p> <p class="text-xs">Activates at 640px (sm breakpoint)</p> </div> <p class="text-sm mb-2" style="color: var(--color-secondary);"> 100% width below 640px, then fixed-width and centered </p> <div class="container-sm bg-primary text-white p-4 rounded-md"> <p class="mb-0 text-sm">.container-sm</p> </div> </div> <!-- container-md --> <div> <div class="flex items-baseline gap-2 mb-2"> <p class="text-sm font-semibold">.container-md</p> <p class="text-xs">Activates at 768px (md breakpoint)</p> </div> <p class="text-sm mb-2" style="color: var(--color-secondary);"> 100% width below 768px, then fixed-width and centered </p> <div class="container-md bg-success text-white p-4 rounded-md"> <p class="mb-0 text-sm">.container-md</p> </div> </div> <!-- container-lg --> <div> <div class="flex items-baseline gap-2 mb-2"> <p class="text-sm font-semibold">.container-lg</p> <p class="text-xs">Activates at 1024px (lg breakpoint)</p> </div> <p class="text-sm mb-2" style="color: var(--color-secondary);"> 100% width below 1024px, then fixed-width and centered </p> <div class="container-lg bg-info text-white p-4 rounded-md"> <p class="mb-0 text-sm">.container-lg</p> </div> </div> <!-- container-xl --> <div> <div class="flex items-baseline gap-2 mb-2"> <p class="text-sm font-semibold">.container-xl</p> <p class="text-xs">Activates at 1280px (xl breakpoint)</p> </div> <p class="text-sm mb-2" style="color: var(--color-secondary);"> 100% width below 1280px, then fixed-width and centered </p> <div class="container-xl bg-warning text-dark p-4 rounded-md"> <p class="mb-0 text-sm">.container-xl</p> </div> </div> <!-- container-2xl --> <div> <div class="flex items-baseline gap-2 mb-2"> <p class="text-sm font-semibold">.container-2xl</p> <p class="text-xs">Activates at 1536px (2xl breakpoint)</p> </div> <p class="text-sm mb-2" style="color: var(--color-secondary);"> 100% width below 1536px, then fixed-width and centered </p> <div class="container-2xl bg-danger text-white p-4 rounded-md"> <p class="mb-0 text-sm">.container-2xl</p> </div> </div> </div> <div class="mt-4 p-4 bg-light rounded"> <p class="text-sm font-semibold mb-3">Breakpoint Activation Table</p> <div class="overflow-x-auto"> <table class="w-full text-sm"> <thead> <tr class="border-b"> <th class="text-left pb-2">Class</th> <th class="text-left pb-2">Breakpoint</th> <th class="text-left pb-2">Behavior Below</th> <th class="text-left pb-2">Behavior Above</th> </tr> </thead> <tbody> <tr class="border-b"> <td class="py-2 font-mono">.container-sm</td> <td class="py-2">640px (sm)</td> <td class="py-2">100% width</td> <td class="py-2">Fixed & centered</td> </tr> <tr class="border-b"> <td class="py-2 font-mono">.container-md</td> <td class="py-2">768px (md)</td> <td class="py-2">100% width</td> <td class="py-2">Fixed & centered</td> </tr> <tr class="border-b"> <td class="py-2 font-mono">.container-lg</td> <td class="py-2">1024px (lg)</td> <td class="py-2">100% width</td> <td class="py-2">Fixed & centered</td> </tr> <tr class="border-b"> <td class="py-2 font-mono">.container-xl</td> <td class="py-2">1280px (xl)</td> <td class="py-2">100% width</td> <td class="py-2">Fixed & centered</td> </tr> <tr> <td class="py-2 font-mono">.container-2xl</td> <td class="py-2">1536px (2xl)</td> <td class="py-2">100% width</td> <td class="py-2">Fixed & centered</td> </tr> </tbody> </table> </div> </div> <div class="mt-4 text-sm text-gray-600 space-y-1"> <div><code><div class="container-sm">...</div></code></div> <div><code><div class="container-md">...</div></code></div> <div><code><div class="container-lg">...</div></code></div> <div class="mt-2" style="color: var(--color-secondary);">💡 Tip: Resize your browser to see responsive behavior</div> </div> </div> <!-- Section 4: Usage Examples & Best Practices --> <div class="border-t pt-6"> <h2 class="h4 mb-4">Usage Examples & Best Practices</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>When to use each container type:</strong> Choose based on your layout needs and content width requirements. </p> </div> <div class="space-y-4"> <!-- Standard Content Pages --> <div class="p-4 border rounded"> <p class="text-sm font-semibold mb-2">✅ Standard Content Pages</p> <p class="text-sm mb-2" style="color: var(--color-secondary);">Use <code>.container</code> for articles, forms, documentation</p> <div class="text-xs text-gray-600"> <code><div class="container">Main content</div></code> </div> </div> <!-- Full-Width Layouts --> <div class="p-4 border rounded"> <p class="text-sm font-semibold mb-2">✅ Full-Width Layouts</p> <p class="text-sm mb-2" style="color: var(--color-secondary);">Use <code>.container-fluid</code> for dashboards, maps, data tables, edge-to-edge designs</p> <div class="text-xs text-gray-600"> <code><div class="container-fluid">Dashboard</div></code> </div> </div> <!-- Mobile-First Responsive --> <div class="p-4 border rounded"> <p class="text-sm font-semibold mb-2">✅ Mobile-First Responsive Design</p> <p class="text-sm mb-2" style="color: var(--color-secondary);">Use <code>.container-md</code> for mobile-full, desktop-centered layouts</p> <div class="text-xs text-gray-600"> <code><div class="container-md">Responsive content</div></code> </div> </div> <!-- Hero Sections --> <div class="p-4 border rounded"> <p class="text-sm font-semibold mb-2">✅ Hero Sections with Centered Content</p> <p class="text-sm mb-2" style="color: var(--color-secondary);">Use <code>.container-fluid</code> for background, nested <code>.container</code> for content</p> <div class="text-xs text-gray-600"> <code><div class="container-fluid bg-primary"><div class="container">Hero</div></div></code> </div> </div> </div> </div> <!-- Quick Reference Footer --> <div class="border-t pt-6 mt-8"> <div class="callout"> <p class="mb-1 text-sm font-semibold">Quick Reference</p> <p class="mb-0 text-xs font-mono"> <strong>Fixed-Width:</strong> .container (responsive max-widths: 540px → 720px → 960px → 1140px → 1280px)<br> <strong>Fluid:</strong> .container-fluid (100% width at all breakpoints)<br> <strong>Responsive:</strong> .container-{sm|md|lg|xl|2xl} (fluid until breakpoint, then fixed)<br> <strong>Breakpoints:</strong> sm:640px | md:768px | lg:1024px | xl:1280px | 2xl:1536px<br> <strong>Padding:</strong> Responsive (px-4 → px-6 → px-8)<br> <strong>Alignment:</strong> All fixed-width containers are centered with mx-auto </p> </div> </div></div>No notes provided.
No params configured.