{"id":42186598,"url":"https://github.com/paceaux/form-baseline","last_synced_at":"2026-01-26T22:27:44.194Z","repository":{"id":57240257,"uuid":"388681631","full_name":"paceaux/form-baseline","owner":"paceaux","description":"A good start to your form styles that covers most of the challenges","archived":false,"fork":false,"pushed_at":"2023-05-15T14:47:47.000Z","size":21,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-11T12:52:57.305Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/paceaux.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-07-23T04:54:28.000Z","updated_at":"2023-05-15T14:39:31.000Z","dependencies_parsed_at":"2022-08-30T00:11:47.742Z","dependency_job_id":null,"html_url":"https://github.com/paceaux/form-baseline","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/paceaux/form-baseline","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paceaux%2Fform-baseline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paceaux%2Fform-baseline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paceaux%2Fform-baseline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paceaux%2Fform-baseline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/paceaux","download_url":"https://codeload.github.com/paceaux/form-baseline/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paceaux%2Fform-baseline/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28789738,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-26T21:49:50.245Z","status":"ssl_error","status_checked_at":"2026-01-26T21:48:29.455Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-26T22:27:44.090Z","updated_at":"2026-01-26T22:27:44.170Z","avatar_url":"https://github.com/paceaux.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"#  form-baseline.css\n\u003e A good start to your form styles that covers most of the challenges\n\n[![License][license-image]][license-url] [![Downloads][downloads-image]][downloads-url]\n\n**NPM**\n```\nnpm install --save form-baseline.css\n```\n\n**Download**\n`https://raw.githubusercontent.com/paceaux/form-baseline/master/src/baseline.form.css`\n\n## What does it do?\n### It gives you a good start\nBuilt on the typography-baseline foundations, it gives you a good, _small_ set of styles for forms to work with\n\n### Gives you a \"no-design\" design\nFor those times where you need just a bit more than a [Normalize](http://necolas.github.io/normalize.css/), but way less than [Bootstrap](https://getbootstrap.com/), this gets your forms there. \n\nThis is a fairly unopinionated approach to making sure that form controls don't look awful.\n\n## Browser Support\n* Firefox\n* Chrome\n* Edge\n* Safari\n* Opera\n\n\n## Usage\nWhile this is relatively unopinionated, there are a few \"opinions\" to consider:\n\n* `em` for for `font-size`\n* a unitless `line-height`\n* `rem` for left/right spacing\n* text-spacing based on the golden ratio (.618 / 1.618)\n\n### Fitting it into a CSS architecture\nThis would come after a reset / normalize and and after your set baseline styles. If you're a fan of [ITCSS](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/), this is in the Elements layer.\n\n### Modifying without Swearing or Heavy Drinking\nOne of the really annoying things about other CSS frameworks (cough cough \u003csmall\u003eBootstrap\u003c/small\u003e) is that you mostly have to write new CSS to overwrite the existing styles. Often that means raising specificity, which is really stinking annoying. This is designed to avoid that by using [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)\n\n\nThe form baseline sets most of the CSS variables on the `form`. As CSS variables are subject to the cascade, you can override _any_ variable at any time by changing its value on the relevant selector. You can import this into your current CSS setup, and overwrite all the variables by setting new ones whereever makes sense.\n\n\nAll of the variables are prefixed with `form` so that they can't collide with any other css variables you may have. \n\nThey also inherit values from the typography-baseline. But if you choose not to use it, that's totally fine! They all have default values. \n\n\nSo if you want the `--controlBorderColor` to be different, you can write the following in your own stylesheet:\n\n```\nform.myClass {\n    --controlBorderColor: #c0ffee;\n}\n```\n\nNo raising specificity. Just changing a variable. \n\n\n#### Colors\nYou have collections of color variables to work with:\n```\n    --controlColor:  var(--colorNeutralDark, rgb(165,165,165));\n    --controlGroupColor: var(--colorNeutralDark, rgb(110,110,110));\n    --controlBackgroundColor: rgb(255, 255, 255);\n    --controlGroupBackgroundColor: transparent;\n    --controlBorderColor: var(--controlColor);\n\n```\n\n**But what about `:hover`, and `:focus`, and `:active`, and...**\n\nThe Baseline breaks colors into four categories: \n\n1. Default\n2. Interest (a combined `:hover` and `:focus`)\n3. Active\n4. Inform (attention or alert)\n\nAdditionally, it applies colors across two domains:\n\n* \"control\": an `input`, `textarea`, `button` or `select`. \n* controlGroup: a collection of controls (a `fieldset`, usually)\n\n##### Default Colors\n\n```\n    --controlColor:  var(--colorNeutralDark, rgb(165,165,165));\n    --controlGroupColor: var(--colorNeutralDark, rgb(110,110,110));\n    --controlBackgroundColor: rgb(255, 255, 255);\n    --controlGroupBackgroundColor: transparent;\n    --controlBorderColor: var(--controlColor);\n```\n\n##### Interest Colors\n\"interest\" collectively refers to `:hover` and `:focus`. It means the user is _interested_ in the control, but not yet engaged with it. \n```\n    --controlColorInterest: var(--colorNeutralDarker);\n    --controlBackgroundColorInterest: var(--controlBackgroundColor);\n    --controlBorderColorInterest: var(--controlColorInterest);\n```\n\n##### Active Colors\nActive refers to engagement with the control. They are typing; clicking in the control. \n\n```\n    --controlColorActive: var(--colorNeutralDarker);\n    --controlBackgroundColorActive: var(--controlBackgroundColor);\n    --controlBorderColorActive: var(--controlBorderColorActive);\n    \n```\n\n##### Deactivated\nThis refers to `:disabled` either on a control or a fieldset\n\n```\n    --controlColorDeactivated: var(--controlColor);\n    --controlBackgroundColorDeactivated: var(--colorNeutralLighter);\n    --controlBorderColorDeactivated: var(--controlBackgroundColorDeactivated);\n\n```\n\n##### Informational\nThese are colors for the result of an action. Unlike the other colors, they aren't intended for a specific property. \n\n```\n    --controlColorAlert: var(--colorWarmest, rgb(168, 62, 0));\n    --controlColorAttention: var(--colorWarmer, rgb(168, 118, 0));\n```\n\n\n#### Line Heights\nYou have two line-heights to choose from:\n\n```\n    --formBaseLineHeight: var(--smallLineHeight, 1.2);\n    --formSmallLineHeight: 1;\n```\n\n\n#### Text Sizes\nYou have a minimum of 6 text sizes in two categories: `--form\u003cn\u003eTextSize` and `--form\u003cn\u003eTitleSize`. You have a \"base\" and then superlatives or diminutives to describe the deviation from that base. e.g.:\n\nYou may notice that there is no \"big\" or \"bigger\" like with the typography or table baselines. This is because forms should use fewer font-sizes. But you are free to change these and add your own if you need to. \n```\n\t--formBiggestTextSize: var(--biggerTextSize, 1.2em);\n\t--formBaseTextSize: var(--baseTextSize, 1em);\n\t--formSmallestTextSize: var(--smallTextSize, .8em);\n```\n\nYou may notice that title sizes overlap with base text sizes. This is intentional! You have the flexibility to have your smaller headings be the same as larger text, or to create new title sizes for your headings that won't overlap with the text. \n\n\n```\n    --formBiggestTitleSize: var(--baseTitleSize, 1.5em);\n    --formBaseTitleSize: var(--formBiggestTextSize);\n    --formSmallestTitleSize: var(--formBaseTextSize);\n```\n\nYou also have helpful abstractions to use:\n\n```\n\t--formControlSize: var(--formBaseTextSize);\n    --formLabelSize: var(--formBaseTextSize);\n    --formTitleSize: var(--formBaseTitleSize);\n```\n\n#### Font families\nYou have two font families to choose from.\n\n```\n    --formBaseFontFamily: var(--baseFontFamily,  'Georgia','Times New Roman', 'serif');\n    --formTitleFontFamily: var(--titleFontFamily, 'Helvetica', 'Arial', 'sans-serif');\n```\n\n## Conventions and Standards\n\n### Style guide\nThe CSS follows the guidelines established [here](https://gist.github.com/paceaux/f31e278613ab29b74a412a7eb5046422).\n\n### Naming Conventions\nCSS Variable names follow a convention established [here](https://gist.github.com/paceaux/8638765e747f5bd6387b721cde99e066#sassscssstylus-naming).\n\n\n[license-image]: http://img.shields.io/npm/l/form-baseline.css.svg\n[license-url]: LICENSE\n[downloads-image]: http://img.shields.io/npm/dm/form-baseline.css.svg\n[downloads-url]: http://npm-stat.com/charts.html?package=form-baseline.css\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaceaux%2Fform-baseline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpaceaux%2Fform-baseline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaceaux%2Fform-baseline/lists"}