FAQ

Q: Why are there no React components?

Every project has different requirements and paradigms. Although we've previously done this, we discovered that 90% of the users of the React package were just copying the HTML markup and modifying the internal components anyway. For this reason, it doesn't make a lot of sense for us to maintain a package that doesn't offer as much benefit.

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?

Jupiter is available anywhere CSS is. This means React projects, Wordpress, Glitch, etc..

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 endeavors.

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]. Alternatively, depending on your layout, you can add the warm-gray or cool-gray class to the body element.

Q: How do I set my accent color?

Change the --accent variables in the src/core/_css_variables.scss file. Alternatively, modify the --accent-[10-100] CSS variables on the :root element.

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.