1 module source.uim.bootstrap.bs5.demos.utilities.spacing; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("basic/utilities/spacing", 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": "Spacing - Bootstrap 5 Demo", 14 ]); 15 } 16 17 override string content() { 18 return 19 H5Main(["style":"margin-top:70px;"], 20 H5Div(["container-fluid", "mt-3", "bg-light"], 21 bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/utilities"], 22 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Utilities"], "Sizing")), 23 BS5Container(["mt-3"]).row( 24 H5Div(["col-12", "col-lg-2"], 25 listLevels("basic"), 26 listAreas("basic", "utilities"), 27 listSections("basic", "utilities", "spacing")), 28 H5Div(["col-12", "col-lg-8"], 29 dateInfo(this), 30 H5H2(["display-4"], "Sizing"), 31 H5Hr, 32 ), 33 H5Div(["col-12", "col-lg-2"]))).toString; 34 } 35 }); 36 } 37 /* H5Div(["container mt-3"] 38 H5Div(["row"] 39 H5Div(["col-12 col-lg-2"] 40 ) 41 H5Div(["col-12 col-lg-8"] 42 <h2 ["component display-4"]Spacing</h2> 43 <hr> 44 45 H5Div(["mb-5"] 46 <h3 ["text-muted"]Notation", 47 H5Div( 48 <pre>{property}{sides}-{size} for all breakpoints 49 {property}{sides}-{breakpoint}-{size} for specific breakpoints and up 50 51 Properties: 52 m - margin 53 p - padding 54 55 Sides: 56 t - top 57 e - right (end) 58 b - bottom 59 s - left (start) 60 x - left and right 61 y - top and bottom 62 [blank] - all four sides 63 64 Breakpoints: 65 sm - small 66 md - medium 67 lg - large 68 xl - extra large 69 xxl - extra extra large 70 71 Sizes: 72 0 - 0 73 1 - 0.25rem 74 2 - 0.5rem 75 3 - 1rem 76 4 - 1.5rem 77 5 - 3rem 78 auto - auto (only for margins) 79 n1 - -0.25rem (only for margins and disabled by default) 80 n2 - -0.5rem (only for margins and disabled by default) 81 n3 - -1rem (only for margins and disabled by default) 82 n4 - -1.5rem (only for margins and disabled by default) 83 n5 - -3rem (only for margins and disabled by default)</pre> 84 ) 85 ) 86 87 H5Div(["mb-5" data-css='div:not(.d-grid) { 	border: 5px solid #dee2e6; 	background-image:linear-gradient(to bottom, #f5f5f5 0%, #f5f5f5 100%), linear-gradient(to bottom, #bbbcbc 0%, #bbbcbc 100%); 	background-clip: content-box, padding-box; }'> 88 <h3 ["text-muted"]Margin", 89 H5Div( 90 H5H5(["text-muted", "mt-3"], "Top") 91 H5Div(["mt-1"]mt-1) 92 H5Div(["mt-2"]mt-2) 93 H5Div(["mt-3"]mt-3) 94 H5Div(["mt-4"]mt-4) 95 H5Div(["mt-5"]mt-5) 96 H5H5(["text-muted", "mt-3"], "Right") 97 H5Div(["me-1"]me-1) 98 H5Div(["me-2"]me-2) 99 H5Div(["me-3"]me-3) 100 H5Div(["me-4"]me-4) 101 H5Div(["me-5"]me-5) 102 H5H5(["text-muted", "mt-3"], "Bottom") 103 H5Div(["mb-1"]mb-1) 104 H5Div(["mb-2"]mb-2) 105 H5Div(["mb-3"]mb-3) 106 H5Div(["mb-4"]mb-4) 107 H5Div(["mb-5"]mb-5) 108 H5H5(["text-muted", "mt-3"], "Left") 109 H5Div(["ms-1"]ms-1) 110 H5Div(["ms-2"]ms-2) 111 H5Div(["ms-3"]ms-3) 112 H5Div(["ms-4"]ms-4) 113 H5Div(["ms-5"]ms-5) 114 H5H5(["text-muted", "mt-3"], "Horizontal") 115 H5Div(["mx-1"]mx-1) 116 H5Div(["mx-2"]mx-2) 117 H5Div(["mx-3"]mx-3) 118 H5Div(["mx-4"]mx-4) 119 H5Div(["mx-5"]mx-5) 120 H5H5(["text-muted", "mt-3"], "Vertical") 121 H5Div(["my-1"]my-1) 122 H5Div(["my-2"]my-2) 123 H5Div(["my-3"]my-3) 124 H5Div(["my-4"]my-4) 125 H5Div(["my-5"]my-5) 126 H5H5(["text-muted", "mt-3"], "All sides") 127 H5Div(["m-1"]m-1) 128 H5Div(["m-2"]m-2) 129 H5Div(["m-3"]m-3) 130 H5Div(["m-4"]m-4) 131 H5Div(["m-5"]m-5) 132 ) 133 ) 134 135 H5Div(["mb-5" data-css='div:not(.d-grid) { 	border: 5px solid #dee2e6; 	background-image:linear-gradient(to bottom, #f5f5f5 0%, #f5f5f5 100%), linear-gradient(to bottom, #bbbcbc 0%, #bbbcbc 100%); 	background-clip: content-box, padding-box; }'> 136 <h3 ["text-muted"]Auto margin examples", 137 H5Div( 138 H5H5(["text-muted", "mt-3"], "Auto margin left") 139 H5Div(["w-50 ms-auto"]ms-auto) 140 H5H5(["text-muted", "mt-3"], "Horizontal centering") 141 H5Div(["w-50 mx-auto"]mx-auto) 142 ) 143 ) 144 145 H5Div(["mb-5" data-css='div:not(.d-grid) { 	border: 5px solid #dee2e6; 	background-image:linear-gradient(to bottom, #f5f5f5 0%, #f5f5f5 100%), linear-gradient(to bottom, #bbbcbc 0%, #bbbcbc 100%); 	background-clip: content-box, padding-box; }'> 146 <h3 ["text-muted"]Padding", 147 H5Div( 148 H5H5(["text-muted", "mt-3"], "Top") 149 H5Div(["pt-1"]pt-1) 150 H5Div(["pt-2"]pt-2) 151 H5Div(["pt-3"]pt-3) 152 H5Div(["pt-4"]pt-4) 153 H5Div(["pt-5"]pt-5) 154 H5H5(["text-muted", "mt-3"], "Right") 155 H5Div(["pe-1"]pe-1) 156 H5Div(["pe-2"]pe-2) 157 H5Div(["pe-3"]pe-3) 158 H5Div(["pe-4"]pe-4) 159 H5Div(["pe-5"]pe-5) 160 H5H5(["text-muted", "mt-3"], "Bottom") 161 H5Div(["pb-1"]pb-1) 162 H5Div(["pb-2"]pb-2) 163 H5Div(["pb-3"]pb-3) 164 H5Div(["pb-4"]pb-4) 165 H5Div(["pb-5"]pb-5) 166 H5H5(["text-muted", "mt-3"], "Left") 167 H5Div(["ps-1"]ps-1) 168 H5Div(["ps-2"]ps-2) 169 H5Div(["ps-3"]ps-3) 170 H5Div(["ps-4"]ps-4) 171 H5Div(["ps-5"]ps-5) 172 H5H5(["text-muted", "mt-3"], "Horizontal") 173 H5Div(["px-1"]px-1) 174 H5Div(["px-2"]px-2) 175 H5Div(["px-3"]px-3) 176 H5Div(["px-4"]px-4) 177 H5Div(["px-5"]px-5) 178 H5H5(["text-muted", "mt-3"], "Vertical") 179 H5Div(["py-1"]py-1) 180 H5Div(["py-2"]py-2) 181 H5Div(["py-3"]py-3) 182 H5Div(["py-4"]py-4) 183 H5Div(["py-5"]py-5) 184 H5H5(["text-muted", "mt-3"], "All sides") 185 H5Div(["p-1"]p-1) 186 H5Div(["p-2"]p-2) 187 H5Div(["p-3"]p-3) 188 H5Div(["p-4"]p-4) 189 H5Div(["p-5"]p-5) 190 ) 191 ) 192 193 H5Div(["mb-5" data-css='div:not(.d-grid) { 	border: 5px solid #dee2e6; 	background-image:linear-gradient(to bottom, #f5f5f5 0%, #f5f5f5 100%), linear-gradient(to bottom, #bbbcbc 0%, #bbbcbc 100%); 	background-clip: content-box, padding-box; }'> 194 <h3 ["text-muted"]Responsive examples", 195 H5Div( 196 H5H5(["text-muted", "mt-3"], "Margin") 197 H5Div(["ms-0"]ms-0) 198 H5Div(["ms-sm-1"]ms-sm-1) 199 H5Div(["ms-md-2"]ms-md-2) 200 H5Div(["ms-lg-3"]ms-lg-3) 201 H5Div(["ms-xl-4"]ms-xl-4) 202 H5Div(["ms-xxl-5"]ms-xxl-5) 203 H5H5(["text-muted", "mt-3"], "Padding") 204 H5Div(["ps-0"]ps-0) 205 H5Div(["ps-sm-1"]ps-sm-1) 206 H5Div(["ps-md-2"]ps-md-3) 207 H5Div(["ps-lg-3"]ps-lg-3) 208 H5Div(["ps-xl-4"]ps-xl-4) 209 H5Div(["ps-xxl-5"]ps-xxl-5) 210 ) 211 ) 212 213 H5Div(["mb-5" data-css='div:not(.d-grid) { 	border: 5px solid #dee2e6; 	background-image:linear-gradient(to bottom, #f5f5f5 0%, #f5f5f5 100%), linear-gradient(to bottom, #bbbcbc 0%, #bbbcbc 100%); 	background-clip: content-box, padding-box; }'> 214 <h3 ["text-muted"]Gap", 215 H5Div( 216 H5H5(["text-muted", "mt-3"], "Gap size 1") 217 H5Div(["d-grid gap-1"] 218 H5Div(Grid item 1) 219 H5Div(Grid item 2) 220 H5Div(Grid item 3) 221 ) 222 H5H5(["text-muted", "mt-3"], "Gap size 2") 223 H5Div(["d-grid gap-2"] 224 H5Div(Grid item 1) 225 H5Div(Grid item 2) 226 H5Div(Grid item 3) 227 ) 228 H5H5(["text-muted", "mt-3"], "Gap size 3") 229 H5Div(["d-grid gap-3"] 230 H5Div(Grid item 1) 231 H5Div(Grid item 2) 232 H5Div(Grid item 3) 233 ) 234 H5H5(["text-muted", "mt-3"], "Gap size 4") 235 H5Div(["d-grid gap-4"] 236 H5Div(Grid item 1) 237 H5Div(Grid item 2) 238 H5Div(Grid item 3) 239 ) 240 H5H5(["text-muted", "mt-3"], "Gap size 5") 241 H5Div(["d-grid gap-5"] 242 H5Div(Grid item 1) 243 H5Div(Grid item 2) 244 H5Div(Grid item 3) 245 ) 246 ) 247 ) 248 249 ) 250 ) 251 ) 252 </main> 253 */