{"id":23721480,"url":"https://github.com/chrisuser/web-design-cookbook","last_synced_at":"2025-08-09T01:36:51.904Z","repository":{"id":203140795,"uuid":"608767371","full_name":"ChrisUser/web-design-cookbook","owner":"ChrisUser","description":"CSS tips and tricks collected from around the web","archived":false,"fork":false,"pushed_at":"2023-11-07T22:18:07.000Z","size":18,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-30T22:20:10.298Z","etag":null,"topics":["css-tricks","css3"],"latest_commit_sha":null,"homepage":"","language":null,"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/ChrisUser.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-03-02T17:38:11.000Z","updated_at":"2023-10-23T15:52:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"6de7b05d-3754-49fd-a713-13acaf315e81","html_url":"https://github.com/ChrisUser/web-design-cookbook","commit_stats":null,"previous_names":["chrisuser/web-design-cookbook"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChrisUser%2Fweb-design-cookbook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChrisUser%2Fweb-design-cookbook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChrisUser%2Fweb-design-cookbook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChrisUser%2Fweb-design-cookbook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChrisUser","download_url":"https://codeload.github.com/ChrisUser/web-design-cookbook/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239816356,"owners_count":19701752,"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":["css-tricks","css3"],"created_at":"2024-12-30T22:20:40.675Z","updated_at":"2025-02-20T09:44:02.167Z","avatar_url":"https://github.com/ChrisUser.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Design Cookbook\n\n\u003e **Note**: This is a simple repo that contains some css and design related tricks found online. If available, for each snippet a related article or full explanation will be provided through a link.\n\n## Table of Contents\n\n1. [Best practices](#best-practices)\n1. [Performance](#performance)\n1. [Fallbacks](#fallbacks)\n1. [Layout](#layout)\n1. [Contribute](#contribute)\n1. [License](#license)\n\n## Best practices\n\n### 1. `line-height` management\n\nGenerally speaking: for a paragraph a good `line-height` ranges between 1.5 and 1.7 for most fonts.\n\n- [Digital Ocean](https://www.digitalocean.com/community/tutorials/css-line-height)\n\n```css\n.well-readable-paragraph {\n  /* ... */\n  font-size: 16px;\n  line-height: 1.5;\n}\n```\n\n\u003e [Avoid unexpected results](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#prefer_unitless_numbers_for_line-height_values) by using unitless line-height.\n\n### 2. User prefer reduced motion\n\nThis media feature is used to detect if a user has enabled a setting on their device to minimize the amount of **non-essential motion**.\n\n- [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)\n\n```css\n@media (prefers-reduced-motion: reduce) {\n  .animated-element {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n```\n\n\u003e **Note**: Remember that [no motion isn’t always prefers-reduced-motion](https://css-tricks.com/nuking-motion-with-prefers-reduced-motion/).\n\n## Performance\n\n### 1. Performant naming convention\n\nThat's one of the most performant CSS naming convention.\n\n```css\n.button {\n  ...;\n}\n\n/* -- for variants */\n.button--primary {\n  ...;\n}\n\n/* __ for child elements */\n.button--primary__icon {\n  ...;\n}\n\n.button--secondary {\n  ...;\n}\n```\n\n### 2. Use FOUT font rule\n\nAdd `font-display: swap` to a @font-face block to opt-in to FOUT on browsers that support it.\n\n- [Full article](https://css-tricks.com/really-dislike-fout-font-display-optional-might-jam/)\n\n```css\n@font-face {\n  font-family: Roboto;\n  src: url(/path/to/fonts/Roboto.woff) format(\"woff\");\n  font-weight: 400;\n  font-style: normal;\n\n  font-display: swap;\n}\n```\n\n### 3. Css selectors efficiency\n\nThe following is an ordered list of some CSS selectors from fastest to slowest (heaviest).\n\nKeep an eye on it when trying to improve code performance.\n\n```css\n/* 1. */  .foo-class {}\n/* 2. */  div {}\n/* 3. */  header + main {}\n/* 4. */  ul \u003e li {}\n/* 5. */  ul li\n/* 6. */  *\n/* 7. */  a[href=\"https://some-example.com\"]\n/* 8. */  a:visited\n```\n\n### 4. will-change animations optimization\n\nThe `will-change` property optimizes animations by letting the browser know which properties and elements are just about to be manipulated, potentially increasing the performance of that particular operation.\n\n- [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change)\n\n```css\n.element {\n  will-change: transform, opacity;\n}\n```\n\n## Fallbacks\n\n### 1. Support fallback\n\nThe `@support()` feature query can be used to handle CSS properties fallbacks.\n\n- [MDN guide](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)\n\n```css\n.box \u003e * {\n  background: red;\n}\n\n@supports (display: flex) {\n  /* If the property is supported */\n  .flex-container \u003e * {\n    background: blue;\n  }\n\n  .flex-container {\n    display: flex;\n  }\n}\n\n@supports not (display: flex) {\n  /* If the property isn't supported */\n  .flex-container \u003e * {\n    background: green;\n  }\n\n  .flex-container {\n    display: block;\n  }\n}\n```\n\n### 2. Aspect ratio with fallback\n\nGenerate aspect ratio code [here](https://ratiobuddy.com/).\n\n- [Full article](https://dev.to/nikolab/css-aspect-ratio-with-a-fallback-for-old-browsers-3eon)\n\n```css\n.box {\n  width: 100%;\n  aspect-ratio: 1/1;\n  border: 1px #ccc solid;\n}\n\n@supports not (aspect-ratio) {\n  .box {\n    padding-top: 100%;\n    height: 0;\n    position: relative;\n    overflow: hidden;\n  }\n}\n```\n\n## Layout\n\n### 1. The stack vs flow\n\nEvery direct sibling child element of `.stack` has margin-block-start added to it. The `.flow` uses custom variables and a fallback value.\n\n- [Full article](https://andy-bell.co.uk/my-favourite-3-lines-of-css/?utm_source=tldrnewsletter)\n\n**The stack**\n\n```css\n.stack \u003e * + * {\n  margin-block-start: 1.5rem;\n}\n```\n\n**flow**\n\n```css\n.flow \u003e * + * {\n  margin-block-start: var(--flow-space, 1em);\n}\n```\n\n### 2. Paragraph characters width\n\nThe width of an element can be limited by specifying the number of characters allowed.\n\n```css\n.paragraph {\n  width: 50ch;\n}\n```\n\n### 3. Scrollbar space automatic management\n\nA default right space for the scrollbar can be added to the container even when the scroll is not active nor visible.\n\n- [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter)\n\n```css\n.container {\n  scrollbar-gutter: stable;\n}\n```\n\n### 4. grid auto-placements\n\nThe `grid-auto-flow` property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.\n\n- [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow)\n\n```css\ngrid-auto-flow: row | column | dense | row dense | column dense;\n```\n\n### 5. Flex-grow 9999 Hack\n\nMakes a flex item behave like it has **two flex grow** values.\n\n- [Full article](https://www.joren.co/flex-grow-9999-hack/)\n\n```css\n.container {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n}\n\n.item-a {\n  flex-grow: 1;\n}\n\n.item-b {\n  flex-grow: 9999;\n  flex-basis: 20em;\n}\n```\n\n### 6. Inner border radius trick\n\nTo calculate the correct border radius of an inner div based on its parent's radius use the following formula.\n\n- [Personal snippet](https://github.com/ChrisUser)\n\n```html\n\u003cdiv class=\"parent-block\"\u003e\n  \u003cdiv class=\"child-block\" /\u003e\n\u003c/div\u003e\n```\n\n```css\n.parent-block {\n  /* ... */\n  border-radius: var(--main-border-radius);\n  padding: var(--main-padding);\n}\n\n.child-block {\n  /* ... */\n\n  /*\n  * @author ChrisUser - Cristiano Raimondi\n  * Biggest value between the parent's radius minus its padding and\n  * half the minimum value between the two.\n  */\n  border-radius: max(\n    calc(var(--main-border-radius) - var(--main-padding)),\n    calc(min(var(--main-border-radius), var(--main-padding)) * 0.5)\n  );\n}\n```\n\n## Contribute\n\n- [How to contribute](https://github.com/ChrisUser/.github/blob/main/CONTRIBUTING.md)\n\n## License\n\nMIT License\n\nCopyright (c) 2023 Cristiano Raimondi\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\n---\n\n**[⬆ back to top](#table-of-contents)**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisuser%2Fweb-design-cookbook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrisuser%2Fweb-design-cookbook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisuser%2Fweb-design-cookbook/lists"}