Add docs on Bulma, colors, dark mode, and CSS for development

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.