source.uim.bootstrap.bs5.demos.contents.typography source code

1 module source.uim.bootstrap.bs5.demos.contents.typography;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("basic/contents/typography", new class DH5AppPage {
7 		this() { 
8 			super(); 
9 			this
10 			.created(DateTime(2020, 12, 20, 10, 10, 0))
11 			.changed(timeLastModified(__FILE_FULL_PATH__))
12 			.parameters([
13 					"pageTitle": "Typography - Bootstrap 5 Demo",
14           ]);
15 		} 
16 			
17     override string content() { 
18 
19 auto elementsExample = demoBs5Example("elements", "Heading elements", 
20   H5Div(
21     H5H1("h1 heading"),
22     H5H2("h2 heading"),
23     H5H3("h3 heading"),
24     H5H4("h4 heading"),
25     H5H5("h5 heading"),
26     H5H6("h6 heading"),
27   ), `H5H1("h1 heading")
28   H5H2("h2 heading")
29   H5H3("h3 heading")
30   H5H4("h4 heading")
31   H5H5("h5 heading")
32   H5H6("h6 heading")`, ``);
33 
34 auto classesExample = demoBs5Example("classes", "Heading classes", 
35   H5Div(
36     H5P(["h1"], ".h1 heading"),
37     H5P(["h2"], ".h2 heading"),
38     H5P(["h3"], ".h3 heading"),
39     H5P(["h4"], ".h4 heading"),
40     H5P(["h5"], ".h5 heading"),
41     H5P(["h6"], ".h6 heading")
42   ), `H5P(["h1"], ".h1 heading")
43   H5P(["h2"], ".h2 heading")
44   H5P(["h3"], ".h3 heading")
45   H5P(["h4"], ".h4 heading")
46   H5P(["h5"], ".h5 heading")
47   H5P(["h6"], ".h6 heading")`, ``);
48 
49 auto secondaryExample = demoBs5Example("secondary", "Secondary headings", 
50   H5Div(
51     H5H1(
52       H5String("h1 heading"),
53       H5Small(["text-muted"], "Secondary heading"),
54     ),
55     H5H2(
56       H5String("h2 heading"),
57       H5Small(["text-muted"], "Secondary heading"),
58     ),
59     H5H3(
60       H5String("h3 heading"),
61       H5Small(["text-muted"], "Secondary heading"),
62     ), 
63     H5H4(
64       H5String("h4 heading"),
65       H5Small(["text-muted"], "Secondary heading"),
66     ),
67     H5H5(
68       H5String("h5 heading"),
69       H5Small(["text-muted"], "Secondary heading"),
70     ),
71     H5H6(
72       H5String("h6 heading"),
73       H5Small(["text-muted"], "Secondary heading"),
74     )
75   ), ``, ``);
76 
77 auto displayExample = demoBs5Example("display", "Display headings", 
78   H5Div(
79     H5H1(["display-1"], "Display heading 1"),
80     H5H1(["display-2"], "Display heading 2"),
81     H5H1(["display-3"], "Display heading 3"),
82     H5H1(["display-4"], "Display heading 4"),
83     H5H1(["display-5"], "Display heading 5"),
84     H5H1(["display-6"], "Display heading 6")
85   ), ``, ``);
86 
87 auto leadExample = demoBs5Example("lead", "Lead paragraph", 
88   H5Div(
89     H5P(["lead"], "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")
90   ), ``, ``);
91 
92 auto inlineExample = demoBs5Example("inline", "Inline elements", 
93   H5Div(
94     H5P(H5Mark("Highlighted text.")),
95     H5P(H5Del("Deleted text.")),
96     H5P(H5S("Text that is incorrect.")),
97     H5P(H5Ins("Inserted text.")),
98     H5P(H5U("Underlined text.")),
99     H5P(H5Small("Fine print.")),
100     H5P(H5Strong("Strong text.")),
101     H5P(H5Em("Emphasized text.")),
102     H5P(H5B("Bold text.")),
103     H5P(H5I("Alternate voice, technical term etc.")),
104   ), ``, ``);
105 
106 auto inlinestylesExample = demoBs5Example("inlinestyles", "Inline styles using classes", 
107   H5Div(
108     H5P(H5Span(["mark"], "Highlighted text.")),
109     H5P(H5Span(["small"], "Fine print.")),
110     H5P(H5Span(["text-decoration-underline"], "Underlined text.")),
111     H5P(H5Span(["text-decoration-line-through"], "Text that is incorrect."))
112   ), ``, ``);
113 
114 auto abbreviationsExample = demoBs5Example("abbreviations", "Abbreviations", 
115   H5Div(
116     H5P(H5Abbr(["title":"attribute"], "attr</abbr>")),
117     H5P(H5Abbr(["title":"HyperText Markup Language"], "[initialism]html"))
118   ), ``, ``);
119 
120 auto blockquotesExample = demoBs5Example("Blockquotes", "Blockquotes", 
121   H5Div(
122     H5H5(["text-muted", "mt-3"], "Default"),
123     H5Blockquote(["blockquote"],
124       H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")
125     ),
126     H5H5(["text-muted", "mt-3"], "Attribution"),
127     H5Figure(
128       H5Blockquote(["blockquote"],
129         H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")
130       ),
131       H5Figcaption(["blockquote-footer"], `Author name in <cite title="Source Title"]Source Title</cite>`)
132     ),
133     H5H5(["text-muted", "mt-3"], "Alignment"),
134     H5Figure(["text-center"],
135       H5Blockquote(["blockquote"],
136         H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")
137       ),
138       H5Figcaption(["blockquote-footer"], `Author name in <cite title="Source Title"]Source Title</cite>`)
139     ),
140     H5Figure(["text-end"],
141       H5Blockquote(["blockquote"],
142         H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")
143       ),
144       H5Figcaption(["blockquote-footer"], `Author name in <cite title="Source Title"]Source Title</cite>`)
145     )
146   ), ``, ``);
147 
148 auto unstyledExample = demoBs5Example("unstyled", "Unstyled lists", 
149   H5Div(
150     H5H5(["text-muted", "mt-3"], "Unordered lists"),
151     H5Ul(["list-unstyled"],
152       H5Li("First item"),
153       H5Li("Second item"),
154       H5Li("Third item"),
155       H5Li(
156         H5String("Sub-items:"),
157         H5Ul(
158           H5Li("First sub-item"),
159           H5Li("Second sub-item"),
160           H5Li("Third sub-item")
161         )
162       )
163     ),
164     H5Ul(["list-unstyled"],
165       H5Li("First item"),
166       H5Li("Second item"),
167       H5Li("Third item"),
168       H5Li(
169         H5String("Sub-items:"),
170         H5Ul(["list-unstyled"],
171           H5Li("First sub-item"),
172           H5Li("Second sub-item"),
173           H5Li("Third sub-item")
174         )
175       )
176     ),
177     H5H5(["text-muted", "mt-3"], "Ordered lists"),
178     H5Ol(["list-unstyled"],
179       H5Li("First item"),
180       H5Li("Second item"),
181       H5Li(
182         H5String("Third item"),
183         H5String("Sub-items:"),
184         H5Ol(
185           H5Li("First sub-item"),
186           H5Li("Second sub-item"),
187           H5Li("Third sub-item")
188         )
189       )
190     ),
191     H5Ol(["list-unstyled"],
192       H5Li("First item"),
193       H5Li("Second item"),
194       H5Li("Third item"),
195       H5Li(
196         H5String("Sub-items:"),
197         H5Ol(["list-unstyled"],
198           H5Li("First sub-item"),
199           H5Li("Second sub-item"),
200           H5Li("Third sub-item")
201         )
202       )
203     )
204   ), ``, ``);
205 
206 auto inlinelistsExample = demoBs5Example("inlinelists", "Inline lists", 
207   H5Div(
208     H5H5(["text-muted", "mt-3"], "Unordered lists"),
209     H5Ul(["list-inline"],
210       H5Li(["list-inline-item"], "First inline item"),
211       H5Li(["list-inline-item"], "Second inline item"),
212       H5Li(["list-inline-item"], "Third inline item")
213     ),
214     H5H5(["text-muted", "mt-3"], "Ordered lists"),
215     H5Ol(["list-inline"],
216       H5Li(["list-inline-item"], "First inline item"),
217       H5Li(["list-inline-item"], "Second inline item"),
218       H5Li(["list-inline-item"], "Third inline item")
219     )
220   ), ``, ``);
221 
222 auto descriptionExample = demoBs5Example("description", "Description lists", 
223   H5Div(
224     H5Dl(["row"],
225       H5Dt(["col-md-3"], "Term"),
226       H5Dd(["col-md-9"], "Description"),
227       H5Dt(["col-md-3", "text-truncate"], "Very long and truncated term"),
228       H5Dd(["col-md-9"], "Description"),
229       H5Dt(["col-md-3"], "Term"),
230       H5Dd(["col-md-9"],
231         H5Dl(["row"],
232           H5Dt(["col-md-4"], "Nested term"),
233           H5Dd(["col-md-8"], "Nested description"),
234           H5Dt(["col-md-4 text-truncate"], "Very long and truncated term"),
235           H5Dd(["col-md-8"], "Nested description")
236         )
237       )
238     )
239   ), ``, ``); 
240 
241       return 
242 H5Main(["style":"margin-top:70px;"], 
243   H5Div(["container-fluid", "mt-3", "bg-light"],
244     bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/contents"], 
245     ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Contents"], "Typography")),
246 
247   BS5Container(["mt-3"]).row(
248     H5Div(["col-12", "col-lg-2"], 
249       listLevels("basic"),
250       listAreas("basic", "contents"),
251       listSections("basic", "contents", "typography")),
252     H5Div(["col-12", "col-lg-8"], 
253       dateInfo(this),
254       H5H2(["display-4"], "Typography"),
255       H5Hr,
256 
257       elementsExample,
258       classesExample,
259       secondaryExample,
260       displayExample,
261       leadExample,
262       inlineExample,
263       inlinestylesExample,
264       abbreviationsExample,
265       blockquotesExample,
266       unstyledExample,
267       inlinelistsExample,
268       descriptionExample
269 
270     ),
271     H5Div(["col-12", "col-lg-2"]))).toString;
272     }
273   });
274 }
275