2 3. Layout
athena edited this page 4 months ago

Layout

Setting up your document

In Jupiter, it's standard practice to wrap all the "content" in a <div> with an ID #root. This is used in the loading screen and for appending dynamic elements.

If you don't include the #root element, the loading screen won't work properly. Likewise, notifications and modals won't work either (unless you manually add those elements to your page).

If you're developing a web app with Jupiter, though, you should instead wrap everything in a div #app and then all the non-UI-Shell parts should be in a div #root. This is to ensure proper spacing between content. Use the index.html file in Jupiter as a reference for web app styling with UI Shells.


Since we're just building a regular page, we don't need #app. Go ahead and add

<div id="root">

</div>

to your document.


On the topic of setting up your document. If you plan to use the loading screen, you should add <noscript><style>#root{opacity:1!important;display:flex!important;}</style></noscript> to your <head> tag. This will make sure the loader doesn't show up for users that have JavaScript disabled.

Layout Basics

There are two primary elements for nearly all layouts in Jupiter.

They are .section and .container

.section is exactly what it sounds like. It is used to separate sections on a web page. By default, it has 11% padding on the top and bottom.

.container is a block centered inside a section. It has a max-width of 80% by default.

These elements are both shortcuts to underlying classes. For example, you could replicate the container class by using: .w-100p .mw-container .flex .px-20


Let's now add a Hero section to our document.

Let's start with the basics:

<div class="section h-screen flex-c">
    <div class="container">

    </div>
</div>

We'll come back to this at the end of this file.


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 layout

Flex is amazing. Centering in CSS is now trivial. Jupiter has many flex classes which allows you to structure your elements exactly how you want.

There are a few primary classes to start using flex. The most basic is simply .flex. To use any sort of Jupiter's flex layout, you must add this class. By default, every element in a flex class is aligned to the top-left (in column direction). You can use any of the below flex classes to modify this default layout.

  • Centered Items (column) .flex-c
  • .flex-row
  • Reversed row: .flex-row-r
  • .flex-column
  • Reversed column: .flex-column-r
  • Justify
    • Start .justify-s
    • Center .justify-c
    • End .justify-e
    • Space between .justify-sb
    • Space around .justify-sa
    • Space evenly .justify-se
  • Align
    • Start .align-s
    • Center .align-c
    • End .align-e

As a reminder to mobilization, all of these flex classes have mobilized classes.

Grid layout

Jupiter has decent support for CSS Grid and the mobilization therein.

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 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]
    • 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)
    • 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, 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.5, 2, 2.5, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16,20

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;


Let's now start adding some content to the page.

On the .container element, add flex-c to the class list.

From there, we'll add a <div> inside the .container:

<div class="mw-30r flex-c text-c">

</div>

.text-c, as described in the 5-typography.md file, simply aligns the text to the center.

We can now add some text inside the created <div>:

<h1 class="fw-700">A better way to develop</h1>
<p class="fs-2xl">Jupiter is the better way to develop websites and web apps.</p>

To clarify:

  • .fw = font-weight
  • .fs = font-size

Next: 4. Dynamics