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

Abbreviated class names are not included in the documentation #102

Open
trichoplax opened this issue Jan 27, 2025 · 2 comments
Open

Abbreviated class names are not included in the documentation #102

trichoplax opened this issue Jan 27, 2025 · 2 comments

Comments

@trichoplax
Copy link

trichoplax commented Jan 27, 2025

Describe the bug
The documentation only mentions the full class names. This means that reading the documentation gives no indication of the meaning of the abbreviated class names. Currently the abbreviations can only be found by searching the code.

For example:
The documentation mentions the class has-padding-vertical-2 in Box styles, but does not mention that this can be abbreviated to h-p-v-2.

Could the abbreviated class names be included somewhere in the documentation? Since the meanings are not obvious, perhaps it would be helpful to include them in 2 places:

  1. In context in the current documentation, alongside their corresponding unabbreviated class names.
  2. In a separate "glossary" that lists all the abbreviated class names in alphabetical order, each showing its corresponding unabbreviated class name.
@cellio
Copy link
Member

cellio commented Jan 27, 2025

Oh! That explains why I've been unable to find the doc on some of those names...

@trichoplax
Copy link
Author

Took me quite a while to realise that I wasn't going to find what I was looking for in the documentation...

Until this is fixed, I'm finding the browser developer tools useful as a substitute:
Select the relevant part of the HTML and all the relevant CSS styles are listed, along with the class names and where they can be found in the code. The unused full name is also listed alongside (since it is defined in the same place in the code) but crossed out because it isn't used. Now that I know this I can look up the full name in the documentation (and also the full name usually tells me what I need to know already).

Example screenshot of the Firefox developer tools (Chromium based developer tools are probably fairly similar looking):

Screenshot of the CSS section of the developer tools showing two class names with their corresponding abbreviations, filenames, and line numbers

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants