1 module uim.bootstrap.bs5.demos.examples.grid; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("examples/grid", 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": "Starter Page - Bootstrap 5 Demo", 14 ]) 15 .styles(`.themed-grid-col { 16 padding-top: .75rem; 17 padding-bottom: .75rem; 18 background-color: rgba(86, 61, 124, .15); 19 border: 1px solid rgba(86, 61, 124, .2); 20 } 21 22 .themed-container { 23 padding: .75rem; 24 margin-bottom: 1.5rem; 25 background-color: rgba(0, 123, 255, .15); 26 border: 1px solid rgba(0, 123, 255, .2); 27 } 28 29 .bd-placeholder-img { 30 font-size: 1.125rem; 31 text-anchor: middle; 32 -webkit-user-select: none; 33 -moz-user-select: none; 34 user-select: none; 35 } 36 37 @media (min-width: 768px) { 38 .bd-placeholder-img-lg { 39 font-size: 3.5rem; 40 } 41 }`).styles(["href":"grid.css", "rel":"stylesheet"]); 42 } 43 44 override string content() { 45 // <body class="py-4"> 46 47 return 48 H5Main( 49 50 H5Div(["container"], 51 52 H5H1("Bootstrap grid examples"), 53 H5P(["lead"], "Basic grid layouts to get you familiar with building within the Bootstrap grid system."), 54 H5P("In these examples the .themed-grid-col class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default."), 55 56 H5H2(["mt-4"], "Five grid tiers"), 57 H5P("There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden."), 58 59 H5Div(["row mb-3"], 60 H5Div(["col-4 themed-grid-col"], ".col-4"), 61 H5Div(["col-4 themed-grid-col"], ".col-4"), 62 H5Div(["col-4 themed-grid-col"], ".col-4") 63 ), 64 65 H5Div(["row mb-3"], 66 H5Div(["col-sm-4 themed-grid-col"], ".col-sm-4"), 67 H5Div(["col-sm-4 themed-grid-col"], ".col-sm-4"), 68 H5Div(["col-sm-4 themed-grid-col"], ".col-sm-4") 69 ), 70 71 H5Div(["row mb-3"], 72 H5Div(["col-md-4 themed-grid-col"], ".col-md-4"), 73 H5Div(["col-md-4 themed-grid-col"], ".col-md-4"), 74 H5Div(["col-md-4 themed-grid-col"], ".col-md-4") 75 ), 76 77 H5Div(["row mb-3"], 78 H5Div(["col-lg-4 themed-grid-col"], ".col-lg-4"), 79 H5Div(["col-lg-4 themed-grid-col"], ".col-lg-4"), 80 H5Div(["col-lg-4 themed-grid-col"], ".col-lg-4") 81 ), 82 83 H5Div(["row mb-3"], 84 H5Div(["col-xl-4 themed-grid-col"], ".col-xl-4"), 85 H5Div(["col-xl-4 themed-grid-col"], ".col-xl-4"), 86 H5Div(["col-xl-4 themed-grid-col"], ".col-xl-4") 87 ), 88 89 H5Div(["row mb-3"], 90 H5Div(["col-xxl-4 themed-grid-col"], ".col-xxl-4"), 91 H5Div(["col-xxl-4 themed-grid-col"], ".col-xxl-4"), 92 H5Div(["col-xxl-4 themed-grid-col"], ".col-xxl-4") 93 ), 94 95 H5H2(["mt-4"], "Three equal columns"), 96 H5P("Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack."), 97 H5Div(["row mb-3"], 98 H5Div(["col-md-4 themed-grid-col"], ".col-md-4"), 99 H5Div(["col-md-4 themed-grid-col"], ".col-md-4"), 100 H5Div(["col-md-4 themed-grid-col"], ".col-md-4") 101 ), 102 103 H5H2(["mt-4"], "Three equal columns alternative"), 104 H5P("By using the .row-cols-* classes, you can easily create a grid with equal columns."), 105 H5Div(["row row-cols-md-3 mb-3"], 106 H5Div(["col themed-grid-col"], `H5Code(".col") child of H5Code(".row-cols-md-3")`), 107 H5Div(["col themed-grid-col"], `H5Code(".col") child of H5Code(".row-cols-md-3")`), 108 H5Div(["col themed-grid-col"], `H5Code(".col") child of H5Code(".row-cols-md-3")`) 109 ), 110 111 H5H2(["mt-4"], "Three unequal columns"), 112 H5P("Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport."), 113 H5Div(["row mb-3"], 114 H5Div(["col-md-3 themed-grid-col"], ".col-md-3"), 115 H5Div(["col-md-6 themed-grid-col"], ".col-md-6"), 116 H5Div(["col-md-3 themed-grid-col"], ".col-md-3") 117 ), 118 119 H5H2(["mt-4"], "Two columns"), 120 H5P("Get two columns <strong>starting at desktops and scaling to large desktops"), 121 H5Div(["row mb-3"], 122 H5Div(["col-md-8 themed-grid-col"], ".col-md-8"), 123 H5Div(["col-md-4 themed-grid-col"], ".col-md-4") 124 ), 125 126 H5H2(["mt-4"], "Full width, single column"), 127 H5P(["text-warning"], "No grid classes are necessary for full-width elements."), 128 129 H5Hr(["my-4"]), 130 131 H5H2(["mt-4"], "Two columns with two nested columns"), 132 H5P("Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns <strong>starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column."), 133 H5P("At mobile device sizes, tablets and down, these columns and their nested columns will stack."), 134 H5Div(["row mb-3"], 135 H5Div(["col-md-8 themed-grid-col"], 136 H5Div(["pb-3"], ".col-md-8"), 137 H5Div(["row"], 138 H5Div(["col-md-6 themed-grid-col"], ".col-md-6"), 139 H5Div(["col-md-6 themed-grid-col"], ".col-md-6") 140 ) 141 ), 142 H5Div(["col-md-4 themed-grid-col"], ".col-md-4") 143 ), 144 145 H5Hr(["my-4"]), 146 147 H5H2(["mt-4"], "Mixed: mobile and desktop"), 148 H5P("The Bootstrap v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts."), 149 H5P("Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg and xl, you only need to specify md."), 150 H5Div(["row mb-3"], 151 H5Div(["col-md-8 themed-grid-col"], ".col-md-8"), 152 H5Div(["col-6 col-md-4 themed-grid-col"], ".col-6 .col-md-4") 153 ), 154 H5Div(["row mb-3"], 155 H5Div(["col-6 col-md-4 themed-grid-col"], ".col-6 .col-md-4"), 156 H5Div(["col-6 col-md-4 themed-grid-col"], ".col-6 .col-md-4"), 157 H5Div(["col-6 col-md-4 themed-grid-col"], ".col-6 .col-md-4") 158 ), 159 H5Div(["row mb-3"], 160 H5Div(["col-6 themed-grid-col"], ".col-6"), 161 H5Div(["col-6 themed-grid-col"], ".col-6") 162 ), 163 164 H5Hr(["my-4"]), 165 166 H5H2(["mt-4"], "Mixed: mobile, tablet, and desktop"), 167 H5Div(["row mb-3"], 168 H5Div(["col-sm-6 col-lg-8 themed-grid-col"], ".col-sm-6 .col-lg-8"), 169 H5Div(["col-6 col-lg-4 themed-grid-col"], ".col-6 .col-lg-4") 170 ), 171 H5Div(["row mb-3"], 172 H5Div(["col-6 col-sm-4 themed-grid-col"], ".col-6 .col-sm-4"), 173 H5Div(["col-6 col-sm-4 themed-grid-col"], ".col-6 .col-sm-4"), 174 H5Div(["col-6 col-sm-4 themed-grid-col"], ".col-6 .col-sm-4") 175 ), 176 177 H5Hr(["my-4"]), 178 179 H5H2(["mt-4"], "Gutters"), 180 H5P("With .gx-* classes, the horizontal gutters can be adjusted."), 181 H5Div(["row row-cols-1 row-cols-md-3 gx-4"], 182 H5Div(["col themed-grid-col"], `H5Code(".col") with H5Code(".gx-4") gutters`), 183 H5Div(["col themed-grid-col"], `H5Code(".col") with H5Code(".gx-4") gutters`), 184 H5Div(["col themed-grid-col"], `H5Code(".col") with H5Code(".gx-4") gutters`), 185 H5Div(["col themed-grid-col"], `H5Code(".col") with H5Code(".gx-4") gutters`), 186 H5Div(["col themed-grid-col"], `H5Code(".col") with H5Code(".gx-4") gutters`), 187 H5Div(["col themed-grid-col"], `H5Code(".col") with H5Code(".gx-4") gutters`) 188 ), 189 H5P(["mt-4"], "Use the .gy-* classes to control the vertical gutters."), 190 H5Div(["row row-cols-1 row-cols-md-3 gy-4"], 191 H5Div(["col themed-grid-col"], `H5Code(".col") with H5Code(".gy-4") gutters`), 192 H5Div(["col themed-grid-col"], `H5Code(".col") with H5Code(".gy-4") gutters`), 193 H5Div(["col themed-grid-col"], `H5Code(".col") with H5Code(".gy-4") gutters`), 194 H5Div(["col themed-grid-col"], `H5Code(".col") with H5Code(".gy-4") gutters`), 195 H5Div(["col themed-grid-col"], `H5Code(".col") with H5Code(".gy-4") gutters`), 196 H5Div(["col themed-grid-col"], `H5Code(".col") with H5Code(".gy-4") gutters`) 197 ), 198 H5P(["mt-4"], "With .g-* classes, the gutters in both directions can be adjusted."), 199 H5Div(["row row-cols-1 row-cols-md-3 g-3"], 200 H5Div(["col themed-grid-col"], `H5Code(".col") with H5Code(".g-3") gutters`), 201 H5Div(["col themed-grid-col"], `H5Code(".col") with H5Code(".g-3") gutters`), 202 H5Div(["col themed-grid-col"], `H5Code(".col") with H5Code(".g-3") gutters`), 203 H5Div(["col themed-grid-col"], `H5Code(".col") with H5Code(".g-3") gutters`), 204 H5Div(["col themed-grid-col"], `H5Code(".col") with H5Code(".g-3") gutters`), 205 H5Div(["col themed-grid-col"], `H5Code(".col") with H5Code(".g-3") gutters`) 206 ) 207 ), 208 209 H5Div("containers", ["container"], 210 H5Hr(["my-4"]), 211 212 H5H2(["mt-4"], "Containers"), 213 H5P("Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new xxl breakpoint.") 214 ), 215 216 H5Div(["container themed-container"], ".container"), 217 H5Div(["container-sm themed-container"], ".container-sm"), 218 H5Div(["container-md themed-container"], ".container-md"), 219 H5Div(["container-lg themed-container"], ".container-lg"), 220 H5Div(["container-xl themed-container"], ".container-xl"), 221 H5Div(["container-xxl themed-container"], ".container-xxl"), 222 H5Div(["container-fluid themed-container"], ".container-fluid") 223 ).toString; 224 225 } 226 }); 227 } 228