{"id":13392836,"url":"https://github.com/iamstarkov/css-initials","last_synced_at":"2025-07-21T08:31:50.069Z","repository":{"id":57741926,"uuid":"81225746","full_name":"iamstarkov/css-initials","owner":"iamstarkov","description":"initial CSS values to use in `all: initial` polyfils","archived":true,"fork":false,"pushed_at":"2019-04-04T10:53:04.000Z","size":100,"stargazers_count":70,"open_issues_count":0,"forks_count":12,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-07-07T17:07:23.650Z","etag":null,"topics":["cross-browser","css","ui","ui-components"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iamstarkov.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-07T15:54:20.000Z","updated_at":"2025-04-01T18:00:45.000Z","dependencies_parsed_at":"2022-09-10T22:50:35.200Z","dependency_job_id":null,"html_url":"https://github.com/iamstarkov/css-initials","commit_stats":null,"previous_names":["iamstarkov/initize"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/iamstarkov/css-initials","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamstarkov%2Fcss-initials","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamstarkov%2Fcss-initials/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamstarkov%2Fcss-initials/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamstarkov%2Fcss-initials/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iamstarkov","download_url":"https://codeload.github.com/iamstarkov/css-initials/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamstarkov%2Fcss-initials/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266267090,"owners_count":23902297,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["cross-browser","css","ui","ui-components"],"created_at":"2024-07-30T17:00:37.917Z","updated_at":"2025-07-21T08:31:49.819Z","avatar_url":"https://github.com/iamstarkov.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"# css-initials\n\nInitial CSS values for `all: initial` polyfills.\n\n## Table of Contents\n\n* [Usage](#usage)\n  * [vanilla css](#vanilla-css)\n  * [css-modules](#css-modules)\n  * [jss](#jss)\n  * [styled-components](#styled-components)\n* [FAQ](#faq)\n\n## Usage\n\n### Vanilla css\n\nImport `all.css` or `inherited.css` file and add the class `initials-all` or `initials-inherited` to an element you want to have initial values.\n\n```css\n/**\n * On the very top of your ./styles/main.css\n */\n @import './css/css-initials.css';\n\n/*\n * Those properties depend on a browser and user settings. You can reset them manually\n * if you want them to behave consistently.\n */\n.initials-all {\n  font-family: Arial, \"sans-serif\";\n  text-align: left;\n  quotes: \"“\" \"”\" \"‘\" \"’\";\n  color: black;\n  outline-color: black;\n}\n\n/* user styles here */\n\n.button {\n  /* …more user styles here…*/\n}\n```\n\nIn HTML, just add css-initials class in the start\n\n```html\n\u003cbutton class=\"initials-all button\"\u003eSubmit\u003c/button\u003e\n```\n\n### css-modules\n\n```css\n/**\n * Once in your project, specify your\n * ./src/components/app-css-initials/index.css\n */\n.app-css-initials {\n  composes: css-initials from 'css-initials/index.css';\n\n  font-family: Arial, \"sans-serif\";\n  text-align: left;\n  quotes: \"“\" \"”\" \"‘\" \"’\";\n  color: black;\n  outline-color: black;\n}\n\n/**\n *  Anywhere after in your components\n *  ./src/components/button/index.css\n */\n.button {\n  composes: app-css-initials from './app-css-initials.css';\n  /* …more user styles here…*/\n}\n\n```\n\n### css-in-js\n\n#### JSS\n\n```js\nimport cssInitials from 'css-initials';\nimport jss from 'jss';\nimport preset from 'jss-preset-default';\n\njss.setup(preset());\n\nconst myCssInitials = Object.assign({}, cssInitials, {\n  fontFamily: 'Arial, sans-serif',\n  textAlign: 'left',\n  quotes: '\"“\" \"”\" \"‘\" \"’\"',\n  color: 'black',\n  outlineColor: 'black',\n});\n\nconst sheet = jss.createStyleSheet({ initials: myCssInitials }).attach();\n\nconst {classes} = jss.createStyleSheet({\n  button: {\n    composes: sheet.classes.initials,\n    background: 'blue',\n  }\n}).attach();\n\ndocument.body.innerHTML = `\n  \u003cbutton class=\"${classes.button}\"\u003eButton\u003c/button\u003e\n`;\n\n```\n#### styled-components\n\n```js\n// Once in your project, specify your\n// ./src/components/app-css-initials/index.js\nimport cssInitials from 'css-initials';\n\nconst toCSS = obj =\u003e Object.keys(obj).map(key =\u003e `${key}: ${obj[key]};`).join('\\n');\n\nexport default `\n  ${toCSS(cssInitials)}\n  font-family: Arial, 'sans-serif';\n  text-align: left;\n  quotes: \"“\" \"”\" \"‘\" \"’\";\n  color: black;\n  outline-color: black;\n`;\n\n// Anywhere after in your components\n// ./src/components/button/index.js\nimport React from 'react';\nimport styled from 'styled-components';\nimport initials from '../app-css-initials';\n\nconst Button = styled.button`\n  ${initials}\n  display: inline-block;\n  border-radius: 5px;\n  /* …more styles here…*/\n`;\n\nexport default Button;\n```\n\n## FAQ\n\n—**What is wrong with the usual `all: initial`?**  \n—It's [not supported in IE, Edge, Mobile android][IEEDGE].\n\n—**What do you mean by cross-browser?**  \n—I took all properties and combined 'em with their initial values, so it works in every browser, because its essentially `all: initial`, but expanded.\n\n—**What do you mean by thoughtful?**  \n—There are several caveats about `all: initial` as it is now, and I have built this package with those caveats in mind.\n\n—**What are the caveats?**  \n— 1) Initial values of `font-family`, `quotes` and `color` depend on the browser  \n— 2) 14 properties depend on `currentColor`, which is a reference to the `color` property, which varies from browser to browser (hence prev point), and these properties are: `-webkit-border-before-color`, `-webkit-text-fill-color`, `-webkit-text-stroke-color`, `border-block-end-color`, `border-block-start-color`, `border-bottom-color`, `border-inline-end-color`, `border-inline-start-color`, `border-left-color`, `border-right-color`, `border-top-color`, `column-rule-color`, `text-decoration-color`, `text-emphasis-color`.  \n— 3) Initial value of `outline-color` is either `invert` if the browser supports it, or `currentColor` otherwise.\n\n—**Is this all?**  \n—It depends. If you want military grade CSS cascade defense, then no, otherwise hold on. Thing is that according to the spec, `all: initial` doesn't apply initial values to `unicode-bidi` and `direction`.\n\n—**I've never heard of `unicode-bidi`.**  \n—To be honest, me neither. It is quite complicated and I don't know why one would need it. But as long as this property is not inherited it's safe to leave it untouched.\n\n—**What's up with `direction`?**  \n—Good question. Firstly, `direction` deals with the `ltr/rtl` problem. Secondly, it is inheritable, so it will definitely affect your components. It can have a negative impact on your components' isolation, so it also doesn't make sense to allow your components to inherit `direction` from the outside world. Your components should be optimised for `ltr` anyway, and `direction: rtl` wont make 'em automatically look good in arabic or hebrew. To fix `ltr/rtl` problem properly you would need a solution like [rtlcss][], because you not only want to change direction, but you want to adjust `text-align`, `margin`, `padding`, `border-width`, etc.\n\n—**Is this all?**  \n—yes, thanks for your attention.\n\n[IEEDGE]: http://caniuse.com/#feat=css-all\n[rtlcss]: https://github.com/MohammadYounes/rtlcss\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamstarkov%2Fcss-initials","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiamstarkov%2Fcss-initials","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamstarkov%2Fcss-initials/lists"}