brut 0.0.21 → 0.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (689) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +24 -3
  3. data/.nvim.lua +1 -0
  4. data/Dockerfile.dx +12 -3
  5. data/Gemfile.lock +9 -7
  6. data/README.md +0 -7
  7. data/Rakefile +6 -4
  8. data/bin/dev +20 -0
  9. data/bin/docs +27 -0
  10. data/bin/setup +47 -1
  11. data/brut-css/.nvim.lua +1 -0
  12. data/brut-css/README.md +28 -0
  13. data/brut-css/bin/build +31 -0
  14. data/brut-css/bin/dev +1 -0
  15. data/brut-css/bin/docs +15 -0
  16. data/brut-css/bin/setup +5 -0
  17. data/brut-css/config/media-queries-all.css +15 -0
  18. data/brut-css/config/media-queries-minimal.css +5 -0
  19. data/brut-css/config/postcss.config.cjs +7 -0
  20. data/brut-css/config/pseudo-classes-all.css +9 -0
  21. data/brut-css/dx +1 -0
  22. data/brut-css/package-lock.json +3217 -0
  23. data/brut-css/package.json +36 -0
  24. data/brut-css/src/css/appearance.css +145 -0
  25. data/brut-css/src/css/border.css +522 -0
  26. data/brut-css/src/css/colors.css +3502 -0
  27. data/brut-css/src/css/dimensions.css +548 -0
  28. data/brut-css/src/css/flex.css +179 -0
  29. data/brut-css/src/css/index.css +13 -0
  30. data/brut-css/src/css/layout.css +120 -0
  31. data/brut-css/src/css/list.css +41 -0
  32. data/brut-css/src/css/positioning.css +354 -0
  33. data/brut-css/src/css/properties/colors.css +455 -0
  34. data/brut-css/src/css/properties/index.css +3 -0
  35. data/brut-css/src/css/properties/spacing.css +140 -0
  36. data/brut-css/src/css/properties/typography.css +224 -0
  37. data/brut-css/src/css/reset.css +107 -0
  38. data/brut-css/src/css/spacing.css +585 -0
  39. data/brut-css/src/css/typography.css +519 -0
  40. data/brut-css/src/css/utils.css +104 -0
  41. data/brut-css/src/docs/1_getting-started/1_overview.md +46 -0
  42. data/brut-css/src/docs/1_getting-started/2_installation.md +25 -0
  43. data/brut-css/src/docs/1_getting-started/3_core-concepts.md +75 -0
  44. data/brut-css/src/docs/1_getting-started/4_simple-example.md +132 -0
  45. data/brut-css/src/docs/1_getting-started/page.html.ejs +10 -0
  46. data/brut-css/src/docs/2_properties/page.html.ejs +71 -0
  47. data/brut-css/src/docs/3_classes/color-demo.html.ejs +31 -0
  48. data/brut-css/src/docs/3_classes/page.html.ejs +87 -0
  49. data/brut-css/src/docs/4_customization/1_design-system.md +36 -0
  50. data/brut-css/src/docs/4_customization/2_breakpoints.md +75 -0
  51. data/brut-css/src/docs/4_customization/3_pseudo-classes.md +74 -0
  52. data/brut-css/src/docs/4_customization/4_advanced-configuration.md +40 -0
  53. data/brut-css/src/docs/4_customization/page.html.ejs +10 -0
  54. data/brut-css/src/docs/docs.css +98 -0
  55. data/brut-css/src/docs/includes/body-and-header.html.ejs +30 -0
  56. data/brut-css/src/docs/includes/footer-and-rest.html.ejs +9 -0
  57. data/brut-css/src/docs/includes/head.html.ejs +5 -0
  58. data/brut-css/src/docs/includes/nav.html.ejs +10 -0
  59. data/brut-css/src/docs/index.html.ejs +32 -0
  60. data/brut-css/src/docs/prism-twilight.min.css +1 -0
  61. data/brut-css/src/js/Logger.js +71 -0
  62. data/brut-css/src/js/build.js +111 -0
  63. data/brut-css/src/js/cli/CLIArgError.js +7 -0
  64. data/brut-css/src/js/cli/Debug.js +27 -0
  65. data/brut-css/src/js/cli/DocsDir.js +16 -0
  66. data/brut-css/src/js/cli/DocsTemplateSourceDir.js +16 -0
  67. data/brut-css/src/js/cli/InputFile.js +31 -0
  68. data/brut-css/src/js/cli/MediaQueryConfigFile.js +10 -0
  69. data/brut-css/src/js/cli/OutputFile.js +22 -0
  70. data/brut-css/src/js/cli/ParsedArg.js +17 -0
  71. data/brut-css/src/js/cli/PathToBrutCSSRoot.js +19 -0
  72. data/brut-css/src/js/cli/PseudoClassConfigFile.js +11 -0
  73. data/brut-css/src/js/cli.js +108 -0
  74. data/brut-css/src/js/docGenerator.js +467 -0
  75. data/brut-css/src/js/mediaQueryConfigParser.js +98 -0
  76. data/brut-css/src/js/post-css-plugins/addMediaQueriesPlugin.js +49 -0
  77. data/brut-css/src/js/post-css-plugins/addPseudoClassesPlugin.js +42 -0
  78. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Category.js +9 -0
  79. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/DocState.js +185 -0
  80. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Documentable.js +8 -0
  81. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Group.js +7 -0
  82. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/ParsedComment.js +73 -0
  83. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Property.js +9 -0
  84. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/PropertyCategory.js +4 -0
  85. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/PropertyGroup.js +8 -0
  86. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Rule.js +12 -0
  87. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/RuleCategory.js +4 -0
  88. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/RuleGroup.js +8 -0
  89. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/SeeRef.js +5 -0
  90. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/SeeURL.js +9 -0
  91. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin.js +49 -0
  92. data/brut-css/src/js/post-css-plugins/generateRootCustomPropertiesPlugin.js +45 -0
  93. data/brut-css/src/js/pseudoClassConfigParser.js +145 -0
  94. data/brut-js/.projections.json +10 -0
  95. data/brut-js/README.md +118 -0
  96. data/brut-js/bin/build +10 -0
  97. data/brut-js/bin/ci +5 -0
  98. data/brut-js/bin/setup +5 -0
  99. data/brut-js/docs/README.md +8 -0
  100. data/brut-js/docs/jsdoc-plugins/customElementTag.js +8 -0
  101. data/brut-js/docs/jsdoc-theme/publish.js +692 -0
  102. data/brut-js/docs/jsdoc-theme/static/scripts/linenumber.js +25 -0
  103. data/brut-js/docs/jsdoc-theme/static/scripts/prettify/Apache-License-2.0.txt +202 -0
  104. data/brut-js/docs/jsdoc-theme/static/scripts/prettify/lang-css.js +2 -0
  105. data/brut-js/docs/jsdoc-theme/static/scripts/prettify/prettify.js +28 -0
  106. data/brut-js/docs/jsdoc-theme/static/styles/jsdoc-default.css +327 -0
  107. data/brut-js/docs/jsdoc-theme/static/styles/prettify-jsdoc.css +111 -0
  108. data/brut-js/docs/jsdoc-theme/static/styles/prettify-tomorrow.css +132 -0
  109. data/brut-js/docs/jsdoc-theme/tmpl/augments.tmpl +10 -0
  110. data/brut-js/docs/jsdoc-theme/tmpl/container.tmpl +199 -0
  111. data/brut-js/docs/jsdoc-theme/tmpl/details.tmpl +143 -0
  112. data/brut-js/docs/jsdoc-theme/tmpl/example.tmpl +2 -0
  113. data/brut-js/docs/jsdoc-theme/tmpl/examples.tmpl +13 -0
  114. data/brut-js/docs/jsdoc-theme/tmpl/exceptions.tmpl +32 -0
  115. data/brut-js/docs/jsdoc-theme/tmpl/layout.tmpl +38 -0
  116. data/brut-js/docs/jsdoc-theme/tmpl/mainpage.tmpl +14 -0
  117. data/brut-js/docs/jsdoc-theme/tmpl/members.tmpl +38 -0
  118. data/brut-js/docs/jsdoc-theme/tmpl/method.tmpl +131 -0
  119. data/brut-js/docs/jsdoc-theme/tmpl/modifies.tmpl +14 -0
  120. data/brut-js/docs/jsdoc-theme/tmpl/params.tmpl +131 -0
  121. data/brut-js/docs/jsdoc-theme/tmpl/properties.tmpl +108 -0
  122. data/brut-js/docs/jsdoc-theme/tmpl/returns.tmpl +19 -0
  123. data/brut-js/docs/jsdoc-theme/tmpl/source.tmpl +8 -0
  124. data/brut-js/docs/jsdoc-theme/tmpl/tutorial.tmpl +19 -0
  125. data/brut-js/docs/jsdoc-theme/tmpl/type.tmpl +7 -0
  126. data/brut-js/docs/jsdoc.config.json +23 -0
  127. data/brut-js/docs/package-lock.json +343 -0
  128. data/brut-js/docs/package.json +7 -0
  129. data/brut-js/package-lock.json +2171 -0
  130. data/brut-js/package.json +32 -0
  131. data/brut-js/specs/AjaxSubmit.spec.js +256 -0
  132. data/brut-js/specs/Autosubmit.spec.js +127 -0
  133. data/brut-js/specs/ConfirmSubmit.spec.js +193 -0
  134. data/brut-js/specs/ConstraintViolationMessage.spec.js +33 -0
  135. data/brut-js/specs/ConstraintViolationMessages.spec.js +29 -0
  136. data/brut-js/specs/CopyToClipboard.spec.js +35 -0
  137. data/brut-js/specs/Form.spec.js +181 -0
  138. data/brut-js/specs/I18nTranslation.spec.js +19 -0
  139. data/brut-js/specs/LocaleDetection.spec.js +22 -0
  140. data/brut-js/specs/Message.spec.js +15 -0
  141. data/brut-js/specs/SpecHelper.js +23 -0
  142. data/brut-js/specs/Tabs.spec.js +41 -0
  143. data/brut-js/specs/config/asset_metadata.json +7 -0
  144. data/brut-js/src/AjaxSubmit.js +384 -0
  145. data/brut-js/src/Autosubmit.js +63 -0
  146. data/brut-js/src/BaseCustomElement.js +261 -0
  147. data/brut-js/src/ConfirmSubmit.js +116 -0
  148. data/brut-js/src/ConfirmationDialog.js +143 -0
  149. data/brut-js/src/ConstraintViolationMessage.js +125 -0
  150. data/brut-js/src/ConstraintViolationMessages.js +98 -0
  151. data/brut-js/src/CopyToClipboard.js +96 -0
  152. data/brut-js/src/Form.js +151 -0
  153. data/brut-js/src/I18nTranslation.js +61 -0
  154. data/brut-js/src/LocaleDetection.js +117 -0
  155. data/brut-js/src/Logger.js +90 -0
  156. data/brut-js/src/Message.js +56 -0
  157. data/brut-js/src/RichString.js +113 -0
  158. data/brut-js/src/Tabs.js +168 -0
  159. data/brut-js/src/Tracing.js +247 -0
  160. data/brut-js/src/appForTestingOnly.js +15 -0
  161. data/brut-js/src/index.js +130 -0
  162. data/brut-js/src/testing/AssetMetadata.js +35 -0
  163. data/brut-js/src/testing/AssetMetadataLoader.js +25 -0
  164. data/brut-js/src/testing/CustomElementTest.js +235 -0
  165. data/brut-js/src/testing/DOMCreator.js +45 -0
  166. data/brut-js/src/testing/index.js +48 -0
  167. data/brutrb.com/.vitepress/config.mjs +106 -0
  168. data/brutrb.com/.vitepress/plugins/jsdocLinker.js +34 -0
  169. data/brutrb.com/.vitepress/plugins/rdocLinker.js +18 -0
  170. data/brutrb.com/.vitepress/theme/custom.css +7 -0
  171. data/brutrb.com/.vitepress/theme/index.js +18 -0
  172. data/brutrb.com/.vitepress/theme/style.css +149 -0
  173. data/brutrb.com/ai.md +68 -0
  174. data/brutrb.com/assets.md +138 -0
  175. data/brutrb.com/bin/build +5 -0
  176. data/brutrb.com/bin/deploy +7 -0
  177. data/brutrb.com/bin/dev +5 -0
  178. data/brutrb.com/bin/setup +5 -0
  179. data/brutrb.com/brut-js.md +117 -0
  180. data/brutrb.com/business-logic.md +55 -0
  181. data/brutrb.com/cli.md +278 -0
  182. data/brutrb.com/components.md +243 -0
  183. data/brutrb.com/configuration.md +257 -0
  184. data/brutrb.com/css.md +103 -0
  185. data/brutrb.com/custom-element-tests.md +149 -0
  186. data/brutrb.com/database-access.md +201 -0
  187. data/brutrb.com/database-schema.md +312 -0
  188. data/brutrb.com/deployment.md +66 -0
  189. data/brutrb.com/dev-environment.md +179 -0
  190. data/brutrb.com/doc-conventions.md +39 -0
  191. data/brutrb.com/end-to-end-tests.md +174 -0
  192. data/brutrb.com/flash-and-session.md +224 -0
  193. data/brutrb.com/forms.md +866 -0
  194. data/brutrb.com/getting-started.md +66 -0
  195. data/brutrb.com/handlers.md +153 -0
  196. data/brutrb.com/hooks.md +178 -0
  197. data/brutrb.com/i18n.md +188 -0
  198. data/brutrb.com/images/Makefile +10 -0
  199. data/brutrb.com/images/dev-env-overview.dot +54 -0
  200. data/brutrb.com/images/dev-env-overview.png +0 -0
  201. data/brutrb.com/images/dev-env-protocol.dot +37 -0
  202. data/brutrb.com/images/dev-env-protocol.png +0 -0
  203. data/brutrb.com/images/logo-300.png +0 -0
  204. data/brutrb.com/images/logo.png +0 -0
  205. data/brutrb.com/images/overview.graffle +0 -0
  206. data/brutrb.com/images/overview.png +0 -0
  207. data/brutrb.com/images/spa.dot +19 -0
  208. data/brutrb.com/images/spa.png +0 -0
  209. data/brutrb.com/images/workspace-protocol.dot +44 -0
  210. data/brutrb.com/images/workspace-protocol.png +0 -0
  211. data/brutrb.com/index.md +36 -0
  212. data/brutrb.com/instrumentation.md +183 -0
  213. data/brutrb.com/javascript.md +122 -0
  214. data/brutrb.com/jobs.md +14 -0
  215. data/brutrb.com/keyword-injection.md +237 -0
  216. data/brutrb.com/markdown-examples.md +85 -0
  217. data/brutrb.com/middleware.md +80 -0
  218. data/brutrb.com/not-released.md +5 -0
  219. data/brutrb.com/overview.md +404 -0
  220. data/brutrb.com/package-lock.json +2404 -0
  221. data/brutrb.com/package.json +11 -0
  222. data/brutrb.com/pages.md +378 -0
  223. data/brutrb.com/public/images/logo-300.png +0 -0
  224. data/brutrb.com/public/images/logo.png +0 -0
  225. data/brutrb.com/routes.md +215 -0
  226. data/brutrb.com/security.md +105 -0
  227. data/brutrb.com/seed-data.md +63 -0
  228. data/brutrb.com/space-time-continuum.md +85 -0
  229. data/brutrb.com/tutorial.md +3 -0
  230. data/brutrb.com/unit-tests.md +148 -0
  231. data/docker-compose.dx.yml +6 -3
  232. data/docs/404.html +21 -0
  233. data/docs/CNAME +1 -0
  234. data/docs/ai.html +24 -0
  235. data/docs/api/Brut/BackEnd/SeedData.html +493 -0
  236. data/docs/api/Brut/BackEnd/Sidekiq/Middlewares/Server/FlushSpans.html +214 -0
  237. data/docs/api/Brut/BackEnd/Sidekiq/Middlewares/Server.html +125 -0
  238. data/docs/api/Brut/BackEnd/Sidekiq/Middlewares.html +125 -0
  239. data/docs/api/Brut/BackEnd/Sidekiq.html +125 -0
  240. data/docs/api/Brut/BackEnd/Validators/FormValidator.html +414 -0
  241. data/docs/api/Brut/BackEnd/Validators.html +128 -0
  242. data/docs/api/Brut/BackEnd.html +132 -0
  243. data/docs/api/Brut/CLI/App.html +1576 -0
  244. data/docs/api/Brut/CLI/AppRunner.html +491 -0
  245. data/docs/api/Brut/CLI/Apps/BuildAssets/All.html +264 -0
  246. data/docs/api/Brut/CLI/Apps/BuildAssets/CSS.html +306 -0
  247. data/docs/api/Brut/CLI/Apps/BuildAssets/Images.html +262 -0
  248. data/docs/api/Brut/CLI/Apps/BuildAssets/JS.html +314 -0
  249. data/docs/api/Brut/CLI/Apps/BuildAssets.html +183 -0
  250. data/docs/api/Brut/CLI/Apps/DB/Create.html +365 -0
  251. data/docs/api/Brut/CLI/Apps/DB/Drop.html +357 -0
  252. data/docs/api/Brut/CLI/Apps/DB/Migrate.html +383 -0
  253. data/docs/api/Brut/CLI/Apps/DB/NewMigration.html +335 -0
  254. data/docs/api/Brut/CLI/Apps/DB/Rebuild.html +329 -0
  255. data/docs/api/Brut/CLI/Apps/DB/Seed.html +347 -0
  256. data/docs/api/Brut/CLI/Apps/DB/Status.html +383 -0
  257. data/docs/api/Brut/CLI/Apps/DB.html +183 -0
  258. data/docs/api/Brut/CLI/Apps/Scaffold/Action/Route.html +303 -0
  259. data/docs/api/Brut/CLI/Apps/Scaffold/Action.html +512 -0
  260. data/docs/api/Brut/CLI/Apps/Scaffold/Component.html +398 -0
  261. data/docs/api/Brut/CLI/Apps/Scaffold/CustomElementTest.html +374 -0
  262. data/docs/api/Brut/CLI/Apps/Scaffold/E2ETest.html +410 -0
  263. data/docs/api/Brut/CLI/Apps/Scaffold/Form.html +262 -0
  264. data/docs/api/Brut/CLI/Apps/Scaffold/Page/Route.html +303 -0
  265. data/docs/api/Brut/CLI/Apps/Scaffold/Page.html +480 -0
  266. data/docs/api/Brut/CLI/Apps/Scaffold/RoutesEditor.html +450 -0
  267. data/docs/api/Brut/CLI/Apps/Scaffold/Test.html +380 -0
  268. data/docs/api/Brut/CLI/Apps/Scaffold.html +253 -0
  269. data/docs/api/Brut/CLI/Apps/Test/Audit.html +464 -0
  270. data/docs/api/Brut/CLI/Apps/Test/E2e.html +407 -0
  271. data/docs/api/Brut/CLI/Apps/Test/JS.html +262 -0
  272. data/docs/api/Brut/CLI/Apps/Test/Run.html +578 -0
  273. data/docs/api/Brut/CLI/Apps/Test.html +253 -0
  274. data/docs/api/Brut/CLI/Apps.html +125 -0
  275. data/docs/api/Brut/CLI/Command.html +2342 -0
  276. data/docs/api/Brut/CLI/Error.html +139 -0
  277. data/docs/api/Brut/CLI/ExecutionResults/Result.html +664 -0
  278. data/docs/api/Brut/CLI/ExecutionResults.html +675 -0
  279. data/docs/api/Brut/CLI/Executor.html +430 -0
  280. data/docs/api/Brut/CLI/InvalidOption.html +245 -0
  281. data/docs/api/Brut/CLI/Options.html +753 -0
  282. data/docs/api/Brut/CLI/Output.html +699 -0
  283. data/docs/api/Brut/CLI/SystemExecError.html +451 -0
  284. data/docs/api/Brut/CLI.html +263 -0
  285. data/docs/api/Brut/FactoryBot.html +225 -0
  286. data/docs/api/Brut/Framework/App.html +1097 -0
  287. data/docs/api/Brut/Framework/Config.html +1045 -0
  288. data/docs/api/Brut/Framework/Container.html +1379 -0
  289. data/docs/api/Brut/Framework/Error.html +140 -0
  290. data/docs/api/Brut/Framework/Errors/AbstractMethod.html +144 -0
  291. data/docs/api/Brut/Framework/Errors/Bug.html +234 -0
  292. data/docs/api/Brut/Framework/Errors/MissingConfiguration.html +257 -0
  293. data/docs/api/Brut/Framework/Errors/MissingParameter.html +273 -0
  294. data/docs/api/Brut/Framework/Errors/NoClassForPath.html +471 -0
  295. data/docs/api/Brut/Framework/Errors/NotFound.html +308 -0
  296. data/docs/api/Brut/Framework/Errors/NotImplemented.html +234 -0
  297. data/docs/api/Brut/Framework/Errors.html +328 -0
  298. data/docs/api/Brut/Framework/FussyTypeEnforcement.html +392 -0
  299. data/docs/api/Brut/Framework/MCP.html +861 -0
  300. data/docs/api/Brut/Framework/ProjectEnvironment.html +648 -0
  301. data/docs/api/Brut/Framework.html +129 -0
  302. data/docs/api/Brut/FrontEnd/AssetPathResolver.html +317 -0
  303. data/docs/api/Brut/FrontEnd/Component/Helpers.html +326 -0
  304. data/docs/api/Brut/FrontEnd/Component.html +365 -0
  305. data/docs/api/Brut/FrontEnd/Components/ConstraintViolations.html +470 -0
  306. data/docs/api/Brut/FrontEnd/Components/FormTag.html +518 -0
  307. data/docs/api/Brut/FrontEnd/Components/I18nTranslations.html +317 -0
  308. data/docs/api/Brut/FrontEnd/Components/Input.html +195 -0
  309. data/docs/api/Brut/FrontEnd/Components/Inputs/CsrfToken.html +339 -0
  310. data/docs/api/Brut/FrontEnd/Components/Inputs/InputTag.html +660 -0
  311. data/docs/api/Brut/FrontEnd/Components/Inputs/RadioButton.html +417 -0
  312. data/docs/api/Brut/FrontEnd/Components/Inputs/SelectTagWithOptions.html +918 -0
  313. data/docs/api/Brut/FrontEnd/Components/Inputs/TextareaTag.html +651 -0
  314. data/docs/api/Brut/FrontEnd/Components/Inputs.html +125 -0
  315. data/docs/api/Brut/FrontEnd/Components/LocaleDetection.html +367 -0
  316. data/docs/api/Brut/FrontEnd/Components/PageIdentifier.html +336 -0
  317. data/docs/api/Brut/FrontEnd/Components/TimeTag.html +655 -0
  318. data/docs/api/Brut/FrontEnd/Components/Traceparent.html +352 -0
  319. data/docs/api/Brut/FrontEnd/Components.html +135 -0
  320. data/docs/api/Brut/FrontEnd/Download.html +467 -0
  321. data/docs/api/Brut/FrontEnd/Flash.html +1150 -0
  322. data/docs/api/Brut/FrontEnd/Form.html +1157 -0
  323. data/docs/api/Brut/FrontEnd/Forms/ConstraintViolation.html +634 -0
  324. data/docs/api/Brut/FrontEnd/Forms/Input.html +615 -0
  325. data/docs/api/Brut/FrontEnd/Forms/InputDeclarations.html +547 -0
  326. data/docs/api/Brut/FrontEnd/Forms/InputDefinition.html +1318 -0
  327. data/docs/api/Brut/FrontEnd/Forms/RadioButtonGroupInput.html +609 -0
  328. data/docs/api/Brut/FrontEnd/Forms/RadioButtonGroupInputDefinition.html +587 -0
  329. data/docs/api/Brut/FrontEnd/Forms/SelectInput.html +613 -0
  330. data/docs/api/Brut/FrontEnd/Forms/SelectInputDefinition.html +582 -0
  331. data/docs/api/Brut/FrontEnd/Forms/ValidityState.html +609 -0
  332. data/docs/api/Brut/FrontEnd/Forms.html +127 -0
  333. data/docs/api/Brut/FrontEnd/GenericResponse.html +377 -0
  334. data/docs/api/Brut/FrontEnd/Handler.html +442 -0
  335. data/docs/api/Brut/FrontEnd/Handlers/CspReportingHandler.html +318 -0
  336. data/docs/api/Brut/FrontEnd/Handlers/InstrumentationHandler/TraceParent.html +336 -0
  337. data/docs/api/Brut/FrontEnd/Handlers/InstrumentationHandler.html +399 -0
  338. data/docs/api/Brut/FrontEnd/Handlers/LocaleDetectionHandler.html +354 -0
  339. data/docs/api/Brut/FrontEnd/Handlers/MissingHandler/Form.html +151 -0
  340. data/docs/api/Brut/FrontEnd/Handlers/MissingHandler.html +315 -0
  341. data/docs/api/Brut/FrontEnd/Handlers.html +125 -0
  342. data/docs/api/Brut/FrontEnd/HandlingResults.html +339 -0
  343. data/docs/api/Brut/FrontEnd/HttpMethod.html +661 -0
  344. data/docs/api/Brut/FrontEnd/HttpStatus.html +496 -0
  345. data/docs/api/Brut/FrontEnd/InlineSvgLocator.html +284 -0
  346. data/docs/api/Brut/FrontEnd/Layout.html +318 -0
  347. data/docs/api/Brut/FrontEnd/Middleware.html +135 -0
  348. data/docs/api/Brut/FrontEnd/Middlewares/AnnotateBrutOwnedPaths.html +288 -0
  349. data/docs/api/Brut/FrontEnd/Middlewares/Favicon.html +292 -0
  350. data/docs/api/Brut/FrontEnd/Middlewares/OpenTelemetrySpan.html +324 -0
  351. data/docs/api/Brut/FrontEnd/Middlewares/ReloadApp.html +372 -0
  352. data/docs/api/Brut/FrontEnd/Middlewares.html +125 -0
  353. data/docs/api/Brut/FrontEnd/Page.html +773 -0
  354. data/docs/api/Brut/FrontEnd/Pages/MissingPage.html +797 -0
  355. data/docs/api/Brut/FrontEnd/Pages.html +125 -0
  356. data/docs/api/Brut/FrontEnd/RequestContext.html +1312 -0
  357. data/docs/api/Brut/FrontEnd/RouteHook.html +424 -0
  358. data/docs/api/Brut/FrontEnd/RouteHooks/AgeFlash.html +242 -0
  359. data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineScripts.html +249 -0
  360. data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineStylesOrScripts/ReportOnly.html +264 -0
  361. data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineStylesOrScripts.html +261 -0
  362. data/docs/api/Brut/FrontEnd/RouteHooks/LocaleDetection.html +284 -0
  363. data/docs/api/Brut/FrontEnd/RouteHooks/SetupRequestContext.html +252 -0
  364. data/docs/api/Brut/FrontEnd/RouteHooks.html +115 -0
  365. data/docs/api/Brut/FrontEnd/Routing/FormHandlerRoute.html +227 -0
  366. data/docs/api/Brut/FrontEnd/Routing/FormRoute.html +305 -0
  367. data/docs/api/Brut/FrontEnd/Routing/MissingForm.html +324 -0
  368. data/docs/api/Brut/FrontEnd/Routing/MissingHandler.html +319 -0
  369. data/docs/api/Brut/FrontEnd/Routing/MissingPage.html +315 -0
  370. data/docs/api/Brut/FrontEnd/Routing/MissingPath.html +315 -0
  371. data/docs/api/Brut/FrontEnd/Routing/PageRoute.html +327 -0
  372. data/docs/api/Brut/FrontEnd/Routing/Route.html +761 -0
  373. data/docs/api/Brut/FrontEnd/Routing.html +927 -0
  374. data/docs/api/Brut/FrontEnd/Session.html +1195 -0
  375. data/docs/api/Brut/FrontEnd.html +134 -0
  376. data/docs/api/Brut/I18n/BaseMethods.html +931 -0
  377. data/docs/api/Brut/I18n/ForBackEnd.html +302 -0
  378. data/docs/api/Brut/I18n/ForCLI.html +302 -0
  379. data/docs/api/Brut/I18n/ForHTML.html +296 -0
  380. data/docs/api/Brut/I18n/HTTPAcceptLanguage/AlwaysEnglish.html +316 -0
  381. data/docs/api/Brut/I18n/HTTPAcceptLanguage.html +930 -0
  382. data/docs/api/Brut/I18n.html +127 -0
  383. data/docs/api/Brut/Instrumentation/LoggerSpanExporter.html +435 -0
  384. data/docs/api/Brut/Instrumentation/OpenTelemetry/NormalizedAttributes.html +286 -0
  385. data/docs/api/Brut/Instrumentation/OpenTelemetry/Span.html +302 -0
  386. data/docs/api/Brut/Instrumentation/OpenTelemetry.html +864 -0
  387. data/docs/api/Brut/Instrumentation.html +126 -0
  388. data/docs/api/Brut/SinatraHelpers/ClassMethods.html +532 -0
  389. data/docs/api/Brut/SinatraHelpers.html +281 -0
  390. data/docs/api/Brut/SpecSupport/ClockSupport.html +383 -0
  391. data/docs/api/Brut/SpecSupport/ComponentSupport.html +502 -0
  392. data/docs/api/Brut/SpecSupport/E2ETestServer.html +503 -0
  393. data/docs/api/Brut/SpecSupport/E2eSupport.html +142 -0
  394. data/docs/api/Brut/SpecSupport/EnhancedNode.html +403 -0
  395. data/docs/api/Brut/SpecSupport/FlashSupport.html +278 -0
  396. data/docs/api/Brut/SpecSupport/GeneralSupport/ClassMethods.html +401 -0
  397. data/docs/api/Brut/SpecSupport/GeneralSupport.html +195 -0
  398. data/docs/api/Brut/SpecSupport/HandlerSupport.html +160 -0
  399. data/docs/api/Brut/SpecSupport/Matchers/HaveConstraintViolation.html +553 -0
  400. data/docs/api/Brut/SpecSupport/Matchers/HaveHTMLAttribute.html +439 -0
  401. data/docs/api/Brut/SpecSupport/Matchers.html +125 -0
  402. data/docs/api/Brut/SpecSupport/RSpecSetup/OptionalSidekiqSupport.html +335 -0
  403. data/docs/api/Brut/SpecSupport/RSpecSetup.html +602 -0
  404. data/docs/api/Brut/SpecSupport/SessionSupport.html +196 -0
  405. data/docs/api/Brut/SpecSupport.html +129 -0
  406. data/docs/api/Brut.html +225 -0
  407. data/docs/api/Clock.html +603 -0
  408. data/docs/api/RichString.html +968 -0
  409. data/docs/api/SemanticLogger/Appender/Async.html +219 -0
  410. data/docs/api/Sequel/Extensions/BrutInstrumentation.html +115 -0
  411. data/docs/api/Sequel/Extensions/BrutMigrations.html +533 -0
  412. data/docs/api/Sequel/Extensions.html +117 -0
  413. data/docs/api/Sequel/Plugins/CreatedAt/InstanceMethods.html +105 -0
  414. data/docs/api/Sequel/Plugins/CreatedAt.html +125 -0
  415. data/docs/api/Sequel/Plugins/ExternalId/ClassMethods.html +207 -0
  416. data/docs/api/Sequel/Plugins/ExternalId/InstanceMethods.html +186 -0
  417. data/docs/api/Sequel/Plugins/ExternalId.html +218 -0
  418. data/docs/api/Sequel/Plugins/FindBang/ClassMethods.html +202 -0
  419. data/docs/api/Sequel/Plugins/FindBang.html +125 -0
  420. data/docs/api/Sequel/Plugins.html +117 -0
  421. data/docs/api/Sequel.html +117 -0
  422. data/docs/api/_index.html +1553 -0
  423. data/docs/api/class_list.html +54 -0
  424. data/docs/api/css/common.css +1 -0
  425. data/docs/api/css/full_list.css +58 -0
  426. data/docs/api/css/style.css +503 -0
  427. data/docs/api/file.README.html +127 -0
  428. data/docs/api/file_list.html +59 -0
  429. data/docs/api/frames.html +22 -0
  430. data/docs/api/index.html +127 -0
  431. data/docs/api/js/app.js +344 -0
  432. data/docs/api/js/full_list.js +242 -0
  433. data/docs/api/js/jquery.js +4 -0
  434. data/docs/api/method_list.html +3998 -0
  435. data/docs/api/top-level-namespace.html +112 -0
  436. data/docs/assets/ai.md.tZrjP9im.js +1 -0
  437. data/docs/assets/ai.md.tZrjP9im.lean.js +1 -0
  438. data/docs/assets/app.D_yaTITQ.js +1 -0
  439. data/docs/assets/assets.md.D3wunzLx.js +19 -0
  440. data/docs/assets/assets.md.D3wunzLx.lean.js +1 -0
  441. data/docs/assets/brut-js.md.o2DAO2s2.js +12 -0
  442. data/docs/assets/brut-js.md.o2DAO2s2.lean.js +1 -0
  443. data/docs/assets/business-logic.md.BY4hGy0m.js +1 -0
  444. data/docs/assets/business-logic.md.BY4hGy0m.lean.js +1 -0
  445. data/docs/assets/chunks/@localSearchIndexroot.BsN5i0Fi.js +1 -0
  446. data/docs/assets/chunks/VPLocalSearchBox.B2-ZzyTY.js +8 -0
  447. data/docs/assets/chunks/framework.1L-BeKqY.js +18 -0
  448. data/docs/assets/chunks/theme.CfGFVRvE.js +2 -0
  449. data/docs/assets/cli.md.RmeA2b0i.js +127 -0
  450. data/docs/assets/cli.md.RmeA2b0i.lean.js +1 -0
  451. data/docs/assets/components.md.eCttGlN-.js +104 -0
  452. data/docs/assets/components.md.eCttGlN-.lean.js +1 -0
  453. data/docs/assets/configuration.md.BRriU0cL.js +78 -0
  454. data/docs/assets/configuration.md.BRriU0cL.lean.js +1 -0
  455. data/docs/assets/css.md.DJgj2clw.js +21 -0
  456. data/docs/assets/css.md.DJgj2clw.lean.js +1 -0
  457. data/docs/assets/custom-element-tests.md.BrYJQEl3.js +69 -0
  458. data/docs/assets/custom-element-tests.md.BrYJQEl3.lean.js +1 -0
  459. data/docs/assets/database-access.md.C7l-Vuvb.js +63 -0
  460. data/docs/assets/database-access.md.C7l-Vuvb.lean.js +1 -0
  461. data/docs/assets/database-schema.md.BUjR0VS1.js +63 -0
  462. data/docs/assets/database-schema.md.BUjR0VS1.lean.js +1 -0
  463. data/docs/assets/deployment.md.Dbka4OTr.js +1 -0
  464. data/docs/assets/deployment.md.Dbka4OTr.lean.js +1 -0
  465. data/docs/assets/dev-env-overview.Gj7NWM8-.png +0 -0
  466. data/docs/assets/dev-env-protocol.DysDAtnz.png +0 -0
  467. data/docs/assets/dev-environment.md.BNc8AYiK.js +11 -0
  468. data/docs/assets/dev-environment.md.BNc8AYiK.lean.js +1 -0
  469. data/docs/assets/doc-conventions.md.DCfRXXi-.js +1 -0
  470. data/docs/assets/doc-conventions.md.DCfRXXi-.lean.js +1 -0
  471. data/docs/assets/end-to-end-tests.md.yfQHC0b5.js +26 -0
  472. data/docs/assets/end-to-end-tests.md.yfQHC0b5.lean.js +1 -0
  473. data/docs/assets/flash-and-session.md.BXY8RvT0.js +93 -0
  474. data/docs/assets/flash-and-session.md.BXY8RvT0.lean.js +1 -0
  475. data/docs/assets/forms.md.CBTYQ_Cz.js +379 -0
  476. data/docs/assets/forms.md.CBTYQ_Cz.lean.js +1 -0
  477. data/docs/assets/getting-started.md.Bz2s1Vjb.js +2 -0
  478. data/docs/assets/getting-started.md.Bz2s1Vjb.lean.js +1 -0
  479. data/docs/assets/handlers.md.089DVD3v.js +69 -0
  480. data/docs/assets/handlers.md.089DVD3v.lean.js +1 -0
  481. data/docs/assets/hooks.md.C4-moMny.js +80 -0
  482. data/docs/assets/hooks.md.C4-moMny.lean.js +1 -0
  483. data/docs/assets/i18n.md.Do9i1qWl.js +23 -0
  484. data/docs/assets/i18n.md.Do9i1qWl.lean.js +1 -0
  485. data/docs/assets/index.md.B28EwVpq.js +1 -0
  486. data/docs/assets/index.md.B28EwVpq.lean.js +1 -0
  487. data/docs/assets/instrumentation.md.CL6ax7nT.js +35 -0
  488. data/docs/assets/instrumentation.md.CL6ax7nT.lean.js +1 -0
  489. data/docs/assets/javascript.md.GWbhRS51.js +31 -0
  490. data/docs/assets/javascript.md.GWbhRS51.lean.js +1 -0
  491. data/docs/assets/jobs.md.S-2amAYp.js +1 -0
  492. data/docs/assets/jobs.md.S-2amAYp.lean.js +1 -0
  493. data/docs/assets/keyword-injection.md.Dt2tKREs.js +25 -0
  494. data/docs/assets/keyword-injection.md.Dt2tKREs.lean.js +1 -0
  495. data/docs/assets/markdown-examples.md.CCFEQO44.js +33 -0
  496. data/docs/assets/markdown-examples.md.CCFEQO44.lean.js +1 -0
  497. data/docs/assets/middleware.md.Czz_UlJN.js +20 -0
  498. data/docs/assets/middleware.md.Czz_UlJN.lean.js +1 -0
  499. data/docs/assets/not-released.md.BBy28McC.js +1 -0
  500. data/docs/assets/not-released.md.BBy28McC.lean.js +1 -0
  501. data/docs/assets/overview.Da81cB9R.png +0 -0
  502. data/docs/assets/overview.md.CDalkuxV.js +133 -0
  503. data/docs/assets/overview.md.CDalkuxV.lean.js +1 -0
  504. data/docs/assets/pages.md.BE3kfOc5.js +122 -0
  505. data/docs/assets/pages.md.BE3kfOc5.lean.js +1 -0
  506. data/docs/assets/routes.md.BMM7peut.js +29 -0
  507. data/docs/assets/routes.md.BMM7peut.lean.js +1 -0
  508. data/docs/assets/security.md.C668yXCi.js +1 -0
  509. data/docs/assets/security.md.C668yXCi.lean.js +1 -0
  510. data/docs/assets/seed-data.md.BvFZlqIk.js +14 -0
  511. data/docs/assets/seed-data.md.BvFZlqIk.lean.js +1 -0
  512. data/docs/assets/spa.qejUdp-5.png +0 -0
  513. data/docs/assets/space-time-continuum.md.KPUIKysQ.js +1 -0
  514. data/docs/assets/space-time-continuum.md.KPUIKysQ.lean.js +1 -0
  515. data/docs/assets/style.D73IYGCX.css +1 -0
  516. data/docs/assets/tutorial.md.BnoGjrdK.js +1 -0
  517. data/docs/assets/tutorial.md.BnoGjrdK.lean.js +1 -0
  518. data/docs/assets/unit-tests.md.DUGrnLj5.js +13 -0
  519. data/docs/assets/unit-tests.md.DUGrnLj5.lean.js +1 -0
  520. data/docs/assets/workspace-protocol.C0gXsoDb.png +0 -0
  521. data/docs/assets.html +42 -0
  522. data/docs/brut-css/brut.css +1 -0
  523. data/docs/brut-css/brut.max.css +22372 -0
  524. data/docs/brut-css/classes/appearances.html +783 -0
  525. data/docs/brut-css/classes/background-colors.html +3529 -0
  526. data/docs/brut-css/classes/border-colors.html +3529 -0
  527. data/docs/brut-css/classes/borders.html +2293 -0
  528. data/docs/brut-css/classes/dimensions.html +2581 -0
  529. data/docs/brut-css/classes/flex.html +917 -0
  530. data/docs/brut-css/classes/foreground-colors.html +3261 -0
  531. data/docs/brut-css/classes/junk-drawer.html +431 -0
  532. data/docs/brut-css/classes/layout.html +668 -0
  533. data/docs/brut-css/classes/lists.html +331 -0
  534. data/docs/brut-css/classes/positioning.html +1751 -0
  535. data/docs/brut-css/classes/spacings.html +2633 -0
  536. data/docs/brut-css/classes/typography.html +2206 -0
  537. data/docs/brut-css/customization/advanced-configuration.html +204 -0
  538. data/docs/brut-css/customization/breakpoints.html +227 -0
  539. data/docs/brut-css/customization/design-system.html +197 -0
  540. data/docs/brut-css/customization/pseudo-classes.html +228 -0
  541. data/docs/brut-css/docs.css +98 -0
  542. data/docs/brut-css/getting-started/core-concepts.html +234 -0
  543. data/docs/brut-css/getting-started/installation.html +190 -0
  544. data/docs/brut-css/getting-started/overview.html +210 -0
  545. data/docs/brut-css/getting-started/simple-example.html +285 -0
  546. data/docs/brut-css/index.html +193 -0
  547. data/docs/brut-css/prism-twilight.min.css +1 -0
  548. data/docs/brut-css/properties/colors.html +1548 -0
  549. data/docs/brut-css/properties/spacings.html +614 -0
  550. data/docs/brut-css/properties/typography.html +777 -0
  551. data/docs/brut-js/api/AjaxSubmit.html +374 -0
  552. data/docs/brut-js/api/AjaxSubmit.js.html +435 -0
  553. data/docs/brut-js/api/Autosubmit.html +192 -0
  554. data/docs/brut-js/api/Autosubmit.js.html +114 -0
  555. data/docs/brut-js/api/BaseCustomElement.html +1091 -0
  556. data/docs/brut-js/api/BaseCustomElement.js.html +312 -0
  557. data/docs/brut-js/api/BrutCustomElements.html +172 -0
  558. data/docs/brut-js/api/BufferedLogger.html +173 -0
  559. data/docs/brut-js/api/ConfirmSubmit.html +278 -0
  560. data/docs/brut-js/api/ConfirmSubmit.js.html +167 -0
  561. data/docs/brut-js/api/ConfirmationDialog.html +425 -0
  562. data/docs/brut-js/api/ConfirmationDialog.js.html +194 -0
  563. data/docs/brut-js/api/ConstraintViolationMessage.html +448 -0
  564. data/docs/brut-js/api/ConstraintViolationMessage.js.html +176 -0
  565. data/docs/brut-js/api/ConstraintViolationMessages.html +590 -0
  566. data/docs/brut-js/api/ConstraintViolationMessages.js.html +149 -0
  567. data/docs/brut-js/api/CopyToClipboard.html +345 -0
  568. data/docs/brut-js/api/CopyToClipboard.js.html +147 -0
  569. data/docs/brut-js/api/Form.html +294 -0
  570. data/docs/brut-js/api/Form.js.html +202 -0
  571. data/docs/brut-js/api/I18nTranslation.html +409 -0
  572. data/docs/brut-js/api/I18nTranslation.js.html +112 -0
  573. data/docs/brut-js/api/LocaleDetection.html +312 -0
  574. data/docs/brut-js/api/LocaleDetection.js.html +168 -0
  575. data/docs/brut-js/api/Logger.html +702 -0
  576. data/docs/brut-js/api/Logger.js.html +141 -0
  577. data/docs/brut-js/api/Message.html +238 -0
  578. data/docs/brut-js/api/Message.js.html +107 -0
  579. data/docs/brut-js/api/PrefixedLogger.html +369 -0
  580. data/docs/brut-js/api/RichString.html +1049 -0
  581. data/docs/brut-js/api/RichString.js.html +164 -0
  582. data/docs/brut-js/api/Tabs.html +295 -0
  583. data/docs/brut-js/api/Tabs.js.html +219 -0
  584. data/docs/brut-js/api/Tracing.html +277 -0
  585. data/docs/brut-js/api/Tracing.js.html +298 -0
  586. data/docs/brut-js/api/external-CustomElementRegistry.html +140 -0
  587. data/docs/brut-js/api/external-Performance.html +138 -0
  588. data/docs/brut-js/api/external-Promise.html +138 -0
  589. data/docs/brut-js/api/external-ValidityState.html +138 -0
  590. data/docs/brut-js/api/external-Window.html +233 -0
  591. data/docs/brut-js/api/external-fetch.html +138 -0
  592. data/docs/brut-js/api/global.html +400 -0
  593. data/docs/brut-js/api/index.html +168 -0
  594. data/docs/brut-js/api/index.js.html +181 -0
  595. data/docs/brut-js/api/module-testing.html +383 -0
  596. data/docs/brut-js/api/scripts/linenumber.js +25 -0
  597. data/docs/brut-js/api/scripts/prettify/Apache-License-2.0.txt +202 -0
  598. data/docs/brut-js/api/scripts/prettify/lang-css.js +2 -0
  599. data/docs/brut-js/api/scripts/prettify/prettify.js +28 -0
  600. data/docs/brut-js/api/styles/jsdoc-default.css +327 -0
  601. data/docs/brut-js/api/styles/prettify-jsdoc.css +111 -0
  602. data/docs/brut-js/api/styles/prettify-tomorrow.css +132 -0
  603. data/docs/brut-js/api/testing.AssetMetadata.html +172 -0
  604. data/docs/brut-js/api/testing.AssetMetadataLoader.html +171 -0
  605. data/docs/brut-js/api/testing.CustomElementTest.html +679 -0
  606. data/docs/brut-js/api/testing.DOMCreator.html +171 -0
  607. data/docs/brut-js/api/testing_AssetMetadata.js.html +86 -0
  608. data/docs/brut-js/api/testing_AssetMetadataLoader.js.html +76 -0
  609. data/docs/brut-js/api/testing_CustomElementTest.js.html +286 -0
  610. data/docs/brut-js/api/testing_DOMCreator.js.html +96 -0
  611. data/docs/brut-js/api/testing_index.js.html +99 -0
  612. data/docs/brut-js.html +35 -0
  613. data/docs/business-logic.html +24 -0
  614. data/docs/cli.html +150 -0
  615. data/docs/components.html +127 -0
  616. data/docs/configuration.html +101 -0
  617. data/docs/css.html +44 -0
  618. data/docs/custom-element-tests.html +92 -0
  619. data/docs/database-access.html +86 -0
  620. data/docs/database-schema.html +86 -0
  621. data/docs/deployment.html +24 -0
  622. data/docs/dev-environment.html +34 -0
  623. data/docs/doc-conventions.html +24 -0
  624. data/docs/end-to-end-tests.html +49 -0
  625. data/docs/flash-and-session.html +116 -0
  626. data/docs/forms.html +402 -0
  627. data/docs/getting-started.html +25 -0
  628. data/docs/handlers.html +92 -0
  629. data/docs/hashmap.json +1 -0
  630. data/docs/hooks.html +103 -0
  631. data/docs/i18n.html +46 -0
  632. data/docs/images/logo-300.png +0 -0
  633. data/docs/images/logo.png +0 -0
  634. data/docs/index.html +24 -0
  635. data/docs/instrumentation.html +58 -0
  636. data/docs/javascript.html +54 -0
  637. data/docs/jobs.html +24 -0
  638. data/docs/keyword-injection.html +48 -0
  639. data/docs/markdown-examples.html +56 -0
  640. data/docs/middleware.html +43 -0
  641. data/docs/not-released.html +24 -0
  642. data/docs/overview.html +156 -0
  643. data/docs/pages.html +145 -0
  644. data/docs/routes.html +52 -0
  645. data/docs/security.html +24 -0
  646. data/docs/seed-data.html +37 -0
  647. data/docs/space-time-continuum.html +24 -0
  648. data/docs/tutorial.html +24 -0
  649. data/docs/unit-tests.html +36 -0
  650. data/docs/vp-icons.css +1 -0
  651. data/lib/brut/cli/app_runner.rb +1 -1
  652. data/lib/brut/cli/apps/test.rb +5 -0
  653. data/lib/brut/framework/mcp.rb +0 -4
  654. data/lib/brut/front_end/component.rb +59 -84
  655. data/lib/brut/front_end/components/constraint_violations.rb +1 -4
  656. data/lib/brut/front_end/components/form_tag.rb +1 -1
  657. data/lib/brut/front_end/components/input.rb +3 -3
  658. data/lib/brut/front_end/components/inputs/csrf_token.rb +1 -1
  659. data/lib/brut/front_end/components/inputs/{text_field.rb → input_tag.rb} +6 -8
  660. data/lib/brut/front_end/components/inputs/radio_button.rb +1 -1
  661. data/lib/brut/front_end/components/inputs/select_tag_with_options.rb +187 -0
  662. data/lib/brut/front_end/components/inputs/{textarea.rb → textarea_tag.rb} +2 -2
  663. data/lib/brut/front_end/components/time_tag.rb +2 -1
  664. data/lib/brut/front_end/form.rb +4 -4
  665. data/lib/brut/front_end/forms/input.rb +2 -1
  666. data/lib/brut/front_end/forms/input_definition.rb +5 -2
  667. data/lib/brut/front_end/forms/radio_button_group_input.rb +2 -1
  668. data/lib/brut/front_end/forms/radio_button_group_input_definition.rb +2 -2
  669. data/lib/brut/front_end/forms/select_input.rb +2 -4
  670. data/lib/brut/front_end/forms/select_input_definition.rb +2 -2
  671. data/lib/brut/front_end/handler.rb +28 -26
  672. data/lib/brut/front_end/handlers/csp_reporting_handler.rb +5 -2
  673. data/lib/brut/front_end/handlers/instrumentation_handler.rb +8 -4
  674. data/lib/brut/front_end/handlers/locale_detection_handler.rb +9 -5
  675. data/lib/brut/front_end/handlers/missing_handler.rb +5 -2
  676. data/lib/brut/front_end/page.rb +4 -6
  677. data/lib/brut/front_end/request_context.rb +3 -2
  678. data/lib/brut/i18n/base_methods.rb +136 -82
  679. data/lib/brut/i18n/for_back_end.rb +1 -0
  680. data/lib/brut/i18n/for_cli.rb +1 -0
  681. data/lib/brut/i18n/for_html.rb +32 -4
  682. data/lib/brut/instrumentation/open_telemetry.rb +12 -2
  683. data/lib/brut/sinatra_helpers.rb +10 -3
  684. data/lib/brut/spec_support/component_support.rb +18 -18
  685. data/lib/brut/spec_support/e2e_test_server.rb +3 -0
  686. data/lib/brut/version.rb +1 -1
  687. data/lib/sequel/extensions/brut_migrations.rb +12 -9
  688. metadata +647 -5
  689. data/lib/brut/front_end/components/inputs/select.rb +0 -117
data/docs/brut-css/classes/typography.html ADDED
@@ -0,0 +1,2206 @@
1
+ <!doctype html>
2
+ <html class="ma-0 pa-0 h-100" lang="en">
3
+ <head>
4
+ <link rel="stylesheet" href="/brut-css/brut.css">
5
+ <link rel="stylesheet" href="/brut-css/docs.css">
6
+ <link rel="stylesheet" href="/brut-css/prism-twilight.min.css">
7
+ </head>
8
+
9
+ <body class="flex flex-column ff-sans ma-0 pa-0 h-100">
10
+ <header class="pos-sticky top-0 bg-gray-700 pa-3 z-5 shadow-2">
11
+ <div class="flex gap-3 justify-between items-center">
12
+ <h1><a href="/brut-css" class="black tdn">BrutCSS Reference Documentation</a></h1>
13
+ <ul class="lst-none pl-0 flex gap-2 justify-end items-center">
14
+ <form class="flex items-center gap-1 mr-3">
15
+ <label>
16
+ <input type="search" placeholder="e.g. padding-left" class="pa-2 br-2 ba bc-gray-600 bg-white-ish gray-200">
17
+ <span class="sr-only">Search term</span>
18
+ </label>
19
+ <button class="ph-3 pv-2 bg-white gray-100 ba bc-gray-500 br-3 hover-bg-gray-800 pointer flex items-center justify-between">
20
+ <span class="mr-2">Search</span>
21
+ <kbd>&#8984;</kbd>
22
+ <kbd>/</kbd>
23
+ </button>
24
+ </form>
25
+ <li><a href="/" class="red-200 tdn hover-tdu">BrutRB</a></li>
26
+ <span aria-hidden="true">&middot;</span>
27
+ <li><a href="/brut-js" class="gray-200 tdn hover-tdu">BrutJS</a></li>
28
+ <span aria-hidden="true">&middot;</span>
29
+ <li><a href="https://github.com/thirdtank/brut/tree/main/brut-css" class="gray-200 tdn hover-tdu">Code</a></li>
30
+ </ul>
31
+ </div>
32
+ </header>
33
+ <main class="flex overflow-hidden flex-grow-1 flex-shrink-1 flex-basis-0 pos-relative">
34
+ <nav class="overflow-y-auto ph-3 pb-2 pt-4 w-20 bg-gray-800 gray-200 h-100">
35
+
36
+ <h3>Getting Started</h3>
37
+ <ul class="pl-3">
38
+
39
+ <li>
40
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/getting-started/overview.html">Overview</a>
41
+ </li>
42
+
43
+ <li>
44
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/getting-started/installation.html">Installation</a>
45
+ </li>
46
+
47
+ <li>
48
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/getting-started/core-concepts.html">Core Concepts</a>
49
+ </li>
50
+
51
+ <li>
52
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/getting-started/simple-example.html">Simple Example</a>
53
+ </li>
54
+
55
+ </ul>
56
+
57
+ <h3>Properties</h3>
58
+ <ul class="pl-3">
59
+
60
+ <li>
61
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/properties/colors.html">Colors</a>
62
+ </li>
63
+
64
+ <li>
65
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/properties/spacings.html">Spacings</a>
66
+ </li>
67
+
68
+ <li>
69
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/properties/typography.html">Typography</a>
70
+ </li>
71
+
72
+ </ul>
73
+
74
+ <h3>Classes</h3>
75
+ <ul class="pl-3">
76
+
77
+ <li>
78
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/appearances.html">Appearances</a>
79
+ </li>
80
+
81
+ <li>
82
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/borders.html">Borders</a>
83
+ </li>
84
+
85
+ <li>
86
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/foreground-colors.html">Foreground Colors</a>
87
+ </li>
88
+
89
+ <li>
90
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/background-colors.html">Background Colors</a>
91
+ </li>
92
+
93
+ <li>
94
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/border-colors.html">Border Colors</a>
95
+ </li>
96
+
97
+ <li>
98
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/dimensions.html">Dimensions</a>
99
+ </li>
100
+
101
+ <li>
102
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/flex.html">Flex</a>
103
+ </li>
104
+
105
+ <li>
106
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/layout.html">Layout</a>
107
+ </li>
108
+
109
+ <li>
110
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/lists.html">Lists</a>
111
+ </li>
112
+
113
+ <li>
114
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/positioning.html">Positioning</a>
115
+ </li>
116
+
117
+ <li>
118
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/spacings.html">Spacings</a>
119
+ </li>
120
+
121
+ <li>
122
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/typography.html">Typography</a>
123
+ </li>
124
+
125
+ <li>
126
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/junk-drawer.html">Junk Drawer</a>
127
+ </li>
128
+
129
+ </ul>
130
+
131
+ <h3>Customization</h3>
132
+ <ul class="pl-3">
133
+
134
+ <li>
135
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/customization/design-system.html">Design System</a>
136
+ </li>
137
+
138
+ <li>
139
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/customization/breakpoints.html">Breakpoints</a>
140
+ </li>
141
+
142
+ <li>
143
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/customization/pseudo-classes.html">Pseudo Classes</a>
144
+ </li>
145
+
146
+ <li>
147
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/customization/advanced-configuration.html">Advanced Configuration</a>
148
+ </li>
149
+
150
+ </ul>
151
+
152
+
153
+ </nav>
154
+ <section class="overflow-y-auto pt-4 h-100 flex-grow-1 flex-shrink-1 flex-basis-0 flex flex-column">
155
+ <div class="ph-3 pv-2 flex items-start gap-2 justify-between">
156
+
157
+ <article>
158
+ <h2 class="}-5">Typography Classes</h2>
159
+
160
+ <p>Typography classes. These allow you to control how text is displayed and rendered. In particular, this contains the modular scale of font sizes, but also contains many other text rendering options.</p>
161
+
162
+
163
+
164
+ <h3 class="f-2 b">See Also</h3>
165
+ <ul class="see-also">
166
+
167
+ <li><p><a href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts">Web Fonts</a> (external)</p>
168
+ </li>
169
+
170
+ <li><p><a href="/brut-css/properties/typography.html">Typography</a></p>
171
+ </li>
172
+
173
+ </ul>
174
+
175
+
176
+ <h3 class="f-5 mt-4" id="class-group:font-family">Font Family</h3>
177
+ <p class="p">
178
+ <p>Font families for sans, serif, monospace, cursive, and fantasy. The idea is that your design would not have more than one font of each type, so you’d set custom properties with the fonts you like, then use e.g. <code>.ff-sans</code> anywhere you wanted Sans Serif and <code>ff-serif</code> anywhere you wanted yourt Serif font.</p>
179
+
180
+ </p>
181
+
182
+ <h4 class="f-2 b">See Also</h3>
183
+ <ul class="see-also">
184
+
185
+ <li><p><a href="/brut-css/properties/typography.html#property-group:font-family">Font Family</a></p>
186
+ </li>
187
+
188
+ </ul>
189
+
190
+
191
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ff-sans">
192
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ff-sans</code></h4>
193
+ <pre class="f-3 highlighted-code"><span class="token selector">.ff-sans</span> <span class="token punctuation">{</span>
194
+ <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--ff-sans<span class="token punctuation">)</span><span class="token punctuation">;</span>
195
+ <span class="token punctuation">}</span></pre>
196
+ </div>
197
+ <div class="ml-3">
198
+ <p class="p">
199
+ <p>Set the contents in the chosen sans-serif font</p>
200
+
201
+ </p>
202
+
203
+ <h5 class="f-1 b">See Also</h3>
204
+ <ul class="see-also">
205
+
206
+ <li><p><a href="/brut-css/properties/typography.html#--ff-sans"><code>--ff-sans</code></a></p>
207
+ </li>
208
+
209
+ </ul>
210
+
211
+
212
+ <h5 class="f-2 ttu">
213
+
214
+ Example
215
+
216
+ </h5>
217
+
218
+
219
+ <h6 class="f-1 fw-bold mt-2">Typical</h6>
220
+
221
+ <div class="mv-3 example">
222
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ff-sans<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
223
+ <div class="example-demonstration">
224
+
225
+ <p class="ff-sans">Things should be what they are</p>
226
+
227
+ </div>
228
+ </div>
229
+
230
+
231
+ </div>
232
+
233
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ff-serif">
234
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ff-serif</code></h4>
235
+ <pre class="f-3 highlighted-code"><span class="token selector">.ff-serif</span> <span class="token punctuation">{</span>
236
+ <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--ff-serif<span class="token punctuation">)</span><span class="token punctuation">;</span>
237
+ <span class="token punctuation">}</span></pre>
238
+ </div>
239
+ <div class="ml-3">
240
+ <p class="p">
241
+ <p>Set the contents in the chosen sans-serif font</p>
242
+
243
+ </p>
244
+
245
+
246
+ <h5 class="f-2 ttu">
247
+
248
+ Example
249
+
250
+ </h5>
251
+
252
+
253
+ <div class="mv-3 example">
254
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ff-serif<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
255
+ <div class="example-demonstration">
256
+
257
+ <p class="ff-serif">Things should be what they are</p>
258
+
259
+ </div>
260
+ </div>
261
+
262
+
263
+ </div>
264
+
265
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ff-mono">
266
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ff-mono</code></h4>
267
+ <pre class="f-3 highlighted-code"><span class="token selector">.ff-mono</span> <span class="token punctuation">{</span>
268
+ <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--ff-mono<span class="token punctuation">)</span><span class="token punctuation">;</span>
269
+ <span class="token punctuation">}</span></pre>
270
+ </div>
271
+ <div class="ml-3">
272
+ <p class="p">
273
+ <p>Set the contents in the chosen monospace font</p>
274
+
275
+ </p>
276
+
277
+
278
+ <h5 class="f-2 ttu">
279
+
280
+ Example
281
+
282
+ </h5>
283
+
284
+
285
+ <div class="mv-3 example">
286
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ff-mono<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
287
+ <div class="example-demonstration">
288
+
289
+ <p class="ff-mono">Things should be what they are</p>
290
+
291
+ </div>
292
+ </div>
293
+
294
+
295
+ </div>
296
+
297
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ff-cursive">
298
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ff-cursive</code></h4>
299
+ <pre class="f-3 highlighted-code"><span class="token selector">.ff-cursive</span> <span class="token punctuation">{</span>
300
+ <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--ff-cursive<span class="token punctuation">)</span><span class="token punctuation">;</span>
301
+ <span class="token punctuation">}</span></pre>
302
+ </div>
303
+ <div class="ml-3">
304
+ <p class="p">
305
+ <p>Set the contents in the chosen cursive/handwriting font</p>
306
+
307
+ </p>
308
+
309
+
310
+ <h5 class="f-2 ttu">
311
+
312
+ Example
313
+
314
+ </h5>
315
+
316
+
317
+ <div class="mv-3 example">
318
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ff-cursive<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
319
+ <div class="example-demonstration">
320
+
321
+ <p class="ff-cursive">Things should be what they are</p>
322
+
323
+ </div>
324
+ </div>
325
+
326
+
327
+ </div>
328
+
329
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ff-fantasy">
330
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ff-fantasy</code></h4>
331
+ <pre class="f-3 highlighted-code"><span class="token selector">.ff-fantasy</span> <span class="token punctuation">{</span>
332
+ <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--ff-fantasy<span class="token punctuation">)</span><span class="token punctuation">;</span>
333
+ <span class="token punctuation">}</span></pre>
334
+ </div>
335
+ <div class="ml-3">
336
+ <p class="p">
337
+ <p>Set the contents in the chosen fantasy font</p>
338
+
339
+ </p>
340
+
341
+
342
+ <h5 class="f-2 ttu">
343
+
344
+ Example
345
+
346
+ </h5>
347
+
348
+
349
+ <div class="mv-3 example">
350
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ff-fantasy<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
351
+ <div class="example-demonstration">
352
+
353
+ <p class="ff-fantasy">Things should be what they are</p>
354
+
355
+ </div>
356
+ </div>
357
+
358
+
359
+ </div>
360
+
361
+
362
+ <h3 class="f-5 mt-4" id="class-scale:font-size">Font Size</h3>
363
+ <p class="p">
364
+ <p>The modular scale of font sizes. This provides 10 total steps, which should give you enough font sizes for any needed. 0 is the smallest and 9 is the largest.</p>
365
+
366
+ </p>
367
+
368
+
369
+ <div class="mt-4 flex gap-3 items-center justify-between" id="f-0">
370
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.f-0</code></h4>
371
+ <pre class="f-3 highlighted-code"><span class="token selector">.f-0</span> <span class="token punctuation">{</span>
372
+ <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--fs-0<span class="token punctuation">)</span><span class="token punctuation">;</span>
373
+ <span class="token punctuation">}</span></pre>
374
+ </div>
375
+ <div class="ml-3">
376
+ <p class="p">
377
+ <p>The smallest font. Note that this is likely very small and not legible in all situations. It’s here in case you really need something quite tiny, but try to use <a href="/brut-css/classes/typography.html#f-1"><code>.f-1</code></a> if you can.</p>
378
+
379
+ </p>
380
+
381
+
382
+ <h5 class="f-2 ttu">
383
+
384
+ Example
385
+
386
+ </h5>
387
+
388
+
389
+ <div class="mv-3 example">
390
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>f-0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
391
+ <div class="example-demonstration">
392
+
393
+ <p class="f-0">Things should be what they are</p>
394
+
395
+ </div>
396
+ </div>
397
+
398
+
399
+ </div>
400
+
401
+ <div class="mt-4 flex gap-3 items-center justify-between" id="f-1">
402
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.f-1</code></h4>
403
+ <pre class="f-3 highlighted-code"><span class="token selector">.f-1</span> <span class="token punctuation">{</span>
404
+ <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--fs-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
405
+ <span class="token punctuation">}</span></pre>
406
+ </div>
407
+ <div class="ml-3">
408
+ <p class="p">
409
+ <p>The second smallest font, which you should use general when you need something smaller than the body font.</p>
410
+
411
+ </p>
412
+
413
+
414
+ <h5 class="f-2 ttu">
415
+
416
+ Example
417
+
418
+ </h5>
419
+
420
+
421
+ <div class="mv-3 example">
422
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>f-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
423
+ <div class="example-demonstration">
424
+
425
+ <p class="f-1">Things should be what they are</p>
426
+
427
+ </div>
428
+ </div>
429
+
430
+
431
+ </div>
432
+
433
+ <div class="mt-4 flex gap-3 items-center justify-between" id="f-2">
434
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.f-2</code></h4>
435
+ <pre class="f-3 highlighted-code"><span class="token selector">.f-2</span> <span class="token punctuation">{</span>
436
+ <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--fs-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
437
+ <span class="token punctuation">}</span></pre>
438
+ </div>
439
+ <div class="ml-3">
440
+ <p class="p">
441
+ <p>The body font size, appropriate for all general text. By default, this should be <code>1rem</code>, which will match the user agent’s configured font size</p>
442
+
443
+ </p>
444
+
445
+
446
+ <h5 class="f-2 ttu">
447
+
448
+ Example
449
+
450
+ </h5>
451
+
452
+
453
+ <div class="mv-3 example">
454
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>f-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
455
+ <div class="example-demonstration">
456
+
457
+ <p class="f-2">Things should be what they are</p>
458
+
459
+ </div>
460
+ </div>
461
+
462
+
463
+ </div>
464
+
465
+ <div class="mt-4 flex gap-3 items-center justify-between" id="f-3">
466
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.f-3</code></h4>
467
+ <pre class="f-3 highlighted-code"><span class="token selector">.f-3</span> <span class="token punctuation">{</span>
468
+ <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--fs-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
469
+ <span class="token punctuation">}</span></pre>
470
+ </div>
471
+ <div class="ml-3">
472
+ <p class="p">
473
+ <p>Third step of the scale, one steps larger than the body font.</p>
474
+
475
+ </p>
476
+
477
+
478
+ <h5 class="f-2 ttu">
479
+
480
+ Example
481
+
482
+ </h5>
483
+
484
+
485
+ <div class="mv-3 example">
486
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>f-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
487
+ <div class="example-demonstration">
488
+
489
+ <p class="f-3">Things should be what they are</p>
490
+
491
+ </div>
492
+ </div>
493
+
494
+
495
+ </div>
496
+
497
+ <div class="mt-4 flex gap-3 items-center justify-between" id="f-4">
498
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.f-4</code></h4>
499
+ <pre class="f-3 highlighted-code"><span class="token selector">.f-4</span> <span class="token punctuation">{</span>
500
+ <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--fs-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
501
+ <span class="token punctuation">}</span></pre>
502
+ </div>
503
+ <div class="ml-3">
504
+ <p class="p">
505
+ <p>Fourth step of the scale, two steps larger than the body font.</p>
506
+
507
+ </p>
508
+
509
+
510
+ <h5 class="f-2 ttu">
511
+
512
+ Example
513
+
514
+ </h5>
515
+
516
+
517
+ <div class="mv-3 example">
518
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>f-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
519
+ <div class="example-demonstration">
520
+
521
+ <p class="f-4">Things should be what they are</p>
522
+
523
+ </div>
524
+ </div>
525
+
526
+
527
+ </div>
528
+
529
+ <div class="mt-4 flex gap-3 items-center justify-between" id="f-5">
530
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.f-5</code></h4>
531
+ <pre class="f-3 highlighted-code"><span class="token selector">.f-5</span> <span class="token punctuation">{</span>
532
+ <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--fs-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
533
+ <span class="token punctuation">}</span></pre>
534
+ </div>
535
+ <div class="ml-3">
536
+ <p class="p">
537
+ <p>Fifth step of the scale, three steps larger than the body font.</p>
538
+
539
+ </p>
540
+
541
+
542
+ <h5 class="f-2 ttu">
543
+
544
+ Example
545
+
546
+ </h5>
547
+
548
+
549
+ <div class="mv-3 example">
550
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>f-5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
551
+ <div class="example-demonstration">
552
+
553
+ <p class="f-5">Things should be what they are</p>
554
+
555
+ </div>
556
+ </div>
557
+
558
+
559
+ </div>
560
+
561
+ <div class="mt-4 flex gap-3 items-center justify-between" id="f-6">
562
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.f-6</code></h4>
563
+ <pre class="f-3 highlighted-code"><span class="token selector">.f-6</span> <span class="token punctuation">{</span>
564
+ <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--fs-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
565
+ <span class="token punctuation">}</span></pre>
566
+ </div>
567
+ <div class="ml-3">
568
+ <p class="p">
569
+ <p>Sixth step of the scale, four steps larger than the body font.</p>
570
+
571
+ </p>
572
+
573
+
574
+ <h5 class="f-2 ttu">
575
+
576
+ Example
577
+
578
+ </h5>
579
+
580
+
581
+ <div class="mv-3 example">
582
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>f-6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
583
+ <div class="example-demonstration">
584
+
585
+ <p class="f-6">Things should be what they are</p>
586
+
587
+ </div>
588
+ </div>
589
+
590
+
591
+ </div>
592
+
593
+ <div class="mt-4 flex gap-3 items-center justify-between" id="f-7">
594
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.f-7</code></h4>
595
+ <pre class="f-3 highlighted-code"><span class="token selector">.f-7</span> <span class="token punctuation">{</span>
596
+ <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--fs-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
597
+ <span class="token punctuation">}</span></pre>
598
+ </div>
599
+ <div class="ml-3">
600
+ <p class="p">
601
+ <p>Seventh step of the scale, five steps larger than the body font.</p>
602
+
603
+ </p>
604
+
605
+
606
+ <h5 class="f-2 ttu">
607
+
608
+ Example
609
+
610
+ </h5>
611
+
612
+
613
+ <div class="mv-3 example">
614
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>f-7<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
615
+ <div class="example-demonstration">
616
+
617
+ <p class="f-7">Things should be what they are</p>
618
+
619
+ </div>
620
+ </div>
621
+
622
+
623
+ </div>
624
+
625
+ <div class="mt-4 flex gap-3 items-center justify-between" id="f-8">
626
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.f-8</code></h4>
627
+ <pre class="f-3 highlighted-code"><span class="token selector">.f-8</span> <span class="token punctuation">{</span>
628
+ <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--fs-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
629
+ <span class="token punctuation">}</span></pre>
630
+ </div>
631
+ <div class="ml-3">
632
+ <p class="p">
633
+ <p>Eighth step of the scale, six steps larger than the body font.</p>
634
+
635
+ </p>
636
+
637
+
638
+ <h5 class="f-2 ttu">
639
+
640
+ Example
641
+
642
+ </h5>
643
+
644
+
645
+ <div class="mv-3 example">
646
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>f-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
647
+ <div class="example-demonstration">
648
+
649
+ <p class="f-8">Things should be what they are</p>
650
+
651
+ </div>
652
+ </div>
653
+
654
+
655
+ </div>
656
+
657
+ <div class="mt-4 flex gap-3 items-center justify-between" id="f-9">
658
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.f-9</code></h4>
659
+ <pre class="f-3 highlighted-code"><span class="token selector">.f-9</span> <span class="token punctuation">{</span>
660
+ <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--fs-9<span class="token punctuation">)</span><span class="token punctuation">;</span>
661
+ <span class="token punctuation">}</span></pre>
662
+ </div>
663
+ <div class="ml-3">
664
+ <p class="p">
665
+ <p>Largest size font</p>
666
+
667
+ </p>
668
+
669
+
670
+ <h5 class="f-2 ttu">
671
+
672
+ Example
673
+
674
+ </h5>
675
+
676
+
677
+ <div class="mv-3 example">
678
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>f-9<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
679
+ <div class="example-demonstration">
680
+
681
+ <p class="f-9">Things should be what they are</p>
682
+
683
+ </div>
684
+ </div>
685
+
686
+
687
+ </div>
688
+
689
+
690
+ <h3 class="f-5 mt-4" id="class-scale:font-weights">Font Weights</h3>
691
+ <p class="p">
692
+ <p>Font Weights. These go from 1 to 9, representing 100’s, along with a normal class to undo any font weight. Note that, depending on your font, not every weight will look distinct.</p>
693
+
694
+ </p>
695
+
696
+
697
+ <div class="mt-4 flex gap-3 items-center justify-between" id="fw-normal">
698
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.fw-normal</code></h4>
699
+ <pre class="f-3 highlighted-code"><span class="token selector">.fw-normal</span> <span class="token punctuation">{</span>
700
+ <span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
701
+ <span class="token punctuation">}</span></pre>
702
+ </div>
703
+ <div class="ml-3">
704
+ <p class="p">
705
+ <p>Normal font weight.</p>
706
+
707
+ </p>
708
+
709
+
710
+ <h5 class="f-2 ttu">
711
+
712
+ Example
713
+
714
+ </h5>
715
+
716
+
717
+ <div class="mv-3 example">
718
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fw-normal<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
719
+ <div class="example-demonstration">
720
+
721
+ <p class="fw-normal">Things should be what they are</p>
722
+
723
+ </div>
724
+ </div>
725
+
726
+
727
+ </div>
728
+
729
+ <div class="mt-4 flex gap-3 items-center justify-between" id="fw-bold">
730
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.fw-bold</code></h4>
731
+ <pre class="f-3 highlighted-code"><span class="token selector">.fw-bold</span> <span class="token punctuation">{</span>
732
+ <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
733
+ <span class="token punctuation">}</span></pre>
734
+ </div>
735
+ <div class="ml-3">
736
+ <p class="p">
737
+ <p>Bold font weight.</p>
738
+
739
+ </p>
740
+
741
+
742
+ <h5 class="f-2 ttu">
743
+
744
+ Example
745
+
746
+ </h5>
747
+
748
+
749
+ <div class="mv-3 example">
750
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fw-bold<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
751
+ <div class="example-demonstration">
752
+
753
+ <p class="fw-bold">Things should be what they are</p>
754
+
755
+ </div>
756
+ </div>
757
+
758
+
759
+ </div>
760
+
761
+ <div class="mt-4 flex gap-3 items-center justify-between" id="fw-1">
762
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.fw-1</code></h4>
763
+ <pre class="f-3 highlighted-code"><span class="token selector">.fw-1</span> <span class="token punctuation">{</span>
764
+ <span class="token property">font-weight</span><span class="token punctuation">:</span> 100<span class="token punctuation">;</span>
765
+ <span class="token punctuation">}</span></pre>
766
+ </div>
767
+ <div class="ml-3">
768
+ <p class="p">
769
+ <p>Lightest font weight.</p>
770
+
771
+ </p>
772
+
773
+
774
+ <h5 class="f-2 ttu">
775
+
776
+ Example
777
+
778
+ </h5>
779
+
780
+
781
+ <div class="mv-3 example">
782
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fw-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
783
+ <div class="example-demonstration">
784
+
785
+ <p class="fw-1">Things should be what they are</p>
786
+
787
+ </div>
788
+ </div>
789
+
790
+
791
+ </div>
792
+
793
+ <div class="mt-4 flex gap-3 items-center justify-between" id="fw-2">
794
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.fw-2</code></h4>
795
+ <pre class="f-3 highlighted-code"><span class="token selector">.fw-2</span> <span class="token punctuation">{</span>
796
+ <span class="token property">font-weight</span><span class="token punctuation">:</span> 200<span class="token punctuation">;</span>
797
+ <span class="token punctuation">}</span></pre>
798
+ </div>
799
+ <div class="ml-3">
800
+ <p class="p">
801
+
802
+ </p>
803
+
804
+
805
+ <h5 class="f-2 ttu">
806
+
807
+ Example
808
+
809
+ </h5>
810
+
811
+
812
+ <div class="mv-3 example">
813
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fw-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
814
+ <div class="example-demonstration">
815
+
816
+ <p class="fw-2">Things should be what they are</p>
817
+
818
+ </div>
819
+ </div>
820
+
821
+
822
+ </div>
823
+
824
+ <div class="mt-4 flex gap-3 items-center justify-between" id="fw-3">
825
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.fw-3</code></h4>
826
+ <pre class="f-3 highlighted-code"><span class="token selector">.fw-3</span> <span class="token punctuation">{</span>
827
+ <span class="token property">font-weight</span><span class="token punctuation">:</span> 300<span class="token punctuation">;</span>
828
+ <span class="token punctuation">}</span></pre>
829
+ </div>
830
+ <div class="ml-3">
831
+ <p class="p">
832
+
833
+ </p>
834
+
835
+
836
+ <h5 class="f-2 ttu">
837
+
838
+ Example
839
+
840
+ </h5>
841
+
842
+
843
+ <div class="mv-3 example">
844
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fw-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
845
+ <div class="example-demonstration">
846
+
847
+ <p class="fw-3">Things should be what they are</p>
848
+
849
+ </div>
850
+ </div>
851
+
852
+
853
+ </div>
854
+
855
+ <div class="mt-4 flex gap-3 items-center justify-between" id="fw-4">
856
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.fw-4</code></h4>
857
+ <pre class="f-3 highlighted-code"><span class="token selector">.fw-4</span> <span class="token punctuation">{</span>
858
+ <span class="token property">font-weight</span><span class="token punctuation">:</span> 400<span class="token punctuation">;</span>
859
+ <span class="token punctuation">}</span></pre>
860
+ </div>
861
+ <div class="ml-3">
862
+ <p class="p">
863
+
864
+ </p>
865
+
866
+
867
+ <h5 class="f-2 ttu">
868
+
869
+ Example
870
+
871
+ </h5>
872
+
873
+
874
+ <div class="mv-3 example">
875
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fw-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
876
+ <div class="example-demonstration">
877
+
878
+ <p class="fw-4">Things should be what they are</p>
879
+
880
+ </div>
881
+ </div>
882
+
883
+
884
+ </div>
885
+
886
+ <div class="mt-4 flex gap-3 items-center justify-between" id="fw-5">
887
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.fw-5</code></h4>
888
+ <pre class="f-3 highlighted-code"><span class="token selector">.fw-5</span> <span class="token punctuation">{</span>
889
+ <span class="token property">font-weight</span><span class="token punctuation">:</span> 500<span class="token punctuation">;</span>
890
+ <span class="token punctuation">}</span></pre>
891
+ </div>
892
+ <div class="ml-3">
893
+ <p class="p">
894
+
895
+ </p>
896
+
897
+
898
+ <h5 class="f-2 ttu">
899
+
900
+ Example
901
+
902
+ </h5>
903
+
904
+
905
+ <div class="mv-3 example">
906
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fw-5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
907
+ <div class="example-demonstration">
908
+
909
+ <p class="fw-5">Things should be what they are</p>
910
+
911
+ </div>
912
+ </div>
913
+
914
+
915
+ </div>
916
+
917
+ <div class="mt-4 flex gap-3 items-center justify-between" id="fw-6">
918
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.fw-6</code></h4>
919
+ <pre class="f-3 highlighted-code"><span class="token selector">.fw-6</span> <span class="token punctuation">{</span>
920
+ <span class="token property">font-weight</span><span class="token punctuation">:</span> 600<span class="token punctuation">;</span>
921
+ <span class="token punctuation">}</span></pre>
922
+ </div>
923
+ <div class="ml-3">
924
+ <p class="p">
925
+
926
+ </p>
927
+
928
+
929
+ <h5 class="f-2 ttu">
930
+
931
+ Example
932
+
933
+ </h5>
934
+
935
+
936
+ <div class="mv-3 example">
937
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fw-6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
938
+ <div class="example-demonstration">
939
+
940
+ <p class="fw-6">Things should be what they are</p>
941
+
942
+ </div>
943
+ </div>
944
+
945
+
946
+ </div>
947
+
948
+ <div class="mt-4 flex gap-3 items-center justify-between" id="fw-7">
949
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.fw-7</code></h4>
950
+ <pre class="f-3 highlighted-code"><span class="token selector">.fw-7</span> <span class="token punctuation">{</span>
951
+ <span class="token property">font-weight</span><span class="token punctuation">:</span> 700<span class="token punctuation">;</span>
952
+ <span class="token punctuation">}</span></pre>
953
+ </div>
954
+ <div class="ml-3">
955
+ <p class="p">
956
+
957
+ </p>
958
+
959
+
960
+ <h5 class="f-2 ttu">
961
+
962
+ Example
963
+
964
+ </h5>
965
+
966
+
967
+ <div class="mv-3 example">
968
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fw-7<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
969
+ <div class="example-demonstration">
970
+
971
+ <p class="fw-7">Things should be what they are</p>
972
+
973
+ </div>
974
+ </div>
975
+
976
+
977
+ </div>
978
+
979
+ <div class="mt-4 flex gap-3 items-center justify-between" id="fw-8">
980
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.fw-8</code></h4>
981
+ <pre class="f-3 highlighted-code"><span class="token selector">.fw-8</span> <span class="token punctuation">{</span>
982
+ <span class="token property">font-weight</span><span class="token punctuation">:</span> 800<span class="token punctuation">;</span>
983
+ <span class="token punctuation">}</span></pre>
984
+ </div>
985
+ <div class="ml-3">
986
+ <p class="p">
987
+
988
+ </p>
989
+
990
+
991
+ <h5 class="f-2 ttu">
992
+
993
+ Example
994
+
995
+ </h5>
996
+
997
+
998
+ <div class="mv-3 example">
999
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fw-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
1000
+ <div class="example-demonstration">
1001
+
1002
+ <p class="fw-8">Things should be what they are</p>
1003
+
1004
+ </div>
1005
+ </div>
1006
+
1007
+
1008
+ </div>
1009
+
1010
+ <div class="mt-4 flex gap-3 items-center justify-between" id="fw-9">
1011
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.fw-9</code></h4>
1012
+ <pre class="f-3 highlighted-code"><span class="token selector">.fw-9</span> <span class="token punctuation">{</span>
1013
+ <span class="token property">font-weight</span><span class="token punctuation">:</span> 900<span class="token punctuation">;</span>
1014
+ <span class="token punctuation">}</span></pre>
1015
+ </div>
1016
+ <div class="ml-3">
1017
+ <p class="p">
1018
+ <p>Heaviest font weight.</p>
1019
+
1020
+ </p>
1021
+
1022
+
1023
+ <h5 class="f-2 ttu">
1024
+
1025
+ Example
1026
+
1027
+ </h5>
1028
+
1029
+
1030
+ <div class="mv-3 example">
1031
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fw-9<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
1032
+ <div class="example-demonstration">
1033
+
1034
+ <p class="fw-9">Things should be what they are</p>
1035
+
1036
+ </div>
1037
+ </div>
1038
+
1039
+
1040
+ </div>
1041
+
1042
+
1043
+ <h3 class="f-5 mt-4" id="class-group:styles-variants">Styles Variants</h3>
1044
+ <p class="p">
1045
+ <p>Font styles and variants.</p>
1046
+
1047
+ </p>
1048
+
1049
+
1050
+ <div class="mt-4 flex gap-3 items-center justify-between" id="fs-normal">
1051
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.fs-normal</code></h4>
1052
+ <pre class="f-3 highlighted-code"><span class="token selector">.fs-normal</span> <span class="token punctuation">{</span>
1053
+ <span class="token property">font-style</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
1054
+ <span class="token punctuation">}</span></pre>
1055
+ </div>
1056
+ <div class="ml-3">
1057
+ <p class="p">
1058
+ <p>Normal styling, typically roman.</p>
1059
+
1060
+ </p>
1061
+
1062
+
1063
+ <h5 class="f-2 ttu">
1064
+
1065
+ Example
1066
+
1067
+ </h5>
1068
+
1069
+
1070
+ <div class="mv-3 example">
1071
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fs-normal<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
1072
+ <div class="example-demonstration">
1073
+
1074
+ <p class="fs-normal">Things should be what they are</p>
1075
+
1076
+ </div>
1077
+ </div>
1078
+
1079
+
1080
+ </div>
1081
+
1082
+ <div class="mt-4 flex gap-3 items-center justify-between" id="fs-italic">
1083
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.fs-italic</code></h4>
1084
+ <pre class="f-3 highlighted-code"><span class="token selector">.fs-italic</span> <span class="token punctuation">{</span>
1085
+ <span class="token property">font-style</span><span class="token punctuation">:</span> italic<span class="token punctuation">;</span>
1086
+ <span class="token punctuation">}</span></pre>
1087
+ </div>
1088
+ <div class="ml-3">
1089
+ <p class="p">
1090
+ <p>Italic or slanted styling, depend on the font.</p>
1091
+
1092
+ </p>
1093
+
1094
+
1095
+ <h5 class="f-2 ttu">
1096
+
1097
+ Example
1098
+
1099
+ </h5>
1100
+
1101
+
1102
+ <div class="mv-3 example">
1103
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fs-italic<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
1104
+ <div class="example-demonstration">
1105
+
1106
+ <p class="fs-italic">Things should be what they are</p>
1107
+
1108
+ </div>
1109
+ </div>
1110
+
1111
+
1112
+ </div>
1113
+
1114
+ <div class="mt-4 flex gap-3 items-center justify-between" id="fv-sc">
1115
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.fv-sc</code></h4>
1116
+ <pre class="f-3 highlighted-code"><span class="token selector">.fv-sc</span> <span class="token punctuation">{</span>
1117
+ <span class="token property">font-variant</span><span class="token punctuation">:</span> small-caps<span class="token punctuation">;</span>
1118
+ <span class="token punctuation">}</span></pre>
1119
+ </div>
1120
+ <div class="ml-3">
1121
+ <p class="p">
1122
+ <p>Small caps variant</p>
1123
+
1124
+ </p>
1125
+
1126
+
1127
+ <h5 class="f-2 ttu">
1128
+
1129
+ Example
1130
+
1131
+ </h5>
1132
+
1133
+
1134
+ <div class="mv-3 example">
1135
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fv-sc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
1136
+ <div class="example-demonstration">
1137
+
1138
+ <p class="fv-sc">Things should be what they are</p>
1139
+
1140
+ </div>
1141
+ </div>
1142
+
1143
+
1144
+ </div>
1145
+
1146
+ <div class="mt-4 flex gap-3 items-center justify-between" id="fv-normal">
1147
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.fv-normal</code></h4>
1148
+ <pre class="f-3 highlighted-code"><span class="token selector">.fv-normal</span> <span class="token punctuation">{</span>
1149
+ <span class="token property">font-variant</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
1150
+ <span class="token punctuation">}</span></pre>
1151
+ </div>
1152
+ <div class="ml-3">
1153
+ <p class="p">
1154
+ <p>Normal variant</p>
1155
+
1156
+ </p>
1157
+
1158
+
1159
+ <h5 class="f-2 ttu">
1160
+
1161
+ Example
1162
+
1163
+ </h5>
1164
+
1165
+
1166
+ <div class="mv-3 example">
1167
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fv-normal<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
1168
+ <div class="example-demonstration">
1169
+
1170
+ <p class="fv-normal">Things should be what they are</p>
1171
+
1172
+ </div>
1173
+ </div>
1174
+
1175
+
1176
+ </div>
1177
+
1178
+
1179
+ <h3 class="f-5 mt-4" id="class-group:tracking">Tracking</h3>
1180
+ <p class="p">
1181
+ <p>Letterspacing/tracking. This scale is semantic, since you likely don’t need that many values to achnieve whatever design you are looking for.</p>
1182
+
1183
+ </p>
1184
+
1185
+
1186
+ <div class="mt-4 flex gap-3 items-center justify-between" id="tracked">
1187
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.tracked</code></h4>
1188
+ <pre class="f-3 highlighted-code"><span class="token selector">.tracked</span> <span class="token punctuation">{</span>
1189
+ <span class="token property">letter-spacing</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--ls-tracked<span class="token punctuation">)</span><span class="token punctuation">;</span>
1190
+ <span class="token punctuation">}</span></pre>
1191
+ </div>
1192
+ <div class="ml-3">
1193
+ <p class="p">
1194
+ <p>Slightly increased spacing, useful for cleaning up all-caps titles.</p>
1195
+
1196
+ </p>
1197
+
1198
+
1199
+ <h5 class="f-2 ttu">
1200
+
1201
+ Example
1202
+
1203
+ </h5>
1204
+
1205
+
1206
+ <div class="mv-3 example">
1207
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tracked<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
1208
+ <div class="example-demonstration">
1209
+
1210
+ <p class="tracked">Things should be what they are</p>
1211
+
1212
+ </div>
1213
+ </div>
1214
+
1215
+
1216
+ </div>
1217
+
1218
+ <div class="mt-4 flex gap-3 items-center justify-between" id="tracked-tight">
1219
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.tracked-tight</code></h4>
1220
+ <pre class="f-3 highlighted-code"><span class="token selector">.tracked-tight</span> <span class="token punctuation">{</span>
1221
+ <span class="token property">letter-spacing</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--ls-tight<span class="token punctuation">)</span><span class="token punctuation">;</span>
1222
+ <span class="token punctuation">}</span></pre>
1223
+ </div>
1224
+ <div class="ml-3">
1225
+ <p class="p">
1226
+ <p>Tight spacing.</p>
1227
+
1228
+ </p>
1229
+
1230
+
1231
+ <h5 class="f-2 ttu">
1232
+
1233
+ Example
1234
+
1235
+ </h5>
1236
+
1237
+
1238
+ <div class="mv-3 example">
1239
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tracked-tight<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
1240
+ <div class="example-demonstration">
1241
+
1242
+ <p class="tracked-tight">Things should be what they are</p>
1243
+
1244
+ </div>
1245
+ </div>
1246
+
1247
+
1248
+ </div>
1249
+
1250
+ <div class="mt-4 flex gap-3 items-center justify-between" id="tracked-mega">
1251
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.tracked-mega</code></h4>
1252
+ <pre class="f-3 highlighted-code"><span class="token selector">.tracked-mega</span> <span class="token punctuation">{</span>
1253
+ <span class="token property">letter-spacing</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--ls-mega<span class="token punctuation">)</span><span class="token punctuation">;</span>
1254
+ <span class="token punctuation">}</span></pre>
1255
+ </div>
1256
+ <div class="ml-3">
1257
+ <p class="p">
1258
+ <p>Significantly increased spacing, useful for special effects.</p>
1259
+
1260
+ </p>
1261
+
1262
+
1263
+ <h5 class="f-2 ttu">
1264
+
1265
+ Example
1266
+
1267
+ </h5>
1268
+
1269
+
1270
+ <div class="mv-3 example">
1271
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tracked-mega<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
1272
+ <div class="example-demonstration">
1273
+
1274
+ <p class="tracked-mega">Things should be what they are</p>
1275
+
1276
+ </div>
1277
+ </div>
1278
+
1279
+
1280
+ </div>
1281
+
1282
+ <div class="mt-4 flex gap-3 items-center justify-between" id="tracked-none">
1283
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.tracked-none</code></h4>
1284
+ <pre class="f-3 highlighted-code"><span class="token selector">.tracked-none</span> <span class="token punctuation">{</span>
1285
+ <span class="token property">letter-spacing</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--ls-none<span class="token punctuation">)</span><span class="token punctuation">;</span>
1286
+ <span class="token punctuation">}</span></pre>
1287
+ </div>
1288
+ <div class="ml-3">
1289
+ <p class="p">
1290
+ <p>Normal letter spacing.</p>
1291
+
1292
+ </p>
1293
+
1294
+
1295
+ <h5 class="f-2 ttu">
1296
+
1297
+ Example
1298
+
1299
+ </h5>
1300
+
1301
+
1302
+ <div class="mv-3 example">
1303
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tracked-none<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
1304
+ <div class="example-demonstration">
1305
+
1306
+ <p class="tracked-none">Things should be what they are</p>
1307
+
1308
+ </div>
1309
+ </div>
1310
+
1311
+
1312
+ </div>
1313
+
1314
+
1315
+ <h3 class="f-5 mt-4" id="class-group:leading">Leading/Line Height</h3>
1316
+ <p class="p">
1317
+ <p>Line heights/leading. This is a semantic scale providing three useful values.</p>
1318
+
1319
+ </p>
1320
+
1321
+
1322
+ <div class="mt-4 flex gap-3 items-center justify-between" id="lh-solid">
1323
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.lh-solid</code></h4>
1324
+ <pre class="f-3 highlighted-code"><span class="token selector">.lh-solid</span> <span class="token punctuation">{</span>
1325
+ <span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--lh-solid<span class="token punctuation">)</span><span class="token punctuation">;</span>
1326
+ <span class="token punctuation">}</span></pre>
1327
+ </div>
1328
+ <div class="ml-3">
1329
+ <p class="p">
1330
+ <p>No line height, for creating solid blocks of text.</p>
1331
+
1332
+ </p>
1333
+
1334
+
1335
+ <h5 class="f-2 ttu">
1336
+
1337
+ Example
1338
+
1339
+ </h5>
1340
+
1341
+
1342
+ <div class="mv-3 example">
1343
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lh-solid measure<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1344
+ A core tenet of design is that same should be same, while
1345
+ different be then different. Meaning: if two elements are
1346
+ intended to be the same sort of thing, or reference the
1347
+ same sort of information, they should have clear
1348
+ consonance and harmony. Conversely, if two elements are
1349
+ unrelated, they should be quite clearly different.
1350
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
1351
+ <div class="example-demonstration">
1352
+
1353
+ <p class="lh-solid measure">
1354
+ A core tenet of design is that same should be same, while different be then different. Meaning: if two elements are intended to be the same sort of thing, or reference the same sort of information, they should have clear consonance and harmony. Conversely, if two elements are unrelated, they should be quite clearly different.
1355
+ </p>
1356
+
1357
+ </div>
1358
+ </div>
1359
+
1360
+
1361
+ </div>
1362
+
1363
+ <div class="mt-4 flex gap-3 items-center justify-between" id="lh-title">
1364
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.lh-title</code></h4>
1365
+ <pre class="f-3 highlighted-code"><span class="token selector">.lh-title</span> <span class="token punctuation">{</span>
1366
+ <span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--lh-title<span class="token punctuation">)</span><span class="token punctuation">;</span>
1367
+ <span class="token punctuation">}</span></pre>
1368
+ </div>
1369
+ <div class="ml-3">
1370
+ <p class="p">
1371
+ <p>Leading appropriate for titles, which can be somewhat tighter than normal text.</p>
1372
+
1373
+ </p>
1374
+
1375
+
1376
+ <h5 class="f-2 ttu">
1377
+
1378
+ Example
1379
+
1380
+ </h5>
1381
+
1382
+
1383
+ <div class="mv-3 example">
1384
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lh-title measure<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1385
+ A core tenet of design is that same should be same, while
1386
+ different be then different. Meaning: if two elements are
1387
+ intended to be the same sort of thing, or reference the
1388
+ same sort of information, they should have clear
1389
+ consonance and harmony. Conversely, if two elements are
1390
+ unrelated, they should be quite clearly different.
1391
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
1392
+ <div class="example-demonstration">
1393
+
1394
+ <p class="lh-title measure">
1395
+ A core tenet of design is that same should be same, while different be then different. Meaning: if two elements are intended to be the same sort of thing, or reference the same sort of information, they should have clear consonance and harmony. Conversely, if two elements are unrelated, they should be quite clearly different.
1396
+ </p>
1397
+
1398
+ </div>
1399
+ </div>
1400
+
1401
+
1402
+ </div>
1403
+
1404
+ <div class="mt-4 flex gap-3 items-center justify-between" id="lh-copy">
1405
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.lh-copy</code></h4>
1406
+ <pre class="f-3 highlighted-code"><span class="token selector">.lh-copy</span> <span class="token punctuation">{</span>
1407
+ <span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--lh-copy<span class="token punctuation">)</span><span class="token punctuation">;</span>
1408
+ <span class="token punctuation">}</span></pre>
1409
+ </div>
1410
+ <div class="ml-3">
1411
+ <p class="p">
1412
+ <p>Leading appropriate for copy or other longform text.</p>
1413
+
1414
+ </p>
1415
+
1416
+ <h5 class="f-1 b">See Also</h3>
1417
+ <ul class="see-also">
1418
+
1419
+ <li><p><a href="/brut-css/classes/typography.html#p"><code>.p</code></a></p>
1420
+ </li>
1421
+
1422
+ </ul>
1423
+
1424
+
1425
+ <h5 class="f-2 ttu">
1426
+
1427
+ Example
1428
+
1429
+ </h5>
1430
+
1431
+
1432
+ <div class="mv-3 example">
1433
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lh-copy measure<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1434
+ A core tenet of design is that same should be same, while
1435
+ different be then different. Meaning: if two elements are
1436
+ intended to be the same sort of thing, or reference the
1437
+ same sort of information, they should have clear
1438
+ consonance and harmony. Conversely, if two elements are
1439
+ unrelated, they should be quite clearly different.
1440
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
1441
+ <div class="example-demonstration">
1442
+
1443
+ <p class="lh-copy measure">
1444
+ A core tenet of design is that same should be same, while different be then different. Meaning: if two elements are intended to be the same sort of thing, or reference the same sort of information, they should have clear consonance and harmony. Conversely, if two elements are unrelated, they should be quite clearly different.
1445
+ </p>
1446
+ </div>
1447
+ </div>
1448
+
1449
+
1450
+ </div>
1451
+
1452
+
1453
+ <h3 class="f-5 mt-4" id="class-group:text-align">Text Align</h3>
1454
+ <p class="p">
1455
+ <p>Text alignment.</p>
1456
+
1457
+ </p>
1458
+
1459
+
1460
+ <div class="mt-4 flex gap-3 items-center justify-between" id="tr">
1461
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.tr</code></h4>
1462
+ <pre class="f-3 highlighted-code"><span class="token selector">.tr</span> <span class="token punctuation">{</span>
1463
+ <span class="token property">text-align</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
1464
+ <span class="token punctuation">}</span></pre>
1465
+ </div>
1466
+ <div class="ml-3">
1467
+ <p class="p">
1468
+ <p>Right alignment</p>
1469
+
1470
+ </p>
1471
+
1472
+
1473
+ <h5 class="f-2 ttu">
1474
+
1475
+ Example
1476
+
1477
+ </h5>
1478
+
1479
+
1480
+ <div class="mv-3 example">
1481
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>w-100 tr<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
1482
+ <div class="example-demonstration">
1483
+
1484
+ <p class="w-100 tr">Things should be what they are</p>
1485
+
1486
+ </div>
1487
+ </div>
1488
+
1489
+
1490
+ </div>
1491
+
1492
+ <div class="mt-4 flex gap-3 items-center justify-between" id="tc">
1493
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.tc</code></h4>
1494
+ <pre class="f-3 highlighted-code"><span class="token selector">.tc</span> <span class="token punctuation">{</span>
1495
+ <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
1496
+ <span class="token punctuation">}</span></pre>
1497
+ </div>
1498
+ <div class="ml-3">
1499
+ <p class="p">
1500
+ <p>Center-aligned text.</p>
1501
+
1502
+ </p>
1503
+
1504
+
1505
+ <h5 class="f-2 ttu">
1506
+
1507
+ Example
1508
+
1509
+ </h5>
1510
+
1511
+
1512
+ <div class="mv-3 example">
1513
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>w-100 tc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
1514
+ <div class="example-demonstration">
1515
+
1516
+ <p class="w-100 tc">Things should be what they are</p>
1517
+
1518
+ </div>
1519
+ </div>
1520
+
1521
+
1522
+ </div>
1523
+
1524
+ <div class="mt-4 flex gap-3 items-center justify-between" id="tl">
1525
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.tl</code></h4>
1526
+ <pre class="f-3 highlighted-code"><span class="token selector">.tl</span> <span class="token punctuation">{</span>
1527
+ <span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
1528
+ <span class="token punctuation">}</span></pre>
1529
+ </div>
1530
+ <div class="ml-3">
1531
+ <p class="p">
1532
+ <p>Left-aligned text.</p>
1533
+
1534
+ </p>
1535
+
1536
+
1537
+ <h5 class="f-2 ttu">
1538
+
1539
+ Example
1540
+
1541
+ </h5>
1542
+
1543
+
1544
+ <div class="mv-3 example">
1545
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>w-100 tl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
1546
+ <div class="example-demonstration">
1547
+
1548
+ <p class="w-100 tl">Things should be what they are</p>
1549
+
1550
+ </div>
1551
+ </div>
1552
+
1553
+
1554
+ </div>
1555
+
1556
+
1557
+ <h3 class="f-5 mt-4" id="class-group:text-transform">Text Transform</h3>
1558
+ <p class="p">
1559
+ <p>Text transformations.</p>
1560
+
1561
+ </p>
1562
+
1563
+
1564
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ttn">
1565
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ttn</code></h4>
1566
+ <pre class="f-3 highlighted-code"><span class="token selector">.ttn</span> <span class="token punctuation">{</span>
1567
+ <span class="token property">text-transform</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
1568
+ <span class="token punctuation">}</span></pre>
1569
+ </div>
1570
+ <div class="ml-3">
1571
+ <p class="p">
1572
+
1573
+ </p>
1574
+
1575
+
1576
+ </div>
1577
+
1578
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ttu">
1579
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ttu</code></h4>
1580
+ <pre class="f-3 highlighted-code"><span class="token selector">.ttu</span> <span class="token punctuation">{</span>
1581
+ <span class="token property">text-transform</span><span class="token punctuation">:</span> uppercase<span class="token punctuation">;</span>
1582
+ <span class="token punctuation">}</span></pre>
1583
+ </div>
1584
+ <div class="ml-3">
1585
+ <p class="p">
1586
+
1587
+ </p>
1588
+
1589
+
1590
+ </div>
1591
+
1592
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ttl">
1593
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ttl</code></h4>
1594
+ <pre class="f-3 highlighted-code"><span class="token selector">.ttl</span> <span class="token punctuation">{</span>
1595
+ <span class="token property">text-transform</span><span class="token punctuation">:</span> lowercase<span class="token punctuation">;</span>
1596
+ <span class="token punctuation">}</span></pre>
1597
+ </div>
1598
+ <div class="ml-3">
1599
+ <p class="p">
1600
+
1601
+ </p>
1602
+
1603
+
1604
+ </div>
1605
+
1606
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ttc">
1607
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ttc</code></h4>
1608
+ <pre class="f-3 highlighted-code"><span class="token selector">.ttc</span> <span class="token punctuation">{</span>
1609
+ <span class="token property">text-transform</span><span class="token punctuation">:</span> capitalize<span class="token punctuation">;</span>
1610
+ <span class="token punctuation">}</span></pre>
1611
+ </div>
1612
+ <div class="ml-3">
1613
+ <p class="p">
1614
+
1615
+ </p>
1616
+
1617
+
1618
+ </div>
1619
+
1620
+ <div class="mt-4 flex gap-3 items-center justify-between" id="tdn">
1621
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.tdn</code></h4>
1622
+ <pre class="f-3 highlighted-code"><span class="token selector">.tdn</span> <span class="token punctuation">{</span>
1623
+ <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
1624
+ <span class="token punctuation">}</span></pre>
1625
+ </div>
1626
+ <div class="ml-3">
1627
+ <p class="p">
1628
+
1629
+ </p>
1630
+
1631
+
1632
+ </div>
1633
+
1634
+ <div class="mt-4 flex gap-3 items-center justify-between" id="tdu">
1635
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.tdu</code></h4>
1636
+ <pre class="f-3 highlighted-code"><span class="token selector">.tdu</span> <span class="token punctuation">{</span>
1637
+ <span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span>
1638
+ <span class="token punctuation">}</span></pre>
1639
+ </div>
1640
+ <div class="ml-3">
1641
+ <p class="p">
1642
+
1643
+ </p>
1644
+
1645
+
1646
+ </div>
1647
+
1648
+ <div class="mt-4 flex gap-3 items-center justify-between" id="u">
1649
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.u</code></h4>
1650
+ <pre class="f-3 highlighted-code"><span class="token selector">.u</span> <span class="token punctuation">{</span>
1651
+ <span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span>
1652
+ <span class="token punctuation">}</span></pre>
1653
+ </div>
1654
+ <div class="ml-3">
1655
+ <p class="p">
1656
+
1657
+ </p>
1658
+
1659
+
1660
+ </div>
1661
+
1662
+ <div class="mt-4 flex gap-3 items-center justify-between" id="tds">
1663
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.tds</code></h4>
1664
+ <pre class="f-3 highlighted-code"><span class="token selector">.tds</span> <span class="token punctuation">{</span>
1665
+ <span class="token property">text-decoration</span><span class="token punctuation">:</span> line-through<span class="token punctuation">;</span>
1666
+ <span class="token punctuation">}</span></pre>
1667
+ </div>
1668
+ <div class="ml-3">
1669
+ <p class="p">
1670
+
1671
+ </p>
1672
+
1673
+
1674
+ </div>
1675
+
1676
+ <div class="mt-4 flex gap-3 items-center justify-between" id="tdo">
1677
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.tdo</code></h4>
1678
+ <pre class="f-3 highlighted-code"><span class="token selector">.tdo</span> <span class="token punctuation">{</span>
1679
+ <span class="token property">text-decoration</span><span class="token punctuation">:</span> overline<span class="token punctuation">;</span>
1680
+ <span class="token punctuation">}</span></pre>
1681
+ </div>
1682
+ <div class="ml-3">
1683
+ <p class="p">
1684
+
1685
+ </p>
1686
+
1687
+
1688
+ </div>
1689
+
1690
+
1691
+ <h3 class="f-5 mt-4" id="class-scale:indent">Indent</h3>
1692
+ <p class="p">
1693
+ <p>Text indents. This is a seven-step scale with -3 to positive 3.</p>
1694
+
1695
+ </p>
1696
+
1697
+
1698
+ <div class="mt-4 flex gap-3 items-center justify-between" id="indent--3">
1699
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.indent--3</code></h4>
1700
+ <pre class="f-3 highlighted-code"><span class="token selector">.indent--3</span> <span class="token punctuation">{</span>
1701
+ <span class="token property">text-indent</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--indent-3<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
1702
+ <span class="token punctuation">}</span></pre>
1703
+ </div>
1704
+ <div class="ml-3">
1705
+ <p class="p">
1706
+
1707
+ </p>
1708
+
1709
+
1710
+ </div>
1711
+
1712
+ <div class="mt-4 flex gap-3 items-center justify-between" id="indent--2">
1713
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.indent--2</code></h4>
1714
+ <pre class="f-3 highlighted-code"><span class="token selector">.indent--2</span> <span class="token punctuation">{</span>
1715
+ <span class="token property">text-indent</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--indent-2<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
1716
+ <span class="token punctuation">}</span></pre>
1717
+ </div>
1718
+ <div class="ml-3">
1719
+ <p class="p">
1720
+
1721
+ </p>
1722
+
1723
+
1724
+ </div>
1725
+
1726
+ <div class="mt-4 flex gap-3 items-center justify-between" id="indent--1">
1727
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.indent--1</code></h4>
1728
+ <pre class="f-3 highlighted-code"><span class="token selector">.indent--1</span> <span class="token punctuation">{</span>
1729
+ <span class="token property">text-indent</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--indent-1<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
1730
+ <span class="token punctuation">}</span></pre>
1731
+ </div>
1732
+ <div class="ml-3">
1733
+ <p class="p">
1734
+
1735
+ </p>
1736
+
1737
+
1738
+ </div>
1739
+
1740
+ <div class="mt-4 flex gap-3 items-center justify-between" id="indent-0">
1741
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.indent-0</code></h4>
1742
+ <pre class="f-3 highlighted-code"><span class="token selector">.indent-0</span> <span class="token punctuation">{</span>
1743
+ <span class="token property">text-indent</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
1744
+ <span class="token punctuation">}</span></pre>
1745
+ </div>
1746
+ <div class="ml-3">
1747
+ <p class="p">
1748
+
1749
+ </p>
1750
+
1751
+
1752
+ </div>
1753
+
1754
+ <div class="mt-4 flex gap-3 items-center justify-between" id="indent-1">
1755
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.indent-1</code></h4>
1756
+ <pre class="f-3 highlighted-code"><span class="token selector">.indent-1</span> <span class="token punctuation">{</span>
1757
+ <span class="token property">text-indent</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--indent-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
1758
+ <span class="token punctuation">}</span></pre>
1759
+ </div>
1760
+ <div class="ml-3">
1761
+ <p class="p">
1762
+
1763
+ </p>
1764
+
1765
+
1766
+ </div>
1767
+
1768
+ <div class="mt-4 flex gap-3 items-center justify-between" id="indent-2">
1769
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.indent-2</code></h4>
1770
+ <pre class="f-3 highlighted-code"><span class="token selector">.indent-2</span> <span class="token punctuation">{</span>
1771
+ <span class="token property">text-indent</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--indent-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
1772
+ <span class="token punctuation">}</span></pre>
1773
+ </div>
1774
+ <div class="ml-3">
1775
+ <p class="p">
1776
+
1777
+ </p>
1778
+
1779
+
1780
+ </div>
1781
+
1782
+ <div class="mt-4 flex gap-3 items-center justify-between" id="indent-3">
1783
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.indent-3</code></h4>
1784
+ <pre class="f-3 highlighted-code"><span class="token selector">.indent-3</span> <span class="token punctuation">{</span>
1785
+ <span class="token property">text-indent</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--indent-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
1786
+ <span class="token punctuation">}</span></pre>
1787
+ </div>
1788
+ <div class="ml-3">
1789
+ <p class="p">
1790
+
1791
+ </p>
1792
+
1793
+
1794
+ </div>
1795
+
1796
+
1797
+ <h3 class="f-5 mt-4" id="class-group:text-overflow">Text Overflow</h3>
1798
+ <p class="p">
1799
+ <p>Text overflow</p>
1800
+
1801
+ </p>
1802
+
1803
+
1804
+ <div class="mt-4 flex gap-3 items-center justify-between" id="truncate">
1805
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.truncate</code></h4>
1806
+ <pre class="f-3 highlighted-code"><span class="token selector">.truncate</span> <span class="token punctuation">{</span>
1807
+ <span class="token property">text-overflow</span><span class="token punctuation">:</span> ellipsis<span class="token punctuation">;</span>
1808
+ <span class="token punctuation">}</span></pre>
1809
+ </div>
1810
+ <div class="ml-3">
1811
+ <p class="p">
1812
+
1813
+ </p>
1814
+
1815
+
1816
+ </div>
1817
+
1818
+ <div class="mt-4 flex gap-3 items-center justify-between" id="clip">
1819
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.clip</code></h4>
1820
+ <pre class="f-3 highlighted-code"><span class="token selector">.clip</span> <span class="token punctuation">{</span>
1821
+ <span class="token property">text-overflow</span><span class="token punctuation">:</span> clip<span class="token punctuation">;</span>
1822
+ <span class="token punctuation">}</span></pre>
1823
+ </div>
1824
+ <div class="ml-3">
1825
+ <p class="p">
1826
+
1827
+ </p>
1828
+
1829
+
1830
+ </div>
1831
+
1832
+
1833
+ <h3 class="f-5 mt-4" id="class-group:whitespace">Whitespace</h3>
1834
+ <p class="p">
1835
+ <p>Whitespace</p>
1836
+
1837
+ </p>
1838
+
1839
+
1840
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ws-normal">
1841
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ws-normal</code></h4>
1842
+ <pre class="f-3 highlighted-code"><span class="token selector">.ws-normal</span> <span class="token punctuation">{</span>
1843
+ <span class="token property">white-space</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
1844
+ <span class="token punctuation">}</span></pre>
1845
+ </div>
1846
+ <div class="ml-3">
1847
+ <p class="p">
1848
+
1849
+ </p>
1850
+
1851
+
1852
+ </div>
1853
+
1854
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ws-nowrap">
1855
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ws-nowrap</code></h4>
1856
+ <pre class="f-3 highlighted-code"><span class="token selector">.ws-nowrap</span> <span class="token punctuation">{</span>
1857
+ <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span>
1858
+ <span class="token punctuation">}</span></pre>
1859
+ </div>
1860
+ <div class="ml-3">
1861
+ <p class="p">
1862
+
1863
+ </p>
1864
+
1865
+
1866
+ </div>
1867
+
1868
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ws-pre">
1869
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ws-pre</code></h4>
1870
+ <pre class="f-3 highlighted-code"><span class="token selector">.ws-pre</span> <span class="token punctuation">{</span>
1871
+ <span class="token property">white-space</span><span class="token punctuation">:</span> pre<span class="token punctuation">;</span>
1872
+ <span class="token punctuation">}</span></pre>
1873
+ </div>
1874
+ <div class="ml-3">
1875
+ <p class="p">
1876
+
1877
+ </p>
1878
+
1879
+
1880
+ </div>
1881
+
1882
+
1883
+ <h3 class="f-5 mt-4" id="class-group:measure">Measure/Text Width</h3>
1884
+ <p class="p">
1885
+ <p>Maximum widths useful for text blocks.</p>
1886
+
1887
+ </p>
1888
+
1889
+
1890
+ <div class="mt-4 flex gap-3 items-center justify-between" id="measure">
1891
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.measure</code></h4>
1892
+ <pre class="f-3 highlighted-code"><span class="token selector">.measure</span> <span class="token punctuation">{</span>
1893
+ <span class="token property">max-width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--tw<span class="token punctuation">)</span><span class="token punctuation">;</span>
1894
+ <span class="token punctuation">}</span></pre>
1895
+ </div>
1896
+ <div class="ml-3">
1897
+ <p class="p">
1898
+ <p>A standard text width useful for any occassion. This should provide a comfortable reading experience for any font and size.</p>
1899
+
1900
+ </p>
1901
+
1902
+
1903
+ <h5 class="f-2 ttu">
1904
+
1905
+ Example
1906
+
1907
+ </h5>
1908
+
1909
+
1910
+ <div class="mv-3 example">
1911
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>measure<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1912
+ A core tenet of design is that same should be same, while
1913
+ different be then different. Meaning: if two elements are
1914
+ intended to be the same sort of thing, or reference the
1915
+ same sort of information, they should have clear
1916
+ consonance and harmony. Conversely, if two elements are
1917
+ unrelated, they should be quite clearly different.
1918
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
1919
+ <div class="example-demonstration">
1920
+
1921
+ <p class="measure">
1922
+ A core tenet of design is that same should be same, while different be then different. Meaning: if two elements are intended to be the same sort of thing, or reference the same sort of information, they should have clear consonance and harmony. Conversely, if two elements are unrelated, they should be quite clearly different.
1923
+ </p>
1924
+
1925
+ </div>
1926
+ </div>
1927
+
1928
+
1929
+ </div>
1930
+
1931
+ <div class="mt-4 flex gap-3 items-center justify-between" id="measure-wide">
1932
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.measure-wide</code></h4>
1933
+ <pre class="f-3 highlighted-code"><span class="token selector">.measure-wide</span> <span class="token punctuation">{</span>
1934
+ <span class="token property">max-width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--tw-wide<span class="token punctuation">)</span><span class="token punctuation">;</span>
1935
+ <span class="token punctuation">}</span></pre>
1936
+ </div>
1937
+ <div class="ml-3">
1938
+ <p class="p">
1939
+ <p>A slighter wider, but still readable width.</p>
1940
+
1941
+ </p>
1942
+
1943
+
1944
+ <h5 class="f-2 ttu">
1945
+
1946
+ Example
1947
+
1948
+ </h5>
1949
+
1950
+
1951
+ <div class="mv-3 example">
1952
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>measure-wide<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1953
+ A core tenet of design is that same should be same, while
1954
+ different be then different. Meaning: if two elements are
1955
+ intended to be the same sort of thing, or reference the
1956
+ same sort of information, they should have clear
1957
+ consonance and harmony. Conversely, if two elements are
1958
+ unrelated, they should be quite clearly different.
1959
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
1960
+ <div class="example-demonstration">
1961
+
1962
+ <p class="measure-wide">
1963
+ A core tenet of design is that same should be same, while different be then different. Meaning: if two elements are intended to be the same sort of thing, or reference the same sort of information, they should have clear consonance and harmony. Conversely, if two elements are unrelated, they should be quite clearly different.
1964
+ </p>
1965
+
1966
+ </div>
1967
+ </div>
1968
+
1969
+
1970
+ </div>
1971
+
1972
+ <div class="mt-4 flex gap-3 items-center justify-between" id="measure-narrow">
1973
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.measure-narrow</code></h4>
1974
+ <pre class="f-3 highlighted-code"><span class="token selector">.measure-narrow</span> <span class="token punctuation">{</span>
1975
+ <span class="token property">max-width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--tw-narrow<span class="token punctuation">)</span><span class="token punctuation">;</span>
1976
+ <span class="token punctuation">}</span></pre>
1977
+ </div>
1978
+ <div class="ml-3">
1979
+ <p class="p">
1980
+ <p>A slighter narrower, but still readable width.</p>
1981
+
1982
+ </p>
1983
+
1984
+
1985
+ <h5 class="f-2 ttu">
1986
+
1987
+ Example
1988
+
1989
+ </h5>
1990
+
1991
+
1992
+ <div class="mv-3 example">
1993
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>measure-narrow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1994
+ A core tenet of design is that same should be same, while
1995
+ different be then different. Meaning: if two elements are
1996
+ intended to be the same sort of thing, or reference the
1997
+ same sort of information, they should have clear
1998
+ consonance and harmony. Conversely, if two elements are
1999
+ unrelated, they should be quite clearly different.
2000
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
2001
+ <div class="example-demonstration">
2002
+
2003
+ <p class="measure-narrow">
2004
+ A core tenet of design is that same should be same, while different be then different. Meaning: if two elements are intended to be the same sort of thing, or reference the same sort of information, they should have clear consonance and harmony. Conversely, if two elements are unrelated, they should be quite clearly different.
2005
+ </p>
2006
+
2007
+ </div>
2008
+ </div>
2009
+
2010
+
2011
+ </div>
2012
+
2013
+
2014
+ <h3 class="f-5 mt-4" id="class-group:typography-aliases">Typography Aliases</h3>
2015
+ <p class="p">
2016
+ <p>Aliases to save precious keystrokes.</p>
2017
+
2018
+ </p>
2019
+
2020
+
2021
+ <div class="mt-4 flex gap-3 items-center justify-between" id="p">
2022
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.p</code></h4>
2023
+ <pre class="f-3 highlighted-code"><span class="token selector">.p</span> <span class="token punctuation">{</span>
2024
+ <span class="token property">max-width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--tw<span class="token punctuation">)</span><span class="token punctuation">;</span>
2025
+ <span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--lh-copy<span class="token punctuation">)</span><span class="token punctuation">;</span>
2026
+ <span class="token punctuation">}</span></pre>
2027
+ </div>
2028
+ <div class="ml-3">
2029
+ <p class="p">
2030
+ <p>Set reasonable typography for some text, namely, setting <a href="/brut-css/classes/typography.html#measure"><code>.measure</code></a> and <a href="/brut-css/classes/typography.html#lh-copy"><code>.lh-copy</code></a> at the same time.</p>
2031
+
2032
+ </p>
2033
+
2034
+
2035
+ <h5 class="f-2 ttu">
2036
+
2037
+ Example
2038
+
2039
+ </h5>
2040
+
2041
+
2042
+ <div class="mv-3 example">
2043
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>p<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2044
+ A core tenet of design is that same should be same, while
2045
+ different be then different. Meaning: if two elements are
2046
+ intended to be the same sort of thing, or reference the
2047
+ same sort of information, they should have clear
2048
+ consonance and harmony. Conversely, if two elements are
2049
+ unrelated, they should be quite clearly different.
2050
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2051
+ <div class="example-demonstration">
2052
+
2053
+ <div class="p">
2054
+ A core tenet of design is that same should be same, while different be then different. Meaning: if two elements are intended to be the same sort of thing, or reference the same sort of information, they should have clear consonance and harmony. Conversely, if two elements are unrelated, they should be quite clearly different.
2055
+ </div>
2056
+
2057
+ </div>
2058
+ </div>
2059
+
2060
+
2061
+ </div>
2062
+
2063
+ <div class="mt-4 flex gap-3 items-center justify-between" id="b">
2064
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.b</code></h4>
2065
+ <pre class="f-3 highlighted-code"><span class="token selector">.b</span> <span class="token punctuation">{</span>
2066
+ <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
2067
+ <span class="token punctuation">}</span></pre>
2068
+ </div>
2069
+ <div class="ml-3">
2070
+ <p class="p">
2071
+ <p>Shorthand for a bold font.</p>
2072
+
2073
+ </p>
2074
+
2075
+
2076
+ <h5 class="f-2 ttu">
2077
+
2078
+ Example
2079
+
2080
+ </h5>
2081
+
2082
+
2083
+ <div class="mv-3 example">
2084
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
2085
+ <div class="example-demonstration">
2086
+
2087
+ <p class="b">Things should be what they are</p>
2088
+
2089
+ </div>
2090
+ </div>
2091
+
2092
+
2093
+ </div>
2094
+
2095
+ <div class="mt-4 flex gap-3 items-center justify-between" id="sc">
2096
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.sc</code></h4>
2097
+ <pre class="f-3 highlighted-code"><span class="token selector">.sc</span> <span class="token punctuation">{</span>
2098
+ <span class="token property">font-variant</span><span class="token punctuation">:</span> small-caps<span class="token punctuation">;</span>
2099
+ <span class="token punctuation">}</span></pre>
2100
+ </div>
2101
+ <div class="ml-3">
2102
+ <p class="p">
2103
+ <p>Shorthand for small-caps</p>
2104
+
2105
+ </p>
2106
+
2107
+
2108
+ <h5 class="f-2 ttu">
2109
+
2110
+ Example
2111
+
2112
+ </h5>
2113
+
2114
+
2115
+ <div class="mv-3 example">
2116
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
2117
+ <div class="example-demonstration">
2118
+
2119
+ <p class="sc">Things should be what they are</p>
2120
+
2121
+ </div>
2122
+ </div>
2123
+
2124
+
2125
+ </div>
2126
+
2127
+ <div class="mt-4 flex gap-3 items-center justify-between" id="i">
2128
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.i</code></h4>
2129
+ <pre class="f-3 highlighted-code"><span class="token selector">.i</span> <span class="token punctuation">{</span>
2130
+ <span class="token property">font-style</span><span class="token punctuation">:</span> italic<span class="token punctuation">;</span>
2131
+ <span class="token punctuation">}</span></pre>
2132
+ </div>
2133
+ <div class="ml-3">
2134
+ <p class="p">
2135
+ <p>Shorthand for italic</p>
2136
+
2137
+ </p>
2138
+
2139
+
2140
+ <h5 class="f-2 ttu">
2141
+
2142
+ Example
2143
+
2144
+ </h5>
2145
+
2146
+
2147
+ <div class="mv-3 example">
2148
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>i<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Things should be what they are<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre>
2149
+ <div class="example-demonstration">
2150
+
2151
+ <p class="i">Things should be what they are</p>
2152
+
2153
+ </div>
2154
+ </div>
2155
+
2156
+
2157
+ </div>
2158
+
2159
+
2160
+ </article>
2161
+ <div class="z-5 ma-0 overflow-y-auto pa-2 w-20 h-100 pos-absolute top-0 right-2">
2162
+ <div class="pa-3 ba bc-gray-700 bg-gray-900 br-3 shadow-1 ridiculous-liquid-glass-is-all-the-rage">
2163
+ <h3>On this Page</h3>
2164
+ <ul class="lst-none ma-0 pa-0">
2165
+
2166
+ <li class="lh-copy"><a href="#class-group:font-family">Font Family</a></li>
2167
+
2168
+ <li class="lh-copy"><a href="#class-scale:font-size">Font Size</a></li>
2169
+
2170
+ <li class="lh-copy"><a href="#class-scale:font-weights">Font Weights</a></li>
2171
+
2172
+ <li class="lh-copy"><a href="#class-group:styles-variants">Styles Variants</a></li>
2173
+
2174
+ <li class="lh-copy"><a href="#class-group:tracking">Tracking</a></li>
2175
+
2176
+ <li class="lh-copy"><a href="#class-group:leading">Leading/Line Height</a></li>
2177
+
2178
+ <li class="lh-copy"><a href="#class-group:text-align">Text Align</a></li>
2179
+
2180
+ <li class="lh-copy"><a href="#class-group:text-transform">Text Transform</a></li>
2181
+
2182
+ <li class="lh-copy"><a href="#class-scale:indent">Indent</a></li>
2183
+
2184
+ <li class="lh-copy"><a href="#class-group:text-overflow">Text Overflow</a></li>
2185
+
2186
+ <li class="lh-copy"><a href="#class-group:whitespace">Whitespace</a></li>
2187
+
2188
+ <li class="lh-copy"><a href="#class-group:measure">Measure/Text Width</a></li>
2189
+
2190
+ <li class="lh-copy"><a href="#class-group:typography-aliases">Typography Aliases</a></li>
2191
+
2192
+ </ul>
2193
+ </div>
2194
+ </div>
2195
+ </div>
2196
+ <footer class="bg-black white mt-auto">
2197
+ <p class="tc">
2198
+ Copyright &copy; 2025 David Bryant Copeland.
2199
+ </p>
2200
+ </footer>
2201
+ </section>
2202
+ </main>
2203
+ </body>
2204
+
2205
+ </html>
2206
+