athena edited this page 5 months ago

Frequently Asked Questions

Q: What does Jupiter give me that other design systems don't?

Versatility and working components out of the box. TailwindCSS, for example, is great for stying in general, but it requires styling everything with many classes (which, of course, can be reduced via their @apply attribute). Bootstrap is great for the same reason, but slightly more user friendly.

Jupiter handles this by keeping your HTML reductive and uncomplicated. A single class in Jupiter is worth at least 3-4 in Tailwind or Bootstrap. This easy, maintainable approach is exactly the hassle-free attribute you need in a UI kit.

Of course, Jupiter is also meant to be modified. The styles out of the box are nice for most uses, but many project have very specific designs they need to adhere to. Jupiter makes this painless. It uses GruntJS and SCSS to keep the source code small and easy to understand. A single command will watch the entire directory, automatically compiling your changes into production-ready source files.

It is, quite literally, easier done than said.

Q: Where can I use Jupiter?

The styles of Jupiter are available anywhere CSS is. This means React projects, Wordpress, Glitch, etc..

The JavaScript of Jupiter is slightly less versatile. For React projects, you'll want to (primarily) implement the code for the components yourself. It is, quite literally, in most cases, the modification of a single attribute (usually aria-expanded). Therefore, the effort you'll expend getting Jupiter components working on React projects is negligible in comparison to the effort you'd expend manually styling your entire application.

That is all not mentioning the already existing JupiterUI-React library. Although, this is slightly difficult to maintain with my busy schedule, so I suggest a more native approach.

Q: How's the documentation?

The Wiki provides a moderately thorough introduction to Jupiter basics. It provides a much more high level, logical overview of the code, so you can understand it instead of memorize it.

Moreover, Jupiter isn't written in C or Java or Python; it's written with very basic web code. A simple 30-minute introduction to CSS can get you a long way in Jupiter.

Q: Is it lightweight?

Quite so. Jupiter is on a starvation diet of 500 KiB or less. The CSS file tends to hover—and has for quite some time—around 350 KiB. The values are as-they-are. If you Gzip them first, you'll have no concerns for, dare I say, most of your endeavours.

Q: How do I use warm/cool grays instead of normal grays?

Simply modify the $ui-light and $ui-dark variables to use --cool/warm-gray-[weight] instead of --gray-[weight]

Q: How do I set my accent color?

There are two things you need to do to setup accent colors properly. First, change the --accent variables in the src/css/core/_css_variables.scss file. After that, if you have config.dynamic_accents set to true, change the config.dynamic_accents_default value to the default color of your choosing. If you are using a cusom accent color, you should disable dynamic accents.

Q: How do I get rid of unused styles?

The preferred method is using PurgeCSS. However, this sometimes causes issues. Since many Jupiter components depend on classes not already in the document, PurgeCSS will remove some styles that will actually be used. If you want to strip the file, make sure to do extensive testing to ensure things work as expected.

If you don't want to go through that hassle, just set up Gzip. Jupiter won't exceed 500 KB by default, so you'll barely need to worry about the size. Many images exceed that even in compressed format.

As explained in the README, Jupiter tends to be ~350 KiB.