├── .gitattributes ├── .github └── pull_request_template.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE └── README.md /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | readme.md merge=union 3 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | # Description 2 | 3 | Adding [item] to [section]. It is awesome because [reasons]. 4 | 5 | ## Contribution Guidelines 6 | 7 | Please review the [Contributing](https://github.com/oddbird/awesome-anchor-positioning/blob/main/CONTRIBUTING.md) guidelines and agree to the [Code of Conduct](https://github.com/oddbird/awesome-anchor-positioning/blob/main/CODE_OF_CONDUCT.md). 8 | 9 | Ensure your pull request adheres to the following guidelines: 10 | 11 | - Additions should be added to the bottom of the relevant category. 12 | - Keep descriptions short and simple, but descriptive. 13 | - Check your spelling and grammar. 14 | - New categories or improvements to the existing categorization are welcome, but should be done in a separate pull request. 15 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Code of Conduct 2 | 3 | As a company, we want to embrace the very differences that have made our 4 | collaboration successful, and work together to provide the best environment for 5 | learning, growing, working, and sharing ideas. It is imperative that OddBird 6 | continue to be a welcoming, challenging, fun, and fair place to work. 7 | 8 | OddBird is dedicated to providing a harassment-free environment for everyone – 9 | regardless of gender, gender identity and expression, sexual orientation, 10 | disability, physical appearance, body size, age, race, or religion. We do not 11 | tolerate harassment in any form. If you are being harassed by an OddBird 12 | contributor, notice that someone else is being harassed, or have any other 13 | concerns, please contact the owners: 14 | 15 | - All: 16 | - Carl Meyer: 17 | - Jonny Gerig Meyer: 18 | - Miriam Suzanne: 19 | 20 | ## Contributors strive to: 21 | 22 | - **Be welcoming, kind, and helpful** 23 | - **Be collaborative, open, and transparent** 24 | - **Take responsibility for our words and actions** 25 | - **Look out for each other** 26 | 27 | ## Scope 28 | 29 | This document and related procedures apply to behavior occurring inside or 30 | outside the scope of OddBird activities, online or in-person, in public, at 31 | work, in one-on-one communications, and anywhere such behavior has the potential 32 | to adversely affect the safety and well-being of OddBird contributors. Any 33 | OddBird contributor who violates this code of conduct may be sanctioned, removed 34 | from the team, or expelled from OddBird community spaces and activities at the 35 | discretion of the owners. 36 | 37 | If you are being harassed by an OddBird contributor outside our work 38 | environment, we still want to know about it. We will take all good-faith reports 39 | of harassment by OddBird contributors, especially the owners, seriously. This 40 | includes harassment outside our spaces, and harassment that took place at any 41 | point in time. We reserve the right to exclude people from OddBird spaces and 42 | activities based on their past behavior, including behavior outside OddBird 43 | spaces, and behavior towards people who are not OddBird contributors. 44 | 45 | OddBird contributors include owners, contractors, clients, open source 46 | contributors, and anyone participating in OddBird spaces or activities. 47 | 48 | ## Harassment includes: 49 | 50 | - Derogatory, unwelcome, or discriminatory comments related to gender, gender 51 | identity and expression, sexual orientation, disability, mental illness, 52 | neuro(a)typicality, physical appearance, body size, age, race, or religion. 53 | - Repeated unwelcome comments regarding a person’s lifestyle choices and 54 | practices, including but not limited to topics like food, health, parenting, 55 | relationships, geographic locations, drugs, and employment. 56 | - Deliberate misgendering or use of ‘dead’ or rejected names. 57 | - Gratuitous or off-topic sexual images or behavior in spaces where they are not 58 | appropriate. 59 | - Physical contact and simulated physical contact (eg, textual descriptions like 60 | “`*hug*`” or “`*backrub*`”) without consent or after a request to stop. 61 | - Threats of violence. 62 | - Incitement of violence towards any individual, including encouraging a person 63 | to commit suicide or to engage in self-harm. 64 | - Deliberate intimidation. 65 | - Stalking or following. 66 | - Harassing photography or recording, including logging online activity for 67 | harassment purposes. 68 | - Sustained disruption of discussion. 69 | - Unwelcome sexual attention. 70 | - Continued one-on-one communication after requests to cease. 71 | - Deliberate “outing” of any aspect of a person’s identity without their consent 72 | – except as necessary to protect vulnerable people from intentional abuse. 73 | - Publication of non-harassing private communication. 74 | 75 | ## Exclusions 76 | 77 | OddBird prioritizes marginalized people’s safety over privileged people’s 78 | comfort. The owners will not act on complaints regarding: 79 | 80 | - ‘Reverse’ -isms, including ‘reverse racism,’ ‘reverse sexism,’ and ‘cisphobia’ 81 | - Reasonable communication of boundaries, such as “leave me alone,” “go away,” 82 | or “I’m not discussing this with you.” 83 | - Communicating in a ‘tone’ you don’t find congenial 84 | - Criticizing racist, sexist, cissexist, or otherwise oppressive behavior or 85 | assumptions 86 | 87 | ## Reporting 88 | 89 | If you are being harassed by an OddBird contributor, notice that someone else is 90 | being harassed, or have any other concerns, please contact the owners: 91 | 92 | - All: 93 | - Carl Meyer: 94 | - Jonny Gerig Meyer: 95 | - Miriam Suzanne: 96 | 97 | If the person who is harassing you is one of the owners, that owner will recuse 98 | themselves from handling your incident. We will respond as promptly as we can. 99 | 100 | In order to protect this policy from abuse, we reserve the right to reject any 101 | report we believe to have been made in bad faith. Reports intended to silence 102 | legitimate criticism may be deleted without response. 103 | 104 | We will respect confidentiality requests for the purpose of protecting victims 105 | of abuse. At our discretion, we may publicly name a person about whom we’ve 106 | received harassment complaints, or privately warn third parties about them, if 107 | we believe that doing so will increase the safety of OddBird contributors or the 108 | general public. We will not name harassment victims without their affirmative 109 | consent. 110 | 111 | ## Consequences 112 | 113 | OddBird contributors asked to stop any harassing behavior are expected to comply 114 | immediately. If a participant engages in harassing behavior, the owners may take 115 | any action they deem appropriate, up to and including expulsion from all OddBird 116 | spaces and activities, as well as identification of the participant as a 117 | harasser to other OddBird contributors or the general public. 118 | 119 | The OddBird owners will be happy to help participants contact any relevant 120 | security or law enforcement officials, provide escorts, or otherwise assist any 121 | OddBird contributors experiencing harassment to feel safe for the duration of 122 | their interaction with our company. 123 | 124 | ## Attribution 125 | 126 | This anti-harassment policy is based on the example policy from the [Geek 127 | Feminism wiki], created by the Geek Feminism community, as well as the [Sass 128 | Community Guidelines], [Slack Developer Community Code of Conduct], and [FreeBSD 129 | Code of Conduct]. 130 | 131 | [Geek Feminism wiki]: 132 | https://geekfeminism.fandom.com/wiki/Community_anti-harassment 133 | [Sass Community Guidelines]: https://sass-lang.com/community-guidelines/ 134 | [Slack Developer Community Code of Conduct]: 135 | https://api.slack.com/community/code-of-conduct 136 | [FreeBSD Code of Conduct]: https://www.freebsd.org/internal/code-of-conduct/ 137 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contribution Guidelines 2 | 3 | Please note that this project is released with a 4 | [Contributor Code of Conduct](CODE_OF_CONDUCT.md). By participating in this 5 | project you agree to abide by its terms. 6 | 7 | --- 8 | 9 | To submit something awesome, open a pull request. 10 | 11 | Ensure your pull request adheres to the following guidelines: 12 | 13 | - Additions should be added to the bottom of the relevant category. 14 | - Keep descriptions short and simple, but descriptive. 15 | - Check your spelling and grammar. 16 | - New categories or improvements to the existing categorization are welcome, but 17 | should be done in a separate pull request. 18 | 19 | Thank you for your suggestions! 20 | 21 | ## Updating your PR 22 | 23 | A lot of times, making a PR adhere to the standards above can be difficult. If 24 | the maintainers notice anything that we'd like changed, we'll ask you to edit 25 | your PR before we merge it. There's no need to open a new PR, just edit the 26 | existing one. If you're not sure how to do that, 27 | [here is a guide](https://github.com/RichardLitt/knowledge/blob/master/github/amending-a-commit-guide.md) 28 | on the different ways you can update your PR so that we can merge it. 29 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2024 OddBird LLC 2 | 3 | Redistribution and use in source and binary forms, with or without modification, 4 | are permitted provided that the following conditions are met: 5 | 6 | 1. Redistributions of source code must retain the above copyright notice, this 7 | list of conditions and the following disclaimer. 8 | 9 | 2. Redistributions in binary form must reproduce the above copyright notice, 10 | this list of conditions and the following disclaimer in the documentation 11 | and/or other materials provided with the distribution. 12 | 13 | 3. Neither the name of the copyright holder nor the names of its contributors 14 | may be used to endorse or promote products derived from this software without 15 | specific prior written permission. 16 | 17 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 18 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 19 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 20 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 21 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 22 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 23 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 24 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 25 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 26 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 27 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Awesome CSS Anchor Positioning 2 | 3 | A curated list of awesome things related to CSS Anchor Positioning 4 | 5 | ## Documentation and How-to 6 | 7 | - [W3C CSS Anchor Positioning Editor's Draft](https://drafts.csswg.org/css-anchor-position-1/) 8 | - [MDN Anchor Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning) 9 | - [CSS-Tricks CSS Anchor Positioning Guide](https://css-tricks.com/css-anchor-positioning-guide/) 10 | 11 | ## Polyfill 12 | 13 | - [OddBird CSS Anchor Positioning Polyfill](https://github.com/oddbird/css-anchor-positioning) 14 | 15 | ## Videos 16 | 17 | - [CSS Anchor Positioning in Practice - OddBird Winging it Live](https://www.oddbird.net/2024/05/30/winging-it-08/) 18 | - [Notes on the episode from Geoff Graham](https://geoffgraham.me/css-anchor-positioning-in-practice-winging-it-live/) 19 | - [Anchor Positioning, Tab Atkins-Bittner at CSS Day 2024](https://www.youtube.com/watch?v=p18LhnYNkDQ) 20 | - [CSS Popover + Anchor Positioning is Magical - Kevin Powell](https://www.youtube.com/watch?v=DNXEORSk4GU) 21 | 22 | ## Articles 23 | 24 | - [Future CSS: Anchor Positioning - Roman Komarov](https://kizu.dev/anchor-positioning-experiments/) 25 | - [Anchor Positioning Quirks- CSS-Tricks](https://css-tricks.com/anchor-positioning-quirks/) 26 | 27 | ## Demos 28 | 29 | - [Anchor Positioning CodePen demos, James Stuckey Weber](https://codepen.io/collection/GoLbGe) 30 | - [Hover cards](https://codepen.io/jh3y/pen/MWLyGxo) 31 | - [Anchoreum - A game for learning CSS anchor positioning](https://anchoreum.com/) 32 | 33 | ## Baseline Status Component 34 | 35 | Embed the 36 | [Baseline Status Component](https://github.com/web-platform-dx/baseline-status) 37 | for Anchor Positioning on your blog. 38 | 39 | ```js 40 | 41 | 42 | ``` 43 | 44 | ## Support OddBird's Anchor Positioning Work 45 | 46 | At [OddBird](oddbird.dev), we love contributing to the languages & tools 47 | developers rely on. We're currently working on polyfills for new Popover & 48 | Anchor Positioning functionality, as well as CSS specifications for functions, 49 | mixins, and responsive typography. 50 | 51 | There are 2 ways to help us keep this work sustainable and centered on your 52 | needs as a developer! 53 | 54 | 1. [Sponsor us](https://github.com/sponsors/oddbird). We display sponsor logos 55 | and avatars on our 56 | [website](https://www.oddbird.net/polyfill/#open-source-sponsors) and offer 57 | [other fun perks](https://github.com/sponsors/oddbird). 58 | 2. [Hire us](https://www.oddbird.net/contact/) to develop the Anchor Positioning 59 | polyfill or another OSS language/tool you rely on. 60 | 61 | [Get OSS Work & Expense Updates](https://opencollective.com/oddbird-open-source) 62 | --------------------------------------------------------------------------------