[
{
"path": "CODE-OF-CONDUCT.md",
"content": "# Contributor Code of Conduct\n\nAs contributors and maintainers of this project, and in the interest of fostering an open and welcoming community, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.\n\nWe are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, religion, or nationality.\n\nExamples of unacceptable behavior by participants include:\n\n* The use of sexualized language or imagery\n* Personal attacks\n* Trolling or insulting/derogatory comments\n* Public or private harassment\n* Publishing other's private information, such as physical or electronic addresses, without explicit permission\n* Other unethical or unprofessional conduct\n\nProject maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.\n\nBy adopting this Code of Conduct, project maintainers commit themselves to fairly and consistently applying these principles to every aspect of managing this project. Project maintainers who do not follow or enforce the Code of Conduct may be permanently removed from the project team.\n\nThis Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community.\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project maintainer at mjsmithme@gmail.com. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. Maintainers are obligated to maintain confidentiality with regard to the reporter of an incident.\n\nThis Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.3.0, available at [http://contributor-covenant.org/version/1/3/0/](http://contributor-covenant.org/version/1/3/0/)."
},
{
"path": "CONTRIBUTING.md",
"content": "# Contribution Guidelines\n\nPlease note that this project is released with a [Contributor Code of Conduct](CODE-OF-CONDUCT.md). By participating in this project you agree to abide by its terms.\n\n## Contents\n\n- [Adding to This List](#adding-to-this-list)\n- [Updating Your Pull Request](#updating-your-pull-request)\n\n## Adding to This List\n\nPlease ensure your pull request adheres to the following guidelines:\n\n- Search open and closed PRs to avoid duplicate suggestions.\n- Only submit CSS tips that you think would be useful to others. This implies each tip has enough succinct content to describe why it's useful.\n- Add your tip at the bottom of the [README](https://github.com/AllThingsSmitty/css-protips/blob/master/README.md) document. Add a link to your tip at the bottom of the table of contents.\n- Use [title-case](https://titlecaseconverter.com/).\n- Code formatting should follow standard [CSSLint](http://www.csslint.net) default settings, including:\n - Indent with two spaces\n - Use shorthand, e.g., `margin: 10px 10px 0.5rem;`\n - Use double quotes, e.g., `background: url(\"logo.svg\");`\n - Use leading zeros with numberic values, e.g., `padding: 0.75rem;`\n - Sort properties alphabetically\n - **Avoid letting your code formatter format other section of the README file.**\n- Make sure your text editor is set to remove trailing whitespace.\n- Check your spelling and grammar.\n- The PR should have a useful title.\n\nThank you for your suggestions!\n\n## Updating Your Pull Request\n\nSometimes a maintainer will ask you to edit your pull request before it's included. This is normally due to spelling errors or because your PR didn't match the above guidelines. [This write-up](https://github.com/RichardLitt/knowledge/blob/master/github/amending-a-commit-guide.md) covers the different ways you can change a pull request.\n"
},
{
"path": "LICENSE",
"content": "CC0 1.0 Universal\n\nStatement of Purpose\n\nThe laws of most jurisdictions throughout the world automatically confer\nexclusive Copyright and Related Rights (defined below) upon the creator and\nsubsequent owner(s) (each and all, an \"owner\") of an original work of\nauthorship and/or a database (each, a \"Work\").\n\nCertain owners wish to permanently relinquish those rights to a Work for the\npurpose of contributing to a commons of creative, cultural and scientific\nworks (\"Commons\") that the public can reliably and without fear of later\nclaims of infringement build upon, modify, incorporate in other works, reuse\nand redistribute as freely as possible in any form whatsoever and for any\npurposes, including without limitation commercial purposes. These owners may\ncontribute to the Commons to promote the ideal of a free culture and the\nfurther production of creative, cultural and scientific works, or to gain\nreputation or greater distribution for their Work in part through the use and\nefforts of others.\n\nFor these and/or other purposes and motivations, and without any expectation\nof additional consideration or compensation, the person associating CC0 with a\nWork (the \"Affirmer\"), to the extent that he or she is an owner of Copyright\nand Related Rights in the Work, voluntarily elects to apply CC0 to the Work\nand publicly distribute the Work under its terms, with knowledge of his or her\nCopyright and Related Rights in the Work and the meaning and intended legal\neffect of CC0 on those rights.\n\n1. Copyright and Related Rights. A Work made available under CC0 may be\nprotected by copyright and related or neighboring rights (\"Copyright and\nRelated Rights\"). Copyright and Related Rights include, but are not limited\nto, the following:\n\n i. the right to reproduce, adapt, distribute, perform, display, communicate,\n and translate a Work;\n\n ii. moral rights retained by the original author(s) and/or performer(s);\n\n iii. publicity and privacy rights pertaining to a person's image or likeness\n depicted in a Work;\n\n iv. rights protecting against unfair competition in regards to a Work,\n subject to the limitations in paragraph 4(a), below;\n\n v. rights protecting the extraction, dissemination, use and reuse of data in\n a Work;\n\n vi. database rights (such as those arising under Directive 96/9/EC of the\n European Parliament and of the Council of 11 March 1996 on the legal\n protection of databases, and under any national implementation thereof,\n including any amended or successor version of such directive); and\n\n vii. other similar, equivalent or corresponding rights throughout the world\n based on applicable law or treaty, and any national implementations thereof.\n\n2. Waiver. To the greatest extent permitted by, but not in contravention of,\napplicable law, Affirmer hereby overtly, fully, permanently, irrevocably and\nunconditionally waives, abandons, and surrenders all of Affirmer's Copyright\nand Related Rights and associated claims and causes of action, whether now\nknown or unknown (including existing as well as future claims and causes of\naction), in the Work (i) in all territories worldwide, (ii) for the maximum\nduration provided by applicable law or treaty (including future time\nextensions), (iii) in any current or future medium and for any number of\ncopies, and (iv) for any purpose whatsoever, including without limitation\ncommercial, advertising or promotional purposes (the \"Waiver\"). Affirmer makes\nthe Waiver for the benefit of each member of the public at large and to the\ndetriment of Affirmer's heirs and successors, fully intending that such Waiver\nshall not be subject to revocation, rescission, cancellation, termination, or\nany other legal or equitable action to disrupt the quiet enjoyment of the Work\nby the public as contemplated by Affirmer's express Statement of Purpose.\n\n3. Public License Fallback. Should any part of the Waiver for any reason be\njudged legally invalid or ineffective under applicable law, then the Waiver\nshall be preserved to the maximum extent permitted taking into account\nAffirmer's express Statement of Purpose. In addition, to the extent the Waiver\nis so judged Affirmer hereby grants to each affected person a royalty-free,\nnon transferable, non sublicensable, non exclusive, irrevocable and\nunconditional license to exercise Affirmer's Copyright and Related Rights in\nthe Work (i) in all territories worldwide, (ii) for the maximum duration\nprovided by applicable law or treaty (including future time extensions), (iii)\nin any current or future medium and for any number of copies, and (iv) for any\npurpose whatsoever, including without limitation commercial, advertising or\npromotional purposes (the \"License\"). The License shall be deemed effective as\nof the date CC0 was applied by Affirmer to the Work. Should any part of the\nLicense for any reason be judged legally invalid or ineffective under\napplicable law, such partial invalidity or ineffectiveness shall not\ninvalidate the remainder of the License, and in such case Affirmer hereby\naffirms that he or she will not (i) exercise any of his or her remaining\nCopyright and Related Rights in the Work or (ii) assert any associated claims\nand causes of action with respect to the Work, in either case contrary to\nAffirmer's express Statement of Purpose.\n\n4. Limitations and Disclaimers.\n\n a. No trademark or patent rights held by Affirmer are waived, abandoned,\n surrendered, licensed or otherwise affected by this document.\n\n b. Affirmer offers the Work as-is and makes no representations or warranties\n of any kind concerning the Work, express, implied, statutory or otherwise,\n including without limitation warranties of title, merchantability, fitness\n for a particular purpose, non infringement, or the absence of latent or\n other defects, accuracy, or the present or absence of errors, whether or not\n discoverable, all to the greatest extent permissible under applicable law.\n\n c. Affirmer disclaims responsibility for clearing rights of other persons\n that may apply to the Work or any use thereof, including without limitation\n any person's Copyright and Related Rights in the Work. Further, Affirmer\n disclaims responsibility for obtaining any necessary consents, permissions\n or other rights required for any use of the Work.\n\n d. Affirmer understands and acknowledges that Creative Commons is not a\n party to this document and has no duty or obligation with respect to this\n CC0 or use of the Work.\n\nFor more information, please see\n"
},
{
"path": "README.md",
"content": "
\n \n
\n\n# CSS Protips [](https://awesome.re)\n\nA collection of tips to help take your CSS skills pro.\n\n> [!TIP]\n> For other great lists check out [@sindresorhus](https://github.com/sindresorhus/)'s curated list of [awesome lists](https://github.com/sindresorhus/awesome/).\n\n## Contents\n\n- [Protips](#protips)\n- [Support](#support)\n- [Translations](#translations)\n- [Contribution Guidelines](CONTRIBUTING.md)\n\n## Protips\n\n1. [Use a CSS Reset](#use-a-css-reset)\n1. [Inherit `box-sizing`](#inherit-box-sizing)\n1. [Use `unset` Instead of Resetting All Properties](#use-unset-instead-of-resetting-all-properties)\n1. [Use `:not()` to Apply/Unapply Borders on Navigation](#use-not-to-applyunapply-borders-on-navigation)\n1. [Check if Font Is Installed Locally](#check-if-font-is-installed-locally)\n1. [Add `line-height` to `body`](#add-line-height-to-body)\n1. [Set `:focus` for Form Elements](#set-focus-for-form-elements)\n1. [Vertically-Center Anything](#vertically-center-anything)\n1. [Use `aspect-ratio` Instead of Height/Width](#use-aspect-ratio-instead-of-heightwidth)\n1. [Comma-Separated Lists](#comma-separated-lists)\n1. [Select Items Using Negative `nth-child`](#select-items-using-negative-nth-child)\n1. [Use SVG for Icons](#use-svg-for-icons)\n1. [Use the \"Lobotomized Owl\" Selector](#use-the-lobotomized-owl-selector)\n1. [Use `max-height` for Pure CSS Sliders](#use-max-height-for-pure-css-sliders)\n1. [Equal-Width Table Cells](#equal-width-table-cells)\n1. [Get Rid of Margin Hacks With Flexbox](#get-rid-of-margin-hacks-with-flexbox)\n1. [Use Attribute Selectors with Empty Links](#use-attribute-selectors-with-empty-links)\n1. [Control Specificity Better With `:is()`](#control-specificity-better-with-is)\n1. [Style \"Default\" Links](#style-default-links)\n1. [Intrinsic Ratio Boxes](#intrinsic-ratio-boxes)\n1. [Style Broken Images](#style-broken-images)\n1. [Use `rem` for Global Sizing; Use `em` for Local Sizing](#use-rem-for-global-sizing-use-em-for-local-sizing)\n1. [Hide Autoplay Videos That Aren't Muted](#hide-autoplay-videos-that-arent-muted)\n1. [Use `:root` for Flexible Type](#use-root-for-flexible-type)\n1. [Set `font-size` on Form Elements for a Better Mobile Experience](#set-font-size-on-form-elements-for-a-better-mobile-experience)\n1. [Use Pointer Events to Control Mouse Events](#use-pointer-events-to-control-mouse-events)\n1. [Set `display: none` on Line Breaks Used as Spacing](#set-display-none-on-line-breaks-used-as-spacing)\n1. [Use `:empty` to Hide Empty HTML Elements](#use-empty-to-hide-empty-html-elements)\n1. [Use `margin-inline` instead of `margin`](#use-margin-inline-instead-of-margin)\n\n### Use a CSS Reset\n\nCSS resets help enforce style consistency across different browsers with a clean slate for styling elements. There are plenty of reset patterns to find, or you can use a more simplified reset approach:\n\n```css\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n```\n\nNow elements will be stripped of margins and padding, and `box-sizing` lets you manage layouts with the CSS box model.\n\n#### [Demo](https://codepen.io/AllThingsSmitty/pen/kkrkLL)\n\n> [!TIP]\n> If you follow the [Inherit `box-sizing`](#inherit-box-sizing) tip below you might opt to not include the `box-sizing` property in your CSS reset.\n\n[Back to top](#contents)\n\n### Inherit `box-sizing`\n\nLet `box-sizing` be inherited from `html`:\n\n```css\nhtml {\n box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: inherit;\n}\n```\n\nThis makes it easier to change `box-sizing` in plugins or other components that leverage other behavior.\n\n#### [Demo](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)\n\n[Back to top](#contents)\n\n### Use `unset` Instead of Resetting All Properties\n\nWhen resetting an element's properties, it's not necessary to reset each individual property:\n\n```css\nbutton {\n background: none;\n border: none;\n color: inherit;\n font: inherit;\n outline: none;\n padding: 0;\n}\n```\n\nYou can specify all of an element's properties using the `all` shorthand. Setting the value to `unset` changes an element's properties to their initial values:\n\n```css\nbutton {\n all: unset;\n}\n```\n\n[Back to top](#contents)\n\n### Use `:not()` to Apply/Unapply Borders on Navigation\n\nInstead of putting on the border...\n\n```css\n/* add border */\n.nav li {\n border-right: 1px solid #666;\n}\n```\n\n...and then taking it off the last element...\n\n```css\n/* remove border */\n.nav li:last-child {\n border-right: none;\n}\n```\n\n...use the `:not()` pseudo-class to only apply to the elements you want:\n\n```css\n.nav li:not(:last-child) {\n border-right: 1px solid #666;\n}\n```\n\nHere, the CSS selector is read as a human would describe it.\n\n#### [Demo](https://codepen.io/AllThingsSmitty/pen/LkymvO)\n\n[Back to top](#contents)\n\n### Check if Font Is Installed Locally\n\nYou can check if a font is installed locally before fetching it remotely, which is a good performance tip, too.\n\n```css\n@font-face {\n font-family: \"Dank Mono\";\n src:\n /* Full name */ local(\"Dank Mono\"), /* Postscript name */ local(\"Dank Mono\"),\n /* Otherwise, download it! */ url(\"//...a.server/fonts/DankMono.woff\");\n}\n\ncode {\n font-family: \"Dank Mono\", system-ui-monospace;\n}\n```\n\nH/T to Adam Argyle for sharing this protip and [demo](https://codepen.io/argyleink/pen/VwYJpgR).\n\n[Back to top](#contents)\n\n### Add `line-height` to `body`\n\nYou don't need to add `line-height` to each `
![\"light](\"./assets/img/bulb.svg\")
\n