diff options
Diffstat (limited to 'pydis_site/static/css')
| -rw-r--r-- | pydis_site/static/css/README.md | 28 |
1 files changed, 28 insertions, 0 deletions
diff --git a/pydis_site/static/css/README.md b/pydis_site/static/css/README.md new file mode 100644 index 00000000..24b81435 --- /dev/null +++ b/pydis_site/static/css/README.md @@ -0,0 +1,28 @@ +# Static CSS files + +When styling components, oftentimes you can make good use of Bulma classes +rather than hardcoding CSS rules: + +- [Bulma color helpers](https://bulma.io/documentation/helpers/color-helpers/): + Classes that can be added to pretty much all Bulma components to give them a + text or background color which are defined in [`BULMA_SETTINGS`](../settings.py). +- [Bulma typography helpers](https://bulma.io/documentation/helpers/typography-helpers/): + Classes you can add to divs and text elements to adjust the text properties + and alignment. +- [Bulma visibility helpers](https://bulma.io/documentation/helpers/visibility-helpers/): + Rather than hardcoding screen width cutoffs just to adjust visibility, use + these classes instead as they are more descriptive and provide more + flexibility. + +To adjust Bulma variables (including color, sizes, margins) for a Bulma class +everywhere, adjust the variables in [`BULMA_SETTINGS`](../../settings.py) where +applicable. The [Bulma +Variables](https://bulma.io/documentation/customize/variables/) page describes +the list of all variables and their default values. + +That said, however, sometimes Bulma does not provide a good generalized +solution for a specific use case or for a specific element. In that case, use +CSS selectors to ensure that other elements that should not be styled are not +affected by the rule, and when working with colors, ensure both light and dark +modes are supported. Use `[data-theme="light"]` and `[data-theme="dark"]` to +style elements for specific themes. |