Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Collection: CSS features to use and apply #1868

Open
4 tasks
rixx opened this issue Oct 27, 2024 · 0 comments
Open
4 tasks

Collection: CSS features to use and apply #1868

rixx opened this issue Oct 27, 2024 · 0 comments
Assignees
Labels

Comments

@rixx
Copy link
Member

rixx commented Oct 27, 2024

This is a collection issue for newer / generally good CSS features to apply to pretalx whenever I find the time:

  • Use text-wrap: balance on long-form text; use or text-wrap: pretty on headlines/alerts etc to avoid orphans, which are the most awkward in text that is usually a single line long
  • Instead of awkwardly adding margin in HTML or excluding via :last-child, add a CSS class for spaced children (children-mr-1, for example), apply the margin with margin-block-end: , and then use margin-trim: block-end on the parent to just trim off the last margin. Great for button rows.
  • Generally, try to use margin-inline-start/end and margin-block-start/end instead of margin-left/right/top/bottom where sensible – especially the inline replacements are great for rtl languages.
  • Use CSS layers, especially to unfuck forms css – end up with something like @layer reset, default, themes, patterns, layouts, components, utilities;. Put event css into a layer, too!
@rixx rixx added the type: ux label Dec 2, 2024
@rixx rixx self-assigned this Dec 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant