How can I find the correct css classes to use for more custom styling?

[danny-does-stuff]

Environment

• Package version(s): 3
• Browser and OS versions: N/A

Question

While working with Blueprint, I often find that I want some styles that I believe are provided by blueprint but the documentation does not describe how to get these styles. What I'm wondering about is how can I know what blueprint css classes are available to use and what they do? Currently, there is almost no documentation about the Classes object.

My current solution to this problem is to look through the docs until I find an example that looks close to what I want, open the source for the example on GitHub, and find the class that is being used there. I am looking for a better way to handle that. I'm wondering if it is not intended for the blueprint user to need to use these blueprint classes directly? If that's the case I think it would be great if that were stated in the docs.

An example of what I'm describing for further context:

I had these two buttons

inside of the content of a Popover2, and I wanted to give them some spacing in the correct blueprint way. I ended up browsing through the docs and finally found the Dialog component with something that looked like what I wanted, click "View Source on GitHub", and found that they were using the class "DIALOG_FOOTER_ACTIONS", so I used that. It looks fine now, but I was wondering if I was going against Blueprint by using a dialog class inside of a popover.

Any insights on this issue will be appreciated! Thanks for making this nice library ✌️

[adidahiya]

As you suggested, you probably don't want to use the "dialog footer actions" class inside a popover, as it would likely be semantically confusing for the next person who reads the code.

In this case, it sounds like you're looking for a utility class to apply some spacing between buttons. This doesn't really exist in Blueprint. The Classes object is useful if you're trying to add custom styling on top of Blueprint styles, or to select certain elements in the DOM for use cases like testing.

[danny-does-stuff]

Thanks for your time!

So it sounds like what you're saying is that blueprint does not really prescribe this type of styling (spacing, layout, etc), so these things are better off left to custom CSS. That makes sense to me. Do you have any suggestions about when to look to blueprint for these things and when to make something custom? For example with the button spacing, blueprint clearly has an opinion when it comes to dialogs, as seen by the fact that the dialog-footer-actions class exists. But anywhere else that is not a dialog, blueprint does not have an opinion. Maybe I'm just wanting blueprint to tell me what to do more often so I can have a more consistent design, but perhaps that's not really its role..

Does Blueprint provide some constants even, like suggested spacing sizes?

[adidahiya]

We use a 10px grid, and we encourage you to use the $pt-grid-size variable for spacing: https://blueprintjs.com/docs/#core/variables.grid-system

[danny-does-stuff]

Ok thank you so much! That makes more sense. I looked into it and it doesn't look like those variables are available as css variables which is too bad, I don't think I will be needing to convert these to css variables in order to use them without adding a css preprocessor to my setup. Thanks for your help!