3. Layout

We'll first start by going through the two primary classes for most layouts you'll be making. They are .section and .container.

.section applies a width: 100%; rule and a padding: 11% 0; rule. Padding is used to implement white-space between other sections, making the content within them easier to consume.

.container applies a few more rules. Mainly, its width is constrained to the --view-default CSS variable, which defaults to 80%. You can customize the max-width with the following modifiers: .sm, .md, .lg, .xl.

---

This is a good time to discuss Jupiter's modifier syntax. Most components and classes use the above modifiers for size-related customizations. Some classes, like fs-[size] for customizing the font-size, use classes like 3xl instead of xxxl. Keep this in mind when you want to modify the size of certain components.

---

Mobilization

Most of Jupiter's mobilization classes are related to layout. They allow you to customize the styling of your web page based on screen size. Mobilization in Jupiter is trivial.

There are three breakpoints Jupiter uses. Each one has a name attached and that name is prefixed to the mobilization class. The breakpoints are:

Tablet: 991px

Landscape: 767px

Portrait: 478px

Let's go through an example.

Consider this element:

<div class="flex">
    <p>This is some text in a div block</p>
</div>

On desktop, the text will be aligned to the left, since the .flex class' default layout is to the top-left. Now, if you want to align the text to the center on landscape, for example, you'd only have to append the following class: .landscape-align-c

Flex

Jupiter's Flex layout system is minimal but extremely powerful. We've never had to customize anything within it.

Base classes

First off, there are a few base classes you should be aware of so that you don't repeat yourself.

• flex: The default class for all flex layouts. This makes items align to the top-left by default. It also adds flex-direction: column; by default. Of course, this behavior can be customized with the classes we'll mention later.
• flex-c: This aligns items in the center, both horizontally and vertically, and uses the column layout.
• flex-sb: This aligns items in a space-between format, in a row layout.
• flex-cr: Same as flex-c, but in a row layout.

Modifier classes

The names are rather self-explanatory. The following legend should help with any ambiguous names, however.

• ...-r means -reverse

• align- means align-items

• justify- means justify-content

• flex-[int] means flex: number;

• flex-row

• flex-row-r

• flex-column

• flex-column-r

• flex-wrap

• flex-nowrap

• align-s

• align-c

• align-e

• justify-s

• justify-c

• justify-e

• justify-sb

• justify-sa

• justify-se

• flex-0

• flex-1

• flex-2

• flex-3

Grid

The base class, required for all grid-related layouts is .grid.

The recommended class for grid children is .grid-block. This class has a flex layout by default, which you can override with the classes above.

All grid classes, like all flex classes, have mobilization options.

There are various specialized grid classes which denote specific layouts. Those are described below:

• Grid rows/columns:
  • Syntax: .grid-[row/column]-[num rows/columns]
  • Note: They range from 1 to 12
• Grid span rows/columns:
  • Syntax: .grid-span-[row/column]-[span value]
  • Note: They range from 1 to 12
  • Extras:
    • Span all rows/columns: .grid-span-[row/col]-full
    • Span auto rows/columns: .grid-span-[row/col]-auto
• Grid gaps:
  • Syntax: .gap-[value]r
  • Note: They are in REM; every 0.5rem from 0 to 5

Display

• .d-inline
• .d-block
• .d-inline-block
• .d-inline-flex
• .d-inline-grid
• .d-none
• .d-initial
• .d-inherit

Positioning

• Classes
  • .relative
  • .static
  • .sticky
  • .absolute
  • .fixed
• Positions
  • .top-[size]
  • .right-[size]
  • .bottom-[size]
  • .left-[size]
• Sizes (in px; these will be changed to REM values soon.)
  • 0
  • 4
  • 8
  • 12
  • 16
  • 20
  • 30
  • 40
  • 50
  • 80
  • 100
  • -4
  • -8
  • -12
  • -16
  • -20
  • -30
  • -40
  • -50
  • -80
  • -100

Examples

Adding .left--40 has the following CSS value: left: -40px;

Adding .top-0 has the following CSS value: top: 0;

Sizing reference

• height (h)
• max-height (mxh)
• min-height (mnh)
• width (w)
• max-width (mxw)
• min-width (mnw)
• Percentage values are:
  • 1, 2, 3, 4, 5, 8, 10, 12, 16, 18, 20, 30, 40, 50, 60, 70, 80, 90, 100
• REM values are:
  • 0, 0.125, 0.25, 0.5, 0.75, 1, 1.5, 1.75, 2, 2.5, 2.75, 3, 3.25, 3.5, 3.75, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 25, 30, 32, 35, 38, 40, 42, 44, 50, 60, 70, 80, 90, 100, 110, 120, 130
• Extras:
  • Syntax: .[mw, h, etc.]-[property]
  • Available properties: none, screen, auto, 100p, 1, 4

Spacing reference

There are 2 sets of classes for spacing: margin and padding.

They both have the same type of classes with the same amount of spacing, but they differ in their class character: m for margin and p for padding.

In the few examples below, I am only showing margin classes, but just know that you only have to replace the "m-" with "p-" and it will be a padding class.

• Types
  • margin (m)
  • margin top and bottom (my, mv)
  • margin left and right (mx, mh)
  • margin top (mt)
  • margin bottom (mb)
  • margin left (ml)
  • margin right (mr)
• Sizes
  • Percent: 1, 2, 4, 8, 10, 12, 16, 20, 22, 24, 30
  • REM: 0, 0.125, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16, 20, 25, 30

To use a spacing class, put the spacing name (i.e. m = margin) in front followed by a dash (-) and then the type of space.

To use a percentage value, simply append a p to the end of the class. See example 2 below.

To use a REM value, simply append a r to the end of the class. See example 3 below.

Percentage example: .py-10p = padding: 10% 0;

REM example: .ml-2r = margin-left: 2rem;