2 7. Styles
athena edited this page 4 months ago

Misc. Styles

Jupiter has many other classes which are all related to element styling. They are listed below.

Backdrop blur

The backdrop-blur-... classes applies a soft blur to the background of an element. Under the hood, this uses the backdrop-filter CSS property. Note, this has limited browser support. It will work on Safari and Chrome-based browsers, but others, like FireFox, either don't support it at all or require extra configuration.

If the user's browser doesn't support backdrop-filter, it will fallback to a barely-transparent background color.

Below this are the available blur classes. The number at the end is the intensity of the blur in pixels.

  • .backdrop-blur-5
  • .backdrop-blur-10
  • .backdrop-blur-15
  • .backdrop-blur-20
  • .backdrop-blur-25
  • .backdrop-blur-30

Shadows

Boring shadows

As of right now, there are 4 boring shadows: sm, md, lg, hover.

The class appears as follows: .shadow-[sm, md, lg, hover]

Awesome shadows

In version 2.1, more shadow options were added.

Let's break that shadow class down:

.shadow-gray-[color-weight]-[shadow-size]

The color has been limited to the default gray- colors. Adding the entire color system added a surprising amount of bloat to the file, and was not pursued. If you wish to use custom colored shadows, simply add your own CSS file after Jupiter and use the built-in CSS variables.

Note: The shadow sizes are limited to sm, md, lg

Borders

Note: all of the border size and radius classes are mobilized.

  • Border radius
    • .radius-0
    • .radius-4
    • .radius-8
    • .radius-12
    • .radius-16
    • .radius-20
    • .radius-90
    • .radius-50p
  • Border width
    • .border-w-1
    • .border-w-2
    • .border-w-3
    • .border-w-4
    • .border-w-5
  • Border bottom
    • .border-bottom-bg
    • .border-bottom-bg-1
    • .border-bottom-bg-2
  • Border color
    • Colored after CSS variables
      • .border-bg
      • .border-bg-1
      • .border-bg-2
      • .border-bg-3
    • Default colors
      • .border-color-blue
      • .border-color-indigo
      • .border-color-orange
      • .border-color-pink
      • .border-color-purple
      • .border-color-red
      • .border-color-teal
      • .border-color-yellow
  • Border top color (for .j-loader)
    • .border-top-color-[color]

This is the end of the normal user Wiki. If you plan to modify Jupiter (or just want a better understanding in general, proceed:)

Next: Developing: 1. Getting Started