Add unset and none classes

Open
#679 0 comments 1 reaction 1 assignee View on GitHub

@dancormier is already working on this.

Since Jun 4, 2021.

Assessment

This issue has not been assessed yet.

Description

enhancement

We should add some handy [x]-unset and [x]-none classes.

Context
@aaronshekey says (June 1, 2021):

I think an interesting chore would be creating a none and unset for just about every CSS property. We were limited by IE11 and Edge 18 there. No more!
For example, ff-unset or z-unset

Classes that already exist*

[x]-none
  • background (.bg-none)
  • background-image (.bg-image-none)
  • box-shadow (.bs-none)
  • clear (.clear-none)
  • display (.d-none)
  • float (.float-none)
  • flex (.fl-none)
  • hyphens (.hyphens-none)
  • list-style (.list-ls-none)
  • outline (.outline-none)
  • pointer-events (.pe-none)
  • text-decoration (.td-none)
  • text-transform (.tt-none)
  • user-drag (.ud-none)
  • user-select (.us-none)
[x]-unset
  • box-sizing (.box-unset)
  • display (.d-unset)
  • font-style (.fs-unset)
  • line-height (.lh-unset)
  • list-style (.list-ls-unset)
  • overflow-wrap (.ow-unset)
  • position (.ps-unset)
  • text-align (.ta-unset)
  • text-transform (.tt-unset)
  • transition-property (.t-unset)
  • transition-delay (.t-delay-unset)
  • vertical-align (.va-unset)
  • word-break (.wb-unset)

*I think I got them all here

Potential issues

From MDN - unset

unset can be applied to any CSS property...

We could literally do this for every CSS property. I'm assuming we don't want to (at least, until we're hardcore purging our unused CSS).

TODO

  • Determine a reasonable subset of [x]-unset classes to add
    • ...and add them
  • Determine a reasonable subset of [x]-none classes to add
    • ...and add them
  • update docs
Dominant language
TypeScript
Stars
672
Forks
107
Avg merge
2d 12h
Merged PRs (30d)
26

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from StackExchange/Stacks

All issues in StackExchange/Stacks

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.