brut 0.0.21 → 0.0.22
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.
- checksums.yaml +4 -4
- data/.gitignore +24 -3
- data/.nvim.lua +1 -0
- data/Dockerfile.dx +12 -3
- data/Gemfile.lock +9 -7
- data/README.md +0 -7
- data/Rakefile +6 -4
- data/bin/dev +20 -0
- data/bin/docs +27 -0
- data/bin/setup +47 -1
- data/brut-css/.nvim.lua +1 -0
- data/brut-css/README.md +28 -0
- data/brut-css/bin/build +31 -0
- data/brut-css/bin/dev +1 -0
- data/brut-css/bin/docs +15 -0
- data/brut-css/bin/setup +5 -0
- data/brut-css/config/media-queries-all.css +15 -0
- data/brut-css/config/media-queries-minimal.css +5 -0
- data/brut-css/config/postcss.config.cjs +7 -0
- data/brut-css/config/pseudo-classes-all.css +9 -0
- data/brut-css/dx +1 -0
- data/brut-css/package-lock.json +3217 -0
- data/brut-css/package.json +36 -0
- data/brut-css/src/css/appearance.css +145 -0
- data/brut-css/src/css/border.css +522 -0
- data/brut-css/src/css/colors.css +3502 -0
- data/brut-css/src/css/dimensions.css +548 -0
- data/brut-css/src/css/flex.css +179 -0
- data/brut-css/src/css/index.css +13 -0
- data/brut-css/src/css/layout.css +120 -0
- data/brut-css/src/css/list.css +41 -0
- data/brut-css/src/css/positioning.css +354 -0
- data/brut-css/src/css/properties/colors.css +455 -0
- data/brut-css/src/css/properties/index.css +3 -0
- data/brut-css/src/css/properties/spacing.css +140 -0
- data/brut-css/src/css/properties/typography.css +224 -0
- data/brut-css/src/css/reset.css +107 -0
- data/brut-css/src/css/spacing.css +585 -0
- data/brut-css/src/css/typography.css +519 -0
- data/brut-css/src/css/utils.css +104 -0
- data/brut-css/src/docs/1_getting-started/1_overview.md +46 -0
- data/brut-css/src/docs/1_getting-started/2_installation.md +25 -0
- data/brut-css/src/docs/1_getting-started/3_core-concepts.md +75 -0
- data/brut-css/src/docs/1_getting-started/4_simple-example.md +132 -0
- data/brut-css/src/docs/1_getting-started/page.html.ejs +10 -0
- data/brut-css/src/docs/2_properties/page.html.ejs +71 -0
- data/brut-css/src/docs/3_classes/color-demo.html.ejs +31 -0
- data/brut-css/src/docs/3_classes/page.html.ejs +87 -0
- data/brut-css/src/docs/4_customization/1_design-system.md +36 -0
- data/brut-css/src/docs/4_customization/2_breakpoints.md +75 -0
- data/brut-css/src/docs/4_customization/3_pseudo-classes.md +74 -0
- data/brut-css/src/docs/4_customization/4_advanced-configuration.md +40 -0
- data/brut-css/src/docs/4_customization/page.html.ejs +10 -0
- data/brut-css/src/docs/docs.css +98 -0
- data/brut-css/src/docs/includes/body-and-header.html.ejs +30 -0
- data/brut-css/src/docs/includes/footer-and-rest.html.ejs +9 -0
- data/brut-css/src/docs/includes/head.html.ejs +5 -0
- data/brut-css/src/docs/includes/nav.html.ejs +10 -0
- data/brut-css/src/docs/index.html.ejs +32 -0
- data/brut-css/src/docs/prism-twilight.min.css +1 -0
- data/brut-css/src/js/Logger.js +71 -0
- data/brut-css/src/js/build.js +111 -0
- data/brut-css/src/js/cli/CLIArgError.js +7 -0
- data/brut-css/src/js/cli/Debug.js +27 -0
- data/brut-css/src/js/cli/DocsDir.js +16 -0
- data/brut-css/src/js/cli/DocsTemplateSourceDir.js +16 -0
- data/brut-css/src/js/cli/InputFile.js +31 -0
- data/brut-css/src/js/cli/MediaQueryConfigFile.js +10 -0
- data/brut-css/src/js/cli/OutputFile.js +22 -0
- data/brut-css/src/js/cli/ParsedArg.js +17 -0
- data/brut-css/src/js/cli/PathToBrutCSSRoot.js +19 -0
- data/brut-css/src/js/cli/PseudoClassConfigFile.js +11 -0
- data/brut-css/src/js/cli.js +108 -0
- data/brut-css/src/js/docGenerator.js +467 -0
- data/brut-css/src/js/mediaQueryConfigParser.js +98 -0
- data/brut-css/src/js/post-css-plugins/addMediaQueriesPlugin.js +49 -0
- data/brut-css/src/js/post-css-plugins/addPseudoClassesPlugin.js +42 -0
- data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Category.js +9 -0
- data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/DocState.js +185 -0
- data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Documentable.js +8 -0
- data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Group.js +7 -0
- data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/ParsedComment.js +73 -0
- data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Property.js +9 -0
- data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/PropertyCategory.js +4 -0
- data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/PropertyGroup.js +8 -0
- data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Rule.js +12 -0
- data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/RuleCategory.js +4 -0
- data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/RuleGroup.js +8 -0
- data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/SeeRef.js +5 -0
- data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/SeeURL.js +9 -0
- data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin.js +49 -0
- data/brut-css/src/js/post-css-plugins/generateRootCustomPropertiesPlugin.js +45 -0
- data/brut-css/src/js/pseudoClassConfigParser.js +145 -0
- data/brut-js/.projections.json +10 -0
- data/brut-js/README.md +118 -0
- data/brut-js/bin/build +10 -0
- data/brut-js/bin/ci +5 -0
- data/brut-js/bin/setup +5 -0
- data/brut-js/docs/README.md +8 -0
- data/brut-js/docs/jsdoc-plugins/customElementTag.js +8 -0
- data/brut-js/docs/jsdoc-theme/publish.js +692 -0
- data/brut-js/docs/jsdoc-theme/static/scripts/linenumber.js +25 -0
- data/brut-js/docs/jsdoc-theme/static/scripts/prettify/Apache-License-2.0.txt +202 -0
- data/brut-js/docs/jsdoc-theme/static/scripts/prettify/lang-css.js +2 -0
- data/brut-js/docs/jsdoc-theme/static/scripts/prettify/prettify.js +28 -0
- data/brut-js/docs/jsdoc-theme/static/styles/jsdoc-default.css +327 -0
- data/brut-js/docs/jsdoc-theme/static/styles/prettify-jsdoc.css +111 -0
- data/brut-js/docs/jsdoc-theme/static/styles/prettify-tomorrow.css +132 -0
- data/brut-js/docs/jsdoc-theme/tmpl/augments.tmpl +10 -0
- data/brut-js/docs/jsdoc-theme/tmpl/container.tmpl +199 -0
- data/brut-js/docs/jsdoc-theme/tmpl/details.tmpl +143 -0
- data/brut-js/docs/jsdoc-theme/tmpl/example.tmpl +2 -0
- data/brut-js/docs/jsdoc-theme/tmpl/examples.tmpl +13 -0
- data/brut-js/docs/jsdoc-theme/tmpl/exceptions.tmpl +32 -0
- data/brut-js/docs/jsdoc-theme/tmpl/layout.tmpl +38 -0
- data/brut-js/docs/jsdoc-theme/tmpl/mainpage.tmpl +14 -0
- data/brut-js/docs/jsdoc-theme/tmpl/members.tmpl +38 -0
- data/brut-js/docs/jsdoc-theme/tmpl/method.tmpl +131 -0
- data/brut-js/docs/jsdoc-theme/tmpl/modifies.tmpl +14 -0
- data/brut-js/docs/jsdoc-theme/tmpl/params.tmpl +131 -0
- data/brut-js/docs/jsdoc-theme/tmpl/properties.tmpl +108 -0
- data/brut-js/docs/jsdoc-theme/tmpl/returns.tmpl +19 -0
- data/brut-js/docs/jsdoc-theme/tmpl/source.tmpl +8 -0
- data/brut-js/docs/jsdoc-theme/tmpl/tutorial.tmpl +19 -0
- data/brut-js/docs/jsdoc-theme/tmpl/type.tmpl +7 -0
- data/brut-js/docs/jsdoc.config.json +23 -0
- data/brut-js/docs/package-lock.json +343 -0
- data/brut-js/docs/package.json +7 -0
- data/brut-js/package-lock.json +2171 -0
- data/brut-js/package.json +32 -0
- data/brut-js/specs/AjaxSubmit.spec.js +256 -0
- data/brut-js/specs/Autosubmit.spec.js +127 -0
- data/brut-js/specs/ConfirmSubmit.spec.js +193 -0
- data/brut-js/specs/ConstraintViolationMessage.spec.js +33 -0
- data/brut-js/specs/ConstraintViolationMessages.spec.js +29 -0
- data/brut-js/specs/CopyToClipboard.spec.js +35 -0
- data/brut-js/specs/Form.spec.js +181 -0
- data/brut-js/specs/I18nTranslation.spec.js +19 -0
- data/brut-js/specs/LocaleDetection.spec.js +22 -0
- data/brut-js/specs/Message.spec.js +15 -0
- data/brut-js/specs/SpecHelper.js +23 -0
- data/brut-js/specs/Tabs.spec.js +41 -0
- data/brut-js/specs/config/asset_metadata.json +7 -0
- data/brut-js/src/AjaxSubmit.js +384 -0
- data/brut-js/src/Autosubmit.js +63 -0
- data/brut-js/src/BaseCustomElement.js +261 -0
- data/brut-js/src/ConfirmSubmit.js +116 -0
- data/brut-js/src/ConfirmationDialog.js +143 -0
- data/brut-js/src/ConstraintViolationMessage.js +125 -0
- data/brut-js/src/ConstraintViolationMessages.js +98 -0
- data/brut-js/src/CopyToClipboard.js +96 -0
- data/brut-js/src/Form.js +151 -0
- data/brut-js/src/I18nTranslation.js +61 -0
- data/brut-js/src/LocaleDetection.js +117 -0
- data/brut-js/src/Logger.js +90 -0
- data/brut-js/src/Message.js +56 -0
- data/brut-js/src/RichString.js +113 -0
- data/brut-js/src/Tabs.js +168 -0
- data/brut-js/src/Tracing.js +247 -0
- data/brut-js/src/appForTestingOnly.js +15 -0
- data/brut-js/src/index.js +130 -0
- data/brut-js/src/testing/AssetMetadata.js +35 -0
- data/brut-js/src/testing/AssetMetadataLoader.js +25 -0
- data/brut-js/src/testing/CustomElementTest.js +235 -0
- data/brut-js/src/testing/DOMCreator.js +45 -0
- data/brut-js/src/testing/index.js +48 -0
- data/brutrb.com/.vitepress/config.mjs +106 -0
- data/brutrb.com/.vitepress/plugins/jsdocLinker.js +34 -0
- data/brutrb.com/.vitepress/plugins/rdocLinker.js +18 -0
- data/brutrb.com/.vitepress/theme/custom.css +7 -0
- data/brutrb.com/.vitepress/theme/index.js +18 -0
- data/brutrb.com/.vitepress/theme/style.css +149 -0
- data/brutrb.com/ai.md +68 -0
- data/brutrb.com/assets.md +138 -0
- data/brutrb.com/bin/build +5 -0
- data/brutrb.com/bin/deploy +7 -0
- data/brutrb.com/bin/dev +5 -0
- data/brutrb.com/bin/setup +5 -0
- data/brutrb.com/brut-js.md +117 -0
- data/brutrb.com/business-logic.md +55 -0
- data/brutrb.com/cli.md +278 -0
- data/brutrb.com/components.md +243 -0
- data/brutrb.com/configuration.md +257 -0
- data/brutrb.com/css.md +103 -0
- data/brutrb.com/custom-element-tests.md +149 -0
- data/brutrb.com/database-access.md +201 -0
- data/brutrb.com/database-schema.md +312 -0
- data/brutrb.com/deployment.md +66 -0
- data/brutrb.com/dev-environment.md +179 -0
- data/brutrb.com/doc-conventions.md +39 -0
- data/brutrb.com/end-to-end-tests.md +174 -0
- data/brutrb.com/flash-and-session.md +224 -0
- data/brutrb.com/forms.md +866 -0
- data/brutrb.com/getting-started.md +66 -0
- data/brutrb.com/handlers.md +153 -0
- data/brutrb.com/hooks.md +178 -0
- data/brutrb.com/i18n.md +188 -0
- data/brutrb.com/images/Makefile +10 -0
- data/brutrb.com/images/dev-env-overview.dot +54 -0
- data/brutrb.com/images/dev-env-overview.png +0 -0
- data/brutrb.com/images/dev-env-protocol.dot +37 -0
- data/brutrb.com/images/dev-env-protocol.png +0 -0
- data/brutrb.com/images/logo-300.png +0 -0
- data/brutrb.com/images/logo.png +0 -0
- data/brutrb.com/images/overview.graffle +0 -0
- data/brutrb.com/images/overview.png +0 -0
- data/brutrb.com/images/spa.dot +19 -0
- data/brutrb.com/images/spa.png +0 -0
- data/brutrb.com/images/workspace-protocol.dot +44 -0
- data/brutrb.com/images/workspace-protocol.png +0 -0
- data/brutrb.com/index.md +36 -0
- data/brutrb.com/instrumentation.md +183 -0
- data/brutrb.com/javascript.md +122 -0
- data/brutrb.com/jobs.md +14 -0
- data/brutrb.com/keyword-injection.md +237 -0
- data/brutrb.com/markdown-examples.md +85 -0
- data/brutrb.com/middleware.md +80 -0
- data/brutrb.com/not-released.md +5 -0
- data/brutrb.com/overview.md +404 -0
- data/brutrb.com/package-lock.json +2404 -0
- data/brutrb.com/package.json +11 -0
- data/brutrb.com/pages.md +378 -0
- data/brutrb.com/public/images/logo-300.png +0 -0
- data/brutrb.com/public/images/logo.png +0 -0
- data/brutrb.com/routes.md +215 -0
- data/brutrb.com/security.md +105 -0
- data/brutrb.com/seed-data.md +63 -0
- data/brutrb.com/space-time-continuum.md +85 -0
- data/brutrb.com/tutorial.md +3 -0
- data/brutrb.com/unit-tests.md +148 -0
- data/docker-compose.dx.yml +6 -3
- data/docs/404.html +21 -0
- data/docs/CNAME +1 -0
- data/docs/ai.html +24 -0
- data/docs/api/Brut/BackEnd/SeedData.html +493 -0
- data/docs/api/Brut/BackEnd/Sidekiq/Middlewares/Server/FlushSpans.html +214 -0
- data/docs/api/Brut/BackEnd/Sidekiq/Middlewares/Server.html +125 -0
- data/docs/api/Brut/BackEnd/Sidekiq/Middlewares.html +125 -0
- data/docs/api/Brut/BackEnd/Sidekiq.html +125 -0
- data/docs/api/Brut/BackEnd/Validators/FormValidator.html +414 -0
- data/docs/api/Brut/BackEnd/Validators.html +128 -0
- data/docs/api/Brut/BackEnd.html +132 -0
- data/docs/api/Brut/CLI/App.html +1576 -0
- data/docs/api/Brut/CLI/AppRunner.html +491 -0
- data/docs/api/Brut/CLI/Apps/BuildAssets/All.html +264 -0
- data/docs/api/Brut/CLI/Apps/BuildAssets/CSS.html +306 -0
- data/docs/api/Brut/CLI/Apps/BuildAssets/Images.html +262 -0
- data/docs/api/Brut/CLI/Apps/BuildAssets/JS.html +314 -0
- data/docs/api/Brut/CLI/Apps/BuildAssets.html +183 -0
- data/docs/api/Brut/CLI/Apps/DB/Create.html +365 -0
- data/docs/api/Brut/CLI/Apps/DB/Drop.html +357 -0
- data/docs/api/Brut/CLI/Apps/DB/Migrate.html +383 -0
- data/docs/api/Brut/CLI/Apps/DB/NewMigration.html +335 -0
- data/docs/api/Brut/CLI/Apps/DB/Rebuild.html +329 -0
- data/docs/api/Brut/CLI/Apps/DB/Seed.html +347 -0
- data/docs/api/Brut/CLI/Apps/DB/Status.html +383 -0
- data/docs/api/Brut/CLI/Apps/DB.html +183 -0
- data/docs/api/Brut/CLI/Apps/Scaffold/Action/Route.html +303 -0
- data/docs/api/Brut/CLI/Apps/Scaffold/Action.html +512 -0
- data/docs/api/Brut/CLI/Apps/Scaffold/Component.html +398 -0
- data/docs/api/Brut/CLI/Apps/Scaffold/CustomElementTest.html +374 -0
- data/docs/api/Brut/CLI/Apps/Scaffold/E2ETest.html +410 -0
- data/docs/api/Brut/CLI/Apps/Scaffold/Form.html +262 -0
- data/docs/api/Brut/CLI/Apps/Scaffold/Page/Route.html +303 -0
- data/docs/api/Brut/CLI/Apps/Scaffold/Page.html +480 -0
- data/docs/api/Brut/CLI/Apps/Scaffold/RoutesEditor.html +450 -0
- data/docs/api/Brut/CLI/Apps/Scaffold/Test.html +380 -0
- data/docs/api/Brut/CLI/Apps/Scaffold.html +253 -0
- data/docs/api/Brut/CLI/Apps/Test/Audit.html +464 -0
- data/docs/api/Brut/CLI/Apps/Test/E2e.html +407 -0
- data/docs/api/Brut/CLI/Apps/Test/JS.html +262 -0
- data/docs/api/Brut/CLI/Apps/Test/Run.html +578 -0
- data/docs/api/Brut/CLI/Apps/Test.html +253 -0
- data/docs/api/Brut/CLI/Apps.html +125 -0
- data/docs/api/Brut/CLI/Command.html +2342 -0
- data/docs/api/Brut/CLI/Error.html +139 -0
- data/docs/api/Brut/CLI/ExecutionResults/Result.html +664 -0
- data/docs/api/Brut/CLI/ExecutionResults.html +675 -0
- data/docs/api/Brut/CLI/Executor.html +430 -0
- data/docs/api/Brut/CLI/InvalidOption.html +245 -0
- data/docs/api/Brut/CLI/Options.html +753 -0
- data/docs/api/Brut/CLI/Output.html +699 -0
- data/docs/api/Brut/CLI/SystemExecError.html +451 -0
- data/docs/api/Brut/CLI.html +263 -0
- data/docs/api/Brut/FactoryBot.html +225 -0
- data/docs/api/Brut/Framework/App.html +1097 -0
- data/docs/api/Brut/Framework/Config.html +1045 -0
- data/docs/api/Brut/Framework/Container.html +1379 -0
- data/docs/api/Brut/Framework/Error.html +140 -0
- data/docs/api/Brut/Framework/Errors/AbstractMethod.html +144 -0
- data/docs/api/Brut/Framework/Errors/Bug.html +234 -0
- data/docs/api/Brut/Framework/Errors/MissingConfiguration.html +257 -0
- data/docs/api/Brut/Framework/Errors/MissingParameter.html +273 -0
- data/docs/api/Brut/Framework/Errors/NoClassForPath.html +471 -0
- data/docs/api/Brut/Framework/Errors/NotFound.html +308 -0
- data/docs/api/Brut/Framework/Errors/NotImplemented.html +234 -0
- data/docs/api/Brut/Framework/Errors.html +328 -0
- data/docs/api/Brut/Framework/FussyTypeEnforcement.html +392 -0
- data/docs/api/Brut/Framework/MCP.html +861 -0
- data/docs/api/Brut/Framework/ProjectEnvironment.html +648 -0
- data/docs/api/Brut/Framework.html +129 -0
- data/docs/api/Brut/FrontEnd/AssetPathResolver.html +317 -0
- data/docs/api/Brut/FrontEnd/Component/Helpers.html +326 -0
- data/docs/api/Brut/FrontEnd/Component.html +365 -0
- data/docs/api/Brut/FrontEnd/Components/ConstraintViolations.html +470 -0
- data/docs/api/Brut/FrontEnd/Components/FormTag.html +518 -0
- data/docs/api/Brut/FrontEnd/Components/I18nTranslations.html +317 -0
- data/docs/api/Brut/FrontEnd/Components/Input.html +195 -0
- data/docs/api/Brut/FrontEnd/Components/Inputs/CsrfToken.html +339 -0
- data/docs/api/Brut/FrontEnd/Components/Inputs/InputTag.html +660 -0
- data/docs/api/Brut/FrontEnd/Components/Inputs/RadioButton.html +417 -0
- data/docs/api/Brut/FrontEnd/Components/Inputs/SelectTagWithOptions.html +918 -0
- data/docs/api/Brut/FrontEnd/Components/Inputs/TextareaTag.html +651 -0
- data/docs/api/Brut/FrontEnd/Components/Inputs.html +125 -0
- data/docs/api/Brut/FrontEnd/Components/LocaleDetection.html +367 -0
- data/docs/api/Brut/FrontEnd/Components/PageIdentifier.html +336 -0
- data/docs/api/Brut/FrontEnd/Components/TimeTag.html +655 -0
- data/docs/api/Brut/FrontEnd/Components/Traceparent.html +352 -0
- data/docs/api/Brut/FrontEnd/Components.html +135 -0
- data/docs/api/Brut/FrontEnd/Download.html +467 -0
- data/docs/api/Brut/FrontEnd/Flash.html +1150 -0
- data/docs/api/Brut/FrontEnd/Form.html +1157 -0
- data/docs/api/Brut/FrontEnd/Forms/ConstraintViolation.html +634 -0
- data/docs/api/Brut/FrontEnd/Forms/Input.html +615 -0
- data/docs/api/Brut/FrontEnd/Forms/InputDeclarations.html +547 -0
- data/docs/api/Brut/FrontEnd/Forms/InputDefinition.html +1318 -0
- data/docs/api/Brut/FrontEnd/Forms/RadioButtonGroupInput.html +609 -0
- data/docs/api/Brut/FrontEnd/Forms/RadioButtonGroupInputDefinition.html +587 -0
- data/docs/api/Brut/FrontEnd/Forms/SelectInput.html +613 -0
- data/docs/api/Brut/FrontEnd/Forms/SelectInputDefinition.html +582 -0
- data/docs/api/Brut/FrontEnd/Forms/ValidityState.html +609 -0
- data/docs/api/Brut/FrontEnd/Forms.html +127 -0
- data/docs/api/Brut/FrontEnd/GenericResponse.html +377 -0
- data/docs/api/Brut/FrontEnd/Handler.html +442 -0
- data/docs/api/Brut/FrontEnd/Handlers/CspReportingHandler.html +318 -0
- data/docs/api/Brut/FrontEnd/Handlers/InstrumentationHandler/TraceParent.html +336 -0
- data/docs/api/Brut/FrontEnd/Handlers/InstrumentationHandler.html +399 -0
- data/docs/api/Brut/FrontEnd/Handlers/LocaleDetectionHandler.html +354 -0
- data/docs/api/Brut/FrontEnd/Handlers/MissingHandler/Form.html +151 -0
- data/docs/api/Brut/FrontEnd/Handlers/MissingHandler.html +315 -0
- data/docs/api/Brut/FrontEnd/Handlers.html +125 -0
- data/docs/api/Brut/FrontEnd/HandlingResults.html +339 -0
- data/docs/api/Brut/FrontEnd/HttpMethod.html +661 -0
- data/docs/api/Brut/FrontEnd/HttpStatus.html +496 -0
- data/docs/api/Brut/FrontEnd/InlineSvgLocator.html +284 -0
- data/docs/api/Brut/FrontEnd/Layout.html +318 -0
- data/docs/api/Brut/FrontEnd/Middleware.html +135 -0
- data/docs/api/Brut/FrontEnd/Middlewares/AnnotateBrutOwnedPaths.html +288 -0
- data/docs/api/Brut/FrontEnd/Middlewares/Favicon.html +292 -0
- data/docs/api/Brut/FrontEnd/Middlewares/OpenTelemetrySpan.html +324 -0
- data/docs/api/Brut/FrontEnd/Middlewares/ReloadApp.html +372 -0
- data/docs/api/Brut/FrontEnd/Middlewares.html +125 -0
- data/docs/api/Brut/FrontEnd/Page.html +773 -0
- data/docs/api/Brut/FrontEnd/Pages/MissingPage.html +797 -0
- data/docs/api/Brut/FrontEnd/Pages.html +125 -0
- data/docs/api/Brut/FrontEnd/RequestContext.html +1312 -0
- data/docs/api/Brut/FrontEnd/RouteHook.html +424 -0
- data/docs/api/Brut/FrontEnd/RouteHooks/AgeFlash.html +242 -0
- data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineScripts.html +249 -0
- data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineStylesOrScripts/ReportOnly.html +264 -0
- data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineStylesOrScripts.html +261 -0
- data/docs/api/Brut/FrontEnd/RouteHooks/LocaleDetection.html +284 -0
- data/docs/api/Brut/FrontEnd/RouteHooks/SetupRequestContext.html +252 -0
- data/docs/api/Brut/FrontEnd/RouteHooks.html +115 -0
- data/docs/api/Brut/FrontEnd/Routing/FormHandlerRoute.html +227 -0
- data/docs/api/Brut/FrontEnd/Routing/FormRoute.html +305 -0
- data/docs/api/Brut/FrontEnd/Routing/MissingForm.html +324 -0
- data/docs/api/Brut/FrontEnd/Routing/MissingHandler.html +319 -0
- data/docs/api/Brut/FrontEnd/Routing/MissingPage.html +315 -0
- data/docs/api/Brut/FrontEnd/Routing/MissingPath.html +315 -0
- data/docs/api/Brut/FrontEnd/Routing/PageRoute.html +327 -0
- data/docs/api/Brut/FrontEnd/Routing/Route.html +761 -0
- data/docs/api/Brut/FrontEnd/Routing.html +927 -0
- data/docs/api/Brut/FrontEnd/Session.html +1195 -0
- data/docs/api/Brut/FrontEnd.html +134 -0
- data/docs/api/Brut/I18n/BaseMethods.html +931 -0
- data/docs/api/Brut/I18n/ForBackEnd.html +302 -0
- data/docs/api/Brut/I18n/ForCLI.html +302 -0
- data/docs/api/Brut/I18n/ForHTML.html +296 -0
- data/docs/api/Brut/I18n/HTTPAcceptLanguage/AlwaysEnglish.html +316 -0
- data/docs/api/Brut/I18n/HTTPAcceptLanguage.html +930 -0
- data/docs/api/Brut/I18n.html +127 -0
- data/docs/api/Brut/Instrumentation/LoggerSpanExporter.html +435 -0
- data/docs/api/Brut/Instrumentation/OpenTelemetry/NormalizedAttributes.html +286 -0
- data/docs/api/Brut/Instrumentation/OpenTelemetry/Span.html +302 -0
- data/docs/api/Brut/Instrumentation/OpenTelemetry.html +864 -0
- data/docs/api/Brut/Instrumentation.html +126 -0
- data/docs/api/Brut/SinatraHelpers/ClassMethods.html +532 -0
- data/docs/api/Brut/SinatraHelpers.html +281 -0
- data/docs/api/Brut/SpecSupport/ClockSupport.html +383 -0
- data/docs/api/Brut/SpecSupport/ComponentSupport.html +502 -0
- data/docs/api/Brut/SpecSupport/E2ETestServer.html +503 -0
- data/docs/api/Brut/SpecSupport/E2eSupport.html +142 -0
- data/docs/api/Brut/SpecSupport/EnhancedNode.html +403 -0
- data/docs/api/Brut/SpecSupport/FlashSupport.html +278 -0
- data/docs/api/Brut/SpecSupport/GeneralSupport/ClassMethods.html +401 -0
- data/docs/api/Brut/SpecSupport/GeneralSupport.html +195 -0
- data/docs/api/Brut/SpecSupport/HandlerSupport.html +160 -0
- data/docs/api/Brut/SpecSupport/Matchers/HaveConstraintViolation.html +553 -0
- data/docs/api/Brut/SpecSupport/Matchers/HaveHTMLAttribute.html +439 -0
- data/docs/api/Brut/SpecSupport/Matchers.html +125 -0
- data/docs/api/Brut/SpecSupport/RSpecSetup/OptionalSidekiqSupport.html +335 -0
- data/docs/api/Brut/SpecSupport/RSpecSetup.html +602 -0
- data/docs/api/Brut/SpecSupport/SessionSupport.html +196 -0
- data/docs/api/Brut/SpecSupport.html +129 -0
- data/docs/api/Brut.html +225 -0
- data/docs/api/Clock.html +603 -0
- data/docs/api/RichString.html +968 -0
- data/docs/api/SemanticLogger/Appender/Async.html +219 -0
- data/docs/api/Sequel/Extensions/BrutInstrumentation.html +115 -0
- data/docs/api/Sequel/Extensions/BrutMigrations.html +533 -0
- data/docs/api/Sequel/Extensions.html +117 -0
- data/docs/api/Sequel/Plugins/CreatedAt/InstanceMethods.html +105 -0
- data/docs/api/Sequel/Plugins/CreatedAt.html +125 -0
- data/docs/api/Sequel/Plugins/ExternalId/ClassMethods.html +207 -0
- data/docs/api/Sequel/Plugins/ExternalId/InstanceMethods.html +186 -0
- data/docs/api/Sequel/Plugins/ExternalId.html +218 -0
- data/docs/api/Sequel/Plugins/FindBang/ClassMethods.html +202 -0
- data/docs/api/Sequel/Plugins/FindBang.html +125 -0
- data/docs/api/Sequel/Plugins.html +117 -0
- data/docs/api/Sequel.html +117 -0
- data/docs/api/_index.html +1553 -0
- data/docs/api/class_list.html +54 -0
- data/docs/api/css/common.css +1 -0
- data/docs/api/css/full_list.css +58 -0
- data/docs/api/css/style.css +503 -0
- data/docs/api/file.README.html +127 -0
- data/docs/api/file_list.html +59 -0
- data/docs/api/frames.html +22 -0
- data/docs/api/index.html +127 -0
- data/docs/api/js/app.js +344 -0
- data/docs/api/js/full_list.js +242 -0
- data/docs/api/js/jquery.js +4 -0
- data/docs/api/method_list.html +3998 -0
- data/docs/api/top-level-namespace.html +112 -0
- data/docs/assets/ai.md.tZrjP9im.js +1 -0
- data/docs/assets/ai.md.tZrjP9im.lean.js +1 -0
- data/docs/assets/app.D_yaTITQ.js +1 -0
- data/docs/assets/assets.md.D3wunzLx.js +19 -0
- data/docs/assets/assets.md.D3wunzLx.lean.js +1 -0
- data/docs/assets/brut-js.md.o2DAO2s2.js +12 -0
- data/docs/assets/brut-js.md.o2DAO2s2.lean.js +1 -0
- data/docs/assets/business-logic.md.BY4hGy0m.js +1 -0
- data/docs/assets/business-logic.md.BY4hGy0m.lean.js +1 -0
- data/docs/assets/chunks/@localSearchIndexroot.BsN5i0Fi.js +1 -0
- data/docs/assets/chunks/VPLocalSearchBox.B2-ZzyTY.js +8 -0
- data/docs/assets/chunks/framework.1L-BeKqY.js +18 -0
- data/docs/assets/chunks/theme.CfGFVRvE.js +2 -0
- data/docs/assets/cli.md.RmeA2b0i.js +127 -0
- data/docs/assets/cli.md.RmeA2b0i.lean.js +1 -0
- data/docs/assets/components.md.eCttGlN-.js +104 -0
- data/docs/assets/components.md.eCttGlN-.lean.js +1 -0
- data/docs/assets/configuration.md.BRriU0cL.js +78 -0
- data/docs/assets/configuration.md.BRriU0cL.lean.js +1 -0
- data/docs/assets/css.md.DJgj2clw.js +21 -0
- data/docs/assets/css.md.DJgj2clw.lean.js +1 -0
- data/docs/assets/custom-element-tests.md.BrYJQEl3.js +69 -0
- data/docs/assets/custom-element-tests.md.BrYJQEl3.lean.js +1 -0
- data/docs/assets/database-access.md.C7l-Vuvb.js +63 -0
- data/docs/assets/database-access.md.C7l-Vuvb.lean.js +1 -0
- data/docs/assets/database-schema.md.BUjR0VS1.js +63 -0
- data/docs/assets/database-schema.md.BUjR0VS1.lean.js +1 -0
- data/docs/assets/deployment.md.Dbka4OTr.js +1 -0
- data/docs/assets/deployment.md.Dbka4OTr.lean.js +1 -0
- data/docs/assets/dev-env-overview.Gj7NWM8-.png +0 -0
- data/docs/assets/dev-env-protocol.DysDAtnz.png +0 -0
- data/docs/assets/dev-environment.md.BNc8AYiK.js +11 -0
- data/docs/assets/dev-environment.md.BNc8AYiK.lean.js +1 -0
- data/docs/assets/doc-conventions.md.DCfRXXi-.js +1 -0
- data/docs/assets/doc-conventions.md.DCfRXXi-.lean.js +1 -0
- data/docs/assets/end-to-end-tests.md.yfQHC0b5.js +26 -0
- data/docs/assets/end-to-end-tests.md.yfQHC0b5.lean.js +1 -0
- data/docs/assets/flash-and-session.md.BXY8RvT0.js +93 -0
- data/docs/assets/flash-and-session.md.BXY8RvT0.lean.js +1 -0
- data/docs/assets/forms.md.CBTYQ_Cz.js +379 -0
- data/docs/assets/forms.md.CBTYQ_Cz.lean.js +1 -0
- data/docs/assets/getting-started.md.Bz2s1Vjb.js +2 -0
- data/docs/assets/getting-started.md.Bz2s1Vjb.lean.js +1 -0
- data/docs/assets/handlers.md.089DVD3v.js +69 -0
- data/docs/assets/handlers.md.089DVD3v.lean.js +1 -0
- data/docs/assets/hooks.md.C4-moMny.js +80 -0
- data/docs/assets/hooks.md.C4-moMny.lean.js +1 -0
- data/docs/assets/i18n.md.Do9i1qWl.js +23 -0
- data/docs/assets/i18n.md.Do9i1qWl.lean.js +1 -0
- data/docs/assets/index.md.B28EwVpq.js +1 -0
- data/docs/assets/index.md.B28EwVpq.lean.js +1 -0
- data/docs/assets/instrumentation.md.CL6ax7nT.js +35 -0
- data/docs/assets/instrumentation.md.CL6ax7nT.lean.js +1 -0
- data/docs/assets/javascript.md.GWbhRS51.js +31 -0
- data/docs/assets/javascript.md.GWbhRS51.lean.js +1 -0
- data/docs/assets/jobs.md.S-2amAYp.js +1 -0
- data/docs/assets/jobs.md.S-2amAYp.lean.js +1 -0
- data/docs/assets/keyword-injection.md.Dt2tKREs.js +25 -0
- data/docs/assets/keyword-injection.md.Dt2tKREs.lean.js +1 -0
- data/docs/assets/markdown-examples.md.CCFEQO44.js +33 -0
- data/docs/assets/markdown-examples.md.CCFEQO44.lean.js +1 -0
- data/docs/assets/middleware.md.Czz_UlJN.js +20 -0
- data/docs/assets/middleware.md.Czz_UlJN.lean.js +1 -0
- data/docs/assets/not-released.md.BBy28McC.js +1 -0
- data/docs/assets/not-released.md.BBy28McC.lean.js +1 -0
- data/docs/assets/overview.Da81cB9R.png +0 -0
- data/docs/assets/overview.md.CDalkuxV.js +133 -0
- data/docs/assets/overview.md.CDalkuxV.lean.js +1 -0
- data/docs/assets/pages.md.BE3kfOc5.js +122 -0
- data/docs/assets/pages.md.BE3kfOc5.lean.js +1 -0
- data/docs/assets/routes.md.BMM7peut.js +29 -0
- data/docs/assets/routes.md.BMM7peut.lean.js +1 -0
- data/docs/assets/security.md.C668yXCi.js +1 -0
- data/docs/assets/security.md.C668yXCi.lean.js +1 -0
- data/docs/assets/seed-data.md.BvFZlqIk.js +14 -0
- data/docs/assets/seed-data.md.BvFZlqIk.lean.js +1 -0
- data/docs/assets/spa.qejUdp-5.png +0 -0
- data/docs/assets/space-time-continuum.md.KPUIKysQ.js +1 -0
- data/docs/assets/space-time-continuum.md.KPUIKysQ.lean.js +1 -0
- data/docs/assets/style.D73IYGCX.css +1 -0
- data/docs/assets/tutorial.md.BnoGjrdK.js +1 -0
- data/docs/assets/tutorial.md.BnoGjrdK.lean.js +1 -0
- data/docs/assets/unit-tests.md.DUGrnLj5.js +13 -0
- data/docs/assets/unit-tests.md.DUGrnLj5.lean.js +1 -0
- data/docs/assets/workspace-protocol.C0gXsoDb.png +0 -0
- data/docs/assets.html +42 -0
- data/docs/brut-css/brut.css +1 -0
- data/docs/brut-css/brut.max.css +22372 -0
- data/docs/brut-css/classes/appearances.html +783 -0
- data/docs/brut-css/classes/background-colors.html +3529 -0
- data/docs/brut-css/classes/border-colors.html +3529 -0
- data/docs/brut-css/classes/borders.html +2293 -0
- data/docs/brut-css/classes/dimensions.html +2581 -0
- data/docs/brut-css/classes/flex.html +917 -0
- data/docs/brut-css/classes/foreground-colors.html +3261 -0
- data/docs/brut-css/classes/junk-drawer.html +431 -0
- data/docs/brut-css/classes/layout.html +668 -0
- data/docs/brut-css/classes/lists.html +331 -0
- data/docs/brut-css/classes/positioning.html +1751 -0
- data/docs/brut-css/classes/spacings.html +2633 -0
- data/docs/brut-css/classes/typography.html +2206 -0
- data/docs/brut-css/customization/advanced-configuration.html +204 -0
- data/docs/brut-css/customization/breakpoints.html +227 -0
- data/docs/brut-css/customization/design-system.html +197 -0
- data/docs/brut-css/customization/pseudo-classes.html +228 -0
- data/docs/brut-css/docs.css +98 -0
- data/docs/brut-css/getting-started/core-concepts.html +234 -0
- data/docs/brut-css/getting-started/installation.html +190 -0
- data/docs/brut-css/getting-started/overview.html +210 -0
- data/docs/brut-css/getting-started/simple-example.html +285 -0
- data/docs/brut-css/index.html +193 -0
- data/docs/brut-css/prism-twilight.min.css +1 -0
- data/docs/brut-css/properties/colors.html +1548 -0
- data/docs/brut-css/properties/spacings.html +614 -0
- data/docs/brut-css/properties/typography.html +777 -0
- data/docs/brut-js/api/AjaxSubmit.html +374 -0
- data/docs/brut-js/api/AjaxSubmit.js.html +435 -0
- data/docs/brut-js/api/Autosubmit.html +192 -0
- data/docs/brut-js/api/Autosubmit.js.html +114 -0
- data/docs/brut-js/api/BaseCustomElement.html +1091 -0
- data/docs/brut-js/api/BaseCustomElement.js.html +312 -0
- data/docs/brut-js/api/BrutCustomElements.html +172 -0
- data/docs/brut-js/api/BufferedLogger.html +173 -0
- data/docs/brut-js/api/ConfirmSubmit.html +278 -0
- data/docs/brut-js/api/ConfirmSubmit.js.html +167 -0
- data/docs/brut-js/api/ConfirmationDialog.html +425 -0
- data/docs/brut-js/api/ConfirmationDialog.js.html +194 -0
- data/docs/brut-js/api/ConstraintViolationMessage.html +448 -0
- data/docs/brut-js/api/ConstraintViolationMessage.js.html +176 -0
- data/docs/brut-js/api/ConstraintViolationMessages.html +590 -0
- data/docs/brut-js/api/ConstraintViolationMessages.js.html +149 -0
- data/docs/brut-js/api/CopyToClipboard.html +345 -0
- data/docs/brut-js/api/CopyToClipboard.js.html +147 -0
- data/docs/brut-js/api/Form.html +294 -0
- data/docs/brut-js/api/Form.js.html +202 -0
- data/docs/brut-js/api/I18nTranslation.html +409 -0
- data/docs/brut-js/api/I18nTranslation.js.html +112 -0
- data/docs/brut-js/api/LocaleDetection.html +312 -0
- data/docs/brut-js/api/LocaleDetection.js.html +168 -0
- data/docs/brut-js/api/Logger.html +702 -0
- data/docs/brut-js/api/Logger.js.html +141 -0
- data/docs/brut-js/api/Message.html +238 -0
- data/docs/brut-js/api/Message.js.html +107 -0
- data/docs/brut-js/api/PrefixedLogger.html +369 -0
- data/docs/brut-js/api/RichString.html +1049 -0
- data/docs/brut-js/api/RichString.js.html +164 -0
- data/docs/brut-js/api/Tabs.html +295 -0
- data/docs/brut-js/api/Tabs.js.html +219 -0
- data/docs/brut-js/api/Tracing.html +277 -0
- data/docs/brut-js/api/Tracing.js.html +298 -0
- data/docs/brut-js/api/external-CustomElementRegistry.html +140 -0
- data/docs/brut-js/api/external-Performance.html +138 -0
- data/docs/brut-js/api/external-Promise.html +138 -0
- data/docs/brut-js/api/external-ValidityState.html +138 -0
- data/docs/brut-js/api/external-Window.html +233 -0
- data/docs/brut-js/api/external-fetch.html +138 -0
- data/docs/brut-js/api/global.html +400 -0
- data/docs/brut-js/api/index.html +168 -0
- data/docs/brut-js/api/index.js.html +181 -0
- data/docs/brut-js/api/module-testing.html +383 -0
- data/docs/brut-js/api/scripts/linenumber.js +25 -0
- data/docs/brut-js/api/scripts/prettify/Apache-License-2.0.txt +202 -0
- data/docs/brut-js/api/scripts/prettify/lang-css.js +2 -0
- data/docs/brut-js/api/scripts/prettify/prettify.js +28 -0
- data/docs/brut-js/api/styles/jsdoc-default.css +327 -0
- data/docs/brut-js/api/styles/prettify-jsdoc.css +111 -0
- data/docs/brut-js/api/styles/prettify-tomorrow.css +132 -0
- data/docs/brut-js/api/testing.AssetMetadata.html +172 -0
- data/docs/brut-js/api/testing.AssetMetadataLoader.html +171 -0
- data/docs/brut-js/api/testing.CustomElementTest.html +679 -0
- data/docs/brut-js/api/testing.DOMCreator.html +171 -0
- data/docs/brut-js/api/testing_AssetMetadata.js.html +86 -0
- data/docs/brut-js/api/testing_AssetMetadataLoader.js.html +76 -0
- data/docs/brut-js/api/testing_CustomElementTest.js.html +286 -0
- data/docs/brut-js/api/testing_DOMCreator.js.html +96 -0
- data/docs/brut-js/api/testing_index.js.html +99 -0
- data/docs/brut-js.html +35 -0
- data/docs/business-logic.html +24 -0
- data/docs/cli.html +150 -0
- data/docs/components.html +127 -0
- data/docs/configuration.html +101 -0
- data/docs/css.html +44 -0
- data/docs/custom-element-tests.html +92 -0
- data/docs/database-access.html +86 -0
- data/docs/database-schema.html +86 -0
- data/docs/deployment.html +24 -0
- data/docs/dev-environment.html +34 -0
- data/docs/doc-conventions.html +24 -0
- data/docs/end-to-end-tests.html +49 -0
- data/docs/flash-and-session.html +116 -0
- data/docs/forms.html +402 -0
- data/docs/getting-started.html +25 -0
- data/docs/handlers.html +92 -0
- data/docs/hashmap.json +1 -0
- data/docs/hooks.html +103 -0
- data/docs/i18n.html +46 -0
- data/docs/images/logo-300.png +0 -0
- data/docs/images/logo.png +0 -0
- data/docs/index.html +24 -0
- data/docs/instrumentation.html +58 -0
- data/docs/javascript.html +54 -0
- data/docs/jobs.html +24 -0
- data/docs/keyword-injection.html +48 -0
- data/docs/markdown-examples.html +56 -0
- data/docs/middleware.html +43 -0
- data/docs/not-released.html +24 -0
- data/docs/overview.html +156 -0
- data/docs/pages.html +145 -0
- data/docs/routes.html +52 -0
- data/docs/security.html +24 -0
- data/docs/seed-data.html +37 -0
- data/docs/space-time-continuum.html +24 -0
- data/docs/tutorial.html +24 -0
- data/docs/unit-tests.html +36 -0
- data/docs/vp-icons.css +1 -0
- data/lib/brut/cli/app_runner.rb +1 -1
- data/lib/brut/cli/apps/test.rb +5 -0
- data/lib/brut/framework/mcp.rb +0 -4
- data/lib/brut/front_end/component.rb +59 -84
- data/lib/brut/front_end/components/constraint_violations.rb +1 -4
- data/lib/brut/front_end/components/form_tag.rb +1 -1
- data/lib/brut/front_end/components/input.rb +3 -3
- data/lib/brut/front_end/components/inputs/csrf_token.rb +1 -1
- data/lib/brut/front_end/components/inputs/{text_field.rb → input_tag.rb} +6 -8
- data/lib/brut/front_end/components/inputs/radio_button.rb +1 -1
- data/lib/brut/front_end/components/inputs/select_tag_with_options.rb +187 -0
- data/lib/brut/front_end/components/inputs/{textarea.rb → textarea_tag.rb} +2 -2
- data/lib/brut/front_end/components/time_tag.rb +2 -1
- data/lib/brut/front_end/form.rb +4 -4
- data/lib/brut/front_end/forms/input.rb +2 -1
- data/lib/brut/front_end/forms/input_definition.rb +5 -2
- data/lib/brut/front_end/forms/radio_button_group_input.rb +2 -1
- data/lib/brut/front_end/forms/radio_button_group_input_definition.rb +2 -2
- data/lib/brut/front_end/forms/select_input.rb +2 -4
- data/lib/brut/front_end/forms/select_input_definition.rb +2 -2
- data/lib/brut/front_end/handler.rb +28 -26
- data/lib/brut/front_end/handlers/csp_reporting_handler.rb +5 -2
- data/lib/brut/front_end/handlers/instrumentation_handler.rb +8 -4
- data/lib/brut/front_end/handlers/locale_detection_handler.rb +9 -5
- data/lib/brut/front_end/handlers/missing_handler.rb +5 -2
- data/lib/brut/front_end/page.rb +4 -6
- data/lib/brut/front_end/request_context.rb +3 -2
- data/lib/brut/i18n/base_methods.rb +136 -82
- data/lib/brut/i18n/for_back_end.rb +1 -0
- data/lib/brut/i18n/for_cli.rb +1 -0
- data/lib/brut/i18n/for_html.rb +32 -4
- data/lib/brut/instrumentation/open_telemetry.rb +12 -2
- data/lib/brut/sinatra_helpers.rb +10 -3
- data/lib/brut/spec_support/component_support.rb +18 -18
- data/lib/brut/spec_support/e2e_test_server.rb +3 -0
- data/lib/brut/version.rb +1 -1
- data/lib/sequel/extensions/brut_migrations.rb +1 -1
- metadata +647 -5
- data/lib/brut/front_end/components/inputs/select.rb +0 -117
@@ -0,0 +1,917 @@
|
|
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>⌘</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">·</span>
|
27
|
+
<li><a href="/brut-js" class="gray-200 tdn hover-tdu">BrutJS</a></li>
|
28
|
+
<span aria-hidden="true">·</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">Flex Classes</h2>
|
159
|
+
|
160
|
+
<p>Flexbox utilities. These should allow most Flex layouts without having to write CSS.</p>
|
161
|
+
|
162
|
+
|
163
|
+
|
164
|
+
<h3 class="f-2 b">See Also</h3>
|
165
|
+
<ul class="see-also">
|
166
|
+
|
167
|
+
<li><p><a href="/brut-css/classes/layout.html#class-group:display">Display</a></p>
|
168
|
+
</li>
|
169
|
+
|
170
|
+
</ul>
|
171
|
+
|
172
|
+
|
173
|
+
<h3 class="f-5 mt-4" id="class-group:flex-general">Flex General</h3>
|
174
|
+
<p class="p">
|
175
|
+
<p>General flex-establishing classes.</p>
|
176
|
+
|
177
|
+
</p>
|
178
|
+
|
179
|
+
|
180
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="flex">
|
181
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.flex</code></h4>
|
182
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.flex</span> <span class="token punctuation">{</span>
|
183
|
+
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
|
184
|
+
<span class="token punctuation">}</span></pre>
|
185
|
+
</div>
|
186
|
+
<div class="ml-3">
|
187
|
+
<p class="p">
|
188
|
+
|
189
|
+
</p>
|
190
|
+
|
191
|
+
|
192
|
+
</div>
|
193
|
+
|
194
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="inline-flex">
|
195
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.inline-flex</code></h4>
|
196
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.inline-flex</span> <span class="token punctuation">{</span>
|
197
|
+
<span class="token property">display</span><span class="token punctuation">:</span> inline-flex<span class="token punctuation">;</span>
|
198
|
+
<span class="token punctuation">}</span></pre>
|
199
|
+
</div>
|
200
|
+
<div class="ml-3">
|
201
|
+
<p class="p">
|
202
|
+
|
203
|
+
</p>
|
204
|
+
|
205
|
+
|
206
|
+
</div>
|
207
|
+
|
208
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="flex-none">
|
209
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.flex-none</code></h4>
|
210
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.flex-none</span> <span class="token punctuation">{</span>
|
211
|
+
<span class="token property">flex</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
212
|
+
<span class="token punctuation">}</span></pre>
|
213
|
+
</div>
|
214
|
+
<div class="ml-3">
|
215
|
+
<p class="p">
|
216
|
+
|
217
|
+
</p>
|
218
|
+
|
219
|
+
|
220
|
+
</div>
|
221
|
+
|
222
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="flex-column">
|
223
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.flex-column</code></h4>
|
224
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.flex-column</span> <span class="token punctuation">{</span>
|
225
|
+
<span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
|
226
|
+
<span class="token punctuation">}</span></pre>
|
227
|
+
</div>
|
228
|
+
<div class="ml-3">
|
229
|
+
<p class="p">
|
230
|
+
|
231
|
+
</p>
|
232
|
+
|
233
|
+
|
234
|
+
</div>
|
235
|
+
|
236
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="flex-row">
|
237
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.flex-row</code></h4>
|
238
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.flex-row</span> <span class="token punctuation">{</span>
|
239
|
+
<span class="token property">flex-direction</span><span class="token punctuation">:</span> row<span class="token punctuation">;</span>
|
240
|
+
<span class="token punctuation">}</span></pre>
|
241
|
+
</div>
|
242
|
+
<div class="ml-3">
|
243
|
+
<p class="p">
|
244
|
+
|
245
|
+
</p>
|
246
|
+
|
247
|
+
|
248
|
+
</div>
|
249
|
+
|
250
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="flex-wrap">
|
251
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.flex-wrap</code></h4>
|
252
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.flex-wrap</span> <span class="token punctuation">{</span>
|
253
|
+
<span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span>
|
254
|
+
<span class="token punctuation">}</span></pre>
|
255
|
+
</div>
|
256
|
+
<div class="ml-3">
|
257
|
+
<p class="p">
|
258
|
+
|
259
|
+
</p>
|
260
|
+
|
261
|
+
|
262
|
+
</div>
|
263
|
+
|
264
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="flex-nowrap">
|
265
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.flex-nowrap</code></h4>
|
266
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.flex-nowrap</span> <span class="token punctuation">{</span>
|
267
|
+
<span class="token property">flex-wrap</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span>
|
268
|
+
<span class="token punctuation">}</span></pre>
|
269
|
+
</div>
|
270
|
+
<div class="ml-3">
|
271
|
+
<p class="p">
|
272
|
+
|
273
|
+
</p>
|
274
|
+
|
275
|
+
|
276
|
+
</div>
|
277
|
+
|
278
|
+
|
279
|
+
<h3 class="f-5 mt-4" id="class-group:item-alignment">Item Alignment</h3>
|
280
|
+
<p class="p">
|
281
|
+
<p>Item alignment, most useful with flexbox</p>
|
282
|
+
|
283
|
+
</p>
|
284
|
+
|
285
|
+
|
286
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="items-start">
|
287
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.items-start</code></h4>
|
288
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.items-start</span> <span class="token punctuation">{</span>
|
289
|
+
<span class="token property">align-items</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span>
|
290
|
+
<span class="token punctuation">}</span></pre>
|
291
|
+
</div>
|
292
|
+
<div class="ml-3">
|
293
|
+
<p class="p">
|
294
|
+
|
295
|
+
</p>
|
296
|
+
|
297
|
+
|
298
|
+
</div>
|
299
|
+
|
300
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="items-end">
|
301
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.items-end</code></h4>
|
302
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.items-end</span> <span class="token punctuation">{</span>
|
303
|
+
<span class="token property">align-items</span><span class="token punctuation">:</span> flex-end<span class="token punctuation">;</span>
|
304
|
+
<span class="token punctuation">}</span></pre>
|
305
|
+
</div>
|
306
|
+
<div class="ml-3">
|
307
|
+
<p class="p">
|
308
|
+
|
309
|
+
</p>
|
310
|
+
|
311
|
+
|
312
|
+
</div>
|
313
|
+
|
314
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="items-center">
|
315
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.items-center</code></h4>
|
316
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.items-center</span> <span class="token punctuation">{</span>
|
317
|
+
<span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
318
|
+
<span class="token punctuation">}</span></pre>
|
319
|
+
</div>
|
320
|
+
<div class="ml-3">
|
321
|
+
<p class="p">
|
322
|
+
|
323
|
+
</p>
|
324
|
+
|
325
|
+
|
326
|
+
</div>
|
327
|
+
|
328
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="items-baseline">
|
329
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.items-baseline</code></h4>
|
330
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.items-baseline</span> <span class="token punctuation">{</span>
|
331
|
+
<span class="token property">align-items</span><span class="token punctuation">:</span> baseline<span class="token punctuation">;</span>
|
332
|
+
<span class="token punctuation">}</span></pre>
|
333
|
+
</div>
|
334
|
+
<div class="ml-3">
|
335
|
+
<p class="p">
|
336
|
+
|
337
|
+
</p>
|
338
|
+
|
339
|
+
|
340
|
+
</div>
|
341
|
+
|
342
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="items-stretch">
|
343
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.items-stretch</code></h4>
|
344
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.items-stretch</span> <span class="token punctuation">{</span>
|
345
|
+
<span class="token property">align-items</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span>
|
346
|
+
<span class="token punctuation">}</span></pre>
|
347
|
+
</div>
|
348
|
+
<div class="ml-3">
|
349
|
+
<p class="p">
|
350
|
+
|
351
|
+
</p>
|
352
|
+
|
353
|
+
|
354
|
+
</div>
|
355
|
+
|
356
|
+
|
357
|
+
<h3 class="f-5 mt-4" id="class-group:self-aligment">Self Aligment</h3>
|
358
|
+
<p class="p">
|
359
|
+
<p>Self alignment, most useful with flexbox</p>
|
360
|
+
|
361
|
+
</p>
|
362
|
+
|
363
|
+
|
364
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="self-start">
|
365
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.self-start</code></h4>
|
366
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.self-start</span> <span class="token punctuation">{</span>
|
367
|
+
<span class="token property">align-self</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span>
|
368
|
+
<span class="token punctuation">}</span></pre>
|
369
|
+
</div>
|
370
|
+
<div class="ml-3">
|
371
|
+
<p class="p">
|
372
|
+
|
373
|
+
</p>
|
374
|
+
|
375
|
+
|
376
|
+
</div>
|
377
|
+
|
378
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="self-end">
|
379
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.self-end</code></h4>
|
380
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.self-end</span> <span class="token punctuation">{</span>
|
381
|
+
<span class="token property">align-self</span><span class="token punctuation">:</span> flex-end<span class="token punctuation">;</span>
|
382
|
+
<span class="token punctuation">}</span></pre>
|
383
|
+
</div>
|
384
|
+
<div class="ml-3">
|
385
|
+
<p class="p">
|
386
|
+
|
387
|
+
</p>
|
388
|
+
|
389
|
+
|
390
|
+
</div>
|
391
|
+
|
392
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="self-center">
|
393
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.self-center</code></h4>
|
394
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.self-center</span> <span class="token punctuation">{</span>
|
395
|
+
<span class="token property">align-self</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
396
|
+
<span class="token punctuation">}</span></pre>
|
397
|
+
</div>
|
398
|
+
<div class="ml-3">
|
399
|
+
<p class="p">
|
400
|
+
|
401
|
+
</p>
|
402
|
+
|
403
|
+
|
404
|
+
</div>
|
405
|
+
|
406
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="self-baseline">
|
407
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.self-baseline</code></h4>
|
408
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.self-baseline</span> <span class="token punctuation">{</span>
|
409
|
+
<span class="token property">align-self</span><span class="token punctuation">:</span> baseline<span class="token punctuation">;</span>
|
410
|
+
<span class="token punctuation">}</span></pre>
|
411
|
+
</div>
|
412
|
+
<div class="ml-3">
|
413
|
+
<p class="p">
|
414
|
+
|
415
|
+
</p>
|
416
|
+
|
417
|
+
|
418
|
+
</div>
|
419
|
+
|
420
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="self-stretch">
|
421
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.self-stretch</code></h4>
|
422
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.self-stretch</span> <span class="token punctuation">{</span>
|
423
|
+
<span class="token property">align-self</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span>
|
424
|
+
<span class="token punctuation">}</span></pre>
|
425
|
+
</div>
|
426
|
+
<div class="ml-3">
|
427
|
+
<p class="p">
|
428
|
+
|
429
|
+
</p>
|
430
|
+
|
431
|
+
|
432
|
+
</div>
|
433
|
+
|
434
|
+
|
435
|
+
<h3 class="f-5 mt-4" id="class-group:justify-content">Justify Content</h3>
|
436
|
+
<p class="p">
|
437
|
+
<p>Justify content, most useful with flexbox</p>
|
438
|
+
|
439
|
+
</p>
|
440
|
+
|
441
|
+
|
442
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="justify-start">
|
443
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.justify-start</code></h4>
|
444
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.justify-start</span> <span class="token punctuation">{</span>
|
445
|
+
<span class="token property">justify-content</span><span class="token punctuation">:</span> start<span class="token punctuation">;</span>
|
446
|
+
<span class="token punctuation">}</span></pre>
|
447
|
+
</div>
|
448
|
+
<div class="ml-3">
|
449
|
+
<p class="p">
|
450
|
+
|
451
|
+
</p>
|
452
|
+
|
453
|
+
|
454
|
+
</div>
|
455
|
+
|
456
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="justify-end">
|
457
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.justify-end</code></h4>
|
458
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.justify-end</span> <span class="token punctuation">{</span>
|
459
|
+
<span class="token property">justify-content</span><span class="token punctuation">:</span> end<span class="token punctuation">;</span>
|
460
|
+
<span class="token punctuation">}</span></pre>
|
461
|
+
</div>
|
462
|
+
<div class="ml-3">
|
463
|
+
<p class="p">
|
464
|
+
|
465
|
+
</p>
|
466
|
+
|
467
|
+
|
468
|
+
</div>
|
469
|
+
|
470
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="justify-center">
|
471
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.justify-center</code></h4>
|
472
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.justify-center</span> <span class="token punctuation">{</span>
|
473
|
+
<span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
474
|
+
<span class="token punctuation">}</span></pre>
|
475
|
+
</div>
|
476
|
+
<div class="ml-3">
|
477
|
+
<p class="p">
|
478
|
+
|
479
|
+
</p>
|
480
|
+
|
481
|
+
|
482
|
+
</div>
|
483
|
+
|
484
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="justify-between">
|
485
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.justify-between</code></h4>
|
486
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.justify-between</span> <span class="token punctuation">{</span>
|
487
|
+
<span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span>
|
488
|
+
<span class="token punctuation">}</span></pre>
|
489
|
+
</div>
|
490
|
+
<div class="ml-3">
|
491
|
+
<p class="p">
|
492
|
+
|
493
|
+
</p>
|
494
|
+
|
495
|
+
|
496
|
+
</div>
|
497
|
+
|
498
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="justify-around">
|
499
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.justify-around</code></h4>
|
500
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.justify-around</span> <span class="token punctuation">{</span>
|
501
|
+
<span class="token property">justify-content</span><span class="token punctuation">:</span> space-around<span class="token punctuation">;</span>
|
502
|
+
<span class="token punctuation">}</span></pre>
|
503
|
+
</div>
|
504
|
+
<div class="ml-3">
|
505
|
+
<p class="p">
|
506
|
+
|
507
|
+
</p>
|
508
|
+
|
509
|
+
|
510
|
+
</div>
|
511
|
+
|
512
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="justify-stretch">
|
513
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.justify-stretch</code></h4>
|
514
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.justify-stretch</span> <span class="token punctuation">{</span>
|
515
|
+
<span class="token property">justify-content</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span>
|
516
|
+
<span class="token punctuation">}</span></pre>
|
517
|
+
</div>
|
518
|
+
<div class="ml-3">
|
519
|
+
<p class="p">
|
520
|
+
|
521
|
+
</p>
|
522
|
+
|
523
|
+
|
524
|
+
</div>
|
525
|
+
|
526
|
+
|
527
|
+
<h3 class="f-5 mt-4" id="class-group:align-content">Align Content</h3>
|
528
|
+
<p class="p">
|
529
|
+
<p>Align content, most useful with flexbox</p>
|
530
|
+
|
531
|
+
</p>
|
532
|
+
|
533
|
+
|
534
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="content-start">
|
535
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.content-start</code></h4>
|
536
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.content-start</span> <span class="token punctuation">{</span>
|
537
|
+
<span class="token property">align-content</span><span class="token punctuation">:</span> start<span class="token punctuation">;</span>
|
538
|
+
<span class="token punctuation">}</span></pre>
|
539
|
+
</div>
|
540
|
+
<div class="ml-3">
|
541
|
+
<p class="p">
|
542
|
+
|
543
|
+
</p>
|
544
|
+
|
545
|
+
|
546
|
+
</div>
|
547
|
+
|
548
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="content-end">
|
549
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.content-end</code></h4>
|
550
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.content-end</span> <span class="token punctuation">{</span>
|
551
|
+
<span class="token property">align-content</span><span class="token punctuation">:</span> end<span class="token punctuation">;</span>
|
552
|
+
<span class="token punctuation">}</span></pre>
|
553
|
+
</div>
|
554
|
+
<div class="ml-3">
|
555
|
+
<p class="p">
|
556
|
+
|
557
|
+
</p>
|
558
|
+
|
559
|
+
|
560
|
+
</div>
|
561
|
+
|
562
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="content-center">
|
563
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.content-center</code></h4>
|
564
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.content-center</span> <span class="token punctuation">{</span>
|
565
|
+
<span class="token property">align-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
566
|
+
<span class="token punctuation">}</span></pre>
|
567
|
+
</div>
|
568
|
+
<div class="ml-3">
|
569
|
+
<p class="p">
|
570
|
+
|
571
|
+
</p>
|
572
|
+
|
573
|
+
|
574
|
+
</div>
|
575
|
+
|
576
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="content-between">
|
577
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.content-between</code></h4>
|
578
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.content-between</span> <span class="token punctuation">{</span>
|
579
|
+
<span class="token property">align-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span>
|
580
|
+
<span class="token punctuation">}</span></pre>
|
581
|
+
</div>
|
582
|
+
<div class="ml-3">
|
583
|
+
<p class="p">
|
584
|
+
|
585
|
+
</p>
|
586
|
+
|
587
|
+
|
588
|
+
</div>
|
589
|
+
|
590
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="content-around">
|
591
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.content-around</code></h4>
|
592
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.content-around</span> <span class="token punctuation">{</span>
|
593
|
+
<span class="token property">align-content</span><span class="token punctuation">:</span> space-around<span class="token punctuation">;</span>
|
594
|
+
<span class="token punctuation">}</span></pre>
|
595
|
+
</div>
|
596
|
+
<div class="ml-3">
|
597
|
+
<p class="p">
|
598
|
+
|
599
|
+
</p>
|
600
|
+
|
601
|
+
|
602
|
+
</div>
|
603
|
+
|
604
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="content-stretch">
|
605
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.content-stretch</code></h4>
|
606
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.content-stretch</span> <span class="token punctuation">{</span>
|
607
|
+
<span class="token property">align-content</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span>
|
608
|
+
<span class="token punctuation">}</span></pre>
|
609
|
+
</div>
|
610
|
+
<div class="ml-3">
|
611
|
+
<p class="p">
|
612
|
+
|
613
|
+
</p>
|
614
|
+
|
615
|
+
|
616
|
+
</div>
|
617
|
+
|
618
|
+
|
619
|
+
<h3 class="f-5 mt-4" id="class-scale:flex-grow">Flex Grow</h3>
|
620
|
+
<p class="p">
|
621
|
+
<p>Flex grow, using a six-step scale.</p>
|
622
|
+
|
623
|
+
</p>
|
624
|
+
|
625
|
+
|
626
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="flex-grow-0">
|
627
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.flex-grow-0</code></h4>
|
628
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.flex-grow-0</span> <span class="token punctuation">{</span>
|
629
|
+
<span class="token property">flex-grow</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
|
630
|
+
<span class="token punctuation">}</span></pre>
|
631
|
+
</div>
|
632
|
+
<div class="ml-3">
|
633
|
+
<p class="p">
|
634
|
+
|
635
|
+
</p>
|
636
|
+
|
637
|
+
|
638
|
+
</div>
|
639
|
+
|
640
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="flex-grow-1">
|
641
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.flex-grow-1</code></h4>
|
642
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.flex-grow-1</span> <span class="token punctuation">{</span>
|
643
|
+
<span class="token property">flex-grow</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
|
644
|
+
<span class="token punctuation">}</span></pre>
|
645
|
+
</div>
|
646
|
+
<div class="ml-3">
|
647
|
+
<p class="p">
|
648
|
+
|
649
|
+
</p>
|
650
|
+
|
651
|
+
|
652
|
+
</div>
|
653
|
+
|
654
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="flex-grow-2">
|
655
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.flex-grow-2</code></h4>
|
656
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.flex-grow-2</span> <span class="token punctuation">{</span>
|
657
|
+
<span class="token property">flex-grow</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span>
|
658
|
+
<span class="token punctuation">}</span></pre>
|
659
|
+
</div>
|
660
|
+
<div class="ml-3">
|
661
|
+
<p class="p">
|
662
|
+
|
663
|
+
</p>
|
664
|
+
|
665
|
+
|
666
|
+
</div>
|
667
|
+
|
668
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="flex-grow-3">
|
669
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.flex-grow-3</code></h4>
|
670
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.flex-grow-3</span> <span class="token punctuation">{</span>
|
671
|
+
<span class="token property">flex-grow</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span>
|
672
|
+
<span class="token punctuation">}</span></pre>
|
673
|
+
</div>
|
674
|
+
<div class="ml-3">
|
675
|
+
<p class="p">
|
676
|
+
|
677
|
+
</p>
|
678
|
+
|
679
|
+
|
680
|
+
</div>
|
681
|
+
|
682
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="flex-grow-4">
|
683
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.flex-grow-4</code></h4>
|
684
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.flex-grow-4</span> <span class="token punctuation">{</span>
|
685
|
+
<span class="token property">flex-grow</span><span class="token punctuation">:</span> 4<span class="token punctuation">;</span>
|
686
|
+
<span class="token punctuation">}</span></pre>
|
687
|
+
</div>
|
688
|
+
<div class="ml-3">
|
689
|
+
<p class="p">
|
690
|
+
|
691
|
+
</p>
|
692
|
+
|
693
|
+
|
694
|
+
</div>
|
695
|
+
|
696
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="flex-grow-5">
|
697
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.flex-grow-5</code></h4>
|
698
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.flex-grow-5</span> <span class="token punctuation">{</span>
|
699
|
+
<span class="token property">flex-grow</span><span class="token punctuation">:</span> 5<span class="token punctuation">;</span>
|
700
|
+
<span class="token punctuation">}</span></pre>
|
701
|
+
</div>
|
702
|
+
<div class="ml-3">
|
703
|
+
<p class="p">
|
704
|
+
|
705
|
+
</p>
|
706
|
+
|
707
|
+
|
708
|
+
</div>
|
709
|
+
|
710
|
+
|
711
|
+
<h3 class="f-5 mt-4" id="class-scale:flex-grow">Flex Grow</h3>
|
712
|
+
<p class="p">
|
713
|
+
<p>Flex shrink, using a six-step scale.</p>
|
714
|
+
|
715
|
+
</p>
|
716
|
+
|
717
|
+
|
718
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="flex-shrink-0">
|
719
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.flex-shrink-0</code></h4>
|
720
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.flex-shrink-0</span> <span class="token punctuation">{</span>
|
721
|
+
<span class="token property">flex-shrink</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
|
722
|
+
<span class="token punctuation">}</span></pre>
|
723
|
+
</div>
|
724
|
+
<div class="ml-3">
|
725
|
+
<p class="p">
|
726
|
+
|
727
|
+
</p>
|
728
|
+
|
729
|
+
|
730
|
+
</div>
|
731
|
+
|
732
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="flex-shrink-1">
|
733
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.flex-shrink-1</code></h4>
|
734
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.flex-shrink-1</span> <span class="token punctuation">{</span>
|
735
|
+
<span class="token property">flex-shrink</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
|
736
|
+
<span class="token punctuation">}</span></pre>
|
737
|
+
</div>
|
738
|
+
<div class="ml-3">
|
739
|
+
<p class="p">
|
740
|
+
|
741
|
+
</p>
|
742
|
+
|
743
|
+
|
744
|
+
</div>
|
745
|
+
|
746
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="flex-shrink-2">
|
747
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.flex-shrink-2</code></h4>
|
748
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.flex-shrink-2</span> <span class="token punctuation">{</span>
|
749
|
+
<span class="token property">flex-shrink</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span>
|
750
|
+
<span class="token punctuation">}</span></pre>
|
751
|
+
</div>
|
752
|
+
<div class="ml-3">
|
753
|
+
<p class="p">
|
754
|
+
|
755
|
+
</p>
|
756
|
+
|
757
|
+
|
758
|
+
</div>
|
759
|
+
|
760
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="flex-shrink-3">
|
761
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.flex-shrink-3</code></h4>
|
762
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.flex-shrink-3</span> <span class="token punctuation">{</span>
|
763
|
+
<span class="token property">flex-shrink</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span>
|
764
|
+
<span class="token punctuation">}</span></pre>
|
765
|
+
</div>
|
766
|
+
<div class="ml-3">
|
767
|
+
<p class="p">
|
768
|
+
|
769
|
+
</p>
|
770
|
+
|
771
|
+
|
772
|
+
</div>
|
773
|
+
|
774
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="flex-shrink-4">
|
775
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.flex-shrink-4</code></h4>
|
776
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.flex-shrink-4</span> <span class="token punctuation">{</span>
|
777
|
+
<span class="token property">flex-shrink</span><span class="token punctuation">:</span> 4<span class="token punctuation">;</span>
|
778
|
+
<span class="token punctuation">}</span></pre>
|
779
|
+
</div>
|
780
|
+
<div class="ml-3">
|
781
|
+
<p class="p">
|
782
|
+
|
783
|
+
</p>
|
784
|
+
|
785
|
+
|
786
|
+
</div>
|
787
|
+
|
788
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="flex-shrink-5">
|
789
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.flex-shrink-5</code></h4>
|
790
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.flex-shrink-5</span> <span class="token punctuation">{</span>
|
791
|
+
<span class="token property">flex-shrink</span><span class="token punctuation">:</span> 5<span class="token punctuation">;</span>
|
792
|
+
<span class="token punctuation">}</span></pre>
|
793
|
+
</div>
|
794
|
+
<div class="ml-3">
|
795
|
+
<p class="p">
|
796
|
+
|
797
|
+
</p>
|
798
|
+
|
799
|
+
|
800
|
+
</div>
|
801
|
+
|
802
|
+
|
803
|
+
<h3 class="f-5 mt-4" id="class-group:flex-basis">Flex Basis</h3>
|
804
|
+
<p class="p">
|
805
|
+
<p>Flex basis.</p>
|
806
|
+
|
807
|
+
</p>
|
808
|
+
|
809
|
+
|
810
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="flex-basis-0">
|
811
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.flex-basis-0</code></h4>
|
812
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.flex-basis-0</span> <span class="token punctuation">{</span>
|
813
|
+
<span class="token property">flex-basis</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
|
814
|
+
<span class="token punctuation">}</span></pre>
|
815
|
+
</div>
|
816
|
+
<div class="ml-3">
|
817
|
+
<p class="p">
|
818
|
+
|
819
|
+
</p>
|
820
|
+
|
821
|
+
|
822
|
+
</div>
|
823
|
+
|
824
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="flex-basis-auto">
|
825
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.flex-basis-auto</code></h4>
|
826
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.flex-basis-auto</span> <span class="token punctuation">{</span>
|
827
|
+
<span class="token property">flex-basis</span><span class="token punctuation">:</span> auto<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
|
+
</div>
|
837
|
+
|
838
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="flex-basis-max">
|
839
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.flex-basis-max</code></h4>
|
840
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.flex-basis-max</span> <span class="token punctuation">{</span>
|
841
|
+
<span class="token property">flex-basis</span><span class="token punctuation">:</span> max-content<span class="token punctuation">;</span>
|
842
|
+
<span class="token punctuation">}</span></pre>
|
843
|
+
</div>
|
844
|
+
<div class="ml-3">
|
845
|
+
<p class="p">
|
846
|
+
|
847
|
+
</p>
|
848
|
+
|
849
|
+
|
850
|
+
</div>
|
851
|
+
|
852
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="flex-basis-min">
|
853
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.flex-basis-min</code></h4>
|
854
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.flex-basis-min</span> <span class="token punctuation">{</span>
|
855
|
+
<span class="token property">flex-basis</span><span class="token punctuation">:</span> min-content<span class="token punctuation">;</span>
|
856
|
+
<span class="token punctuation">}</span></pre>
|
857
|
+
</div>
|
858
|
+
<div class="ml-3">
|
859
|
+
<p class="p">
|
860
|
+
|
861
|
+
</p>
|
862
|
+
|
863
|
+
|
864
|
+
</div>
|
865
|
+
|
866
|
+
<div class="mt-4 flex gap-3 items-center justify-between" id="flex-basis-fit">
|
867
|
+
<h4 class="f-4 fw-3 ws-nowrap"><code>.flex-basis-fit</code></h4>
|
868
|
+
<pre class="f-3 highlighted-code"><span class="token selector">.flex-basis-fit</span> <span class="token punctuation">{</span>
|
869
|
+
<span class="token property">flex-basis</span><span class="token punctuation">:</span> fit-content<span class="token punctuation">;</span>
|
870
|
+
<span class="token punctuation">}</span></pre>
|
871
|
+
</div>
|
872
|
+
<div class="ml-3">
|
873
|
+
<p class="p">
|
874
|
+
|
875
|
+
</p>
|
876
|
+
|
877
|
+
|
878
|
+
</div>
|
879
|
+
|
880
|
+
|
881
|
+
</article>
|
882
|
+
<div class="z-5 ma-0 overflow-y-auto pa-2 w-20 h-100 pos-absolute top-0 right-2">
|
883
|
+
<div class="pa-3 ba bc-gray-700 bg-gray-900 br-3 shadow-1 ridiculous-liquid-glass-is-all-the-rage">
|
884
|
+
<h3>On this Page</h3>
|
885
|
+
<ul class="lst-none ma-0 pa-0">
|
886
|
+
|
887
|
+
<li class="lh-copy"><a href="#class-group:flex-general">Flex General</a></li>
|
888
|
+
|
889
|
+
<li class="lh-copy"><a href="#class-group:item-alignment">Item Alignment</a></li>
|
890
|
+
|
891
|
+
<li class="lh-copy"><a href="#class-group:self-aligment">Self Aligment</a></li>
|
892
|
+
|
893
|
+
<li class="lh-copy"><a href="#class-group:justify-content">Justify Content</a></li>
|
894
|
+
|
895
|
+
<li class="lh-copy"><a href="#class-group:align-content">Align Content</a></li>
|
896
|
+
|
897
|
+
<li class="lh-copy"><a href="#class-scale:flex-grow">Flex Grow</a></li>
|
898
|
+
|
899
|
+
<li class="lh-copy"><a href="#class-scale:flex-grow">Flex Grow</a></li>
|
900
|
+
|
901
|
+
<li class="lh-copy"><a href="#class-group:flex-basis">Flex Basis</a></li>
|
902
|
+
|
903
|
+
</ul>
|
904
|
+
</div>
|
905
|
+
</div>
|
906
|
+
</div>
|
907
|
+
<footer class="bg-black white mt-auto">
|
908
|
+
<p class="tc">
|
909
|
+
Copyright © 2025 David Bryant Copeland.
|
910
|
+
</p>
|
911
|
+
</footer>
|
912
|
+
</section>
|
913
|
+
</main>
|
914
|
+
</body>
|
915
|
+
|
916
|
+
</html>
|
917
|
+
|