blob: 24b81435c67efd206b275068cf5dac1f6787505d (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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.
|
