CSS Framework

CSS Framework

Athena took a similar approach to Vuetify but only built more utility classes than components.

That means that we can do really simple HTML based edits for colors, padding, etc.

• CSS Framework

  • Color Options

  • Color Text

  • Darken / Lighten Colors

  • Font Style

  • Font Weight

  • Margin

  • Padding

  • Rounded Edges

  • Elevation

• Split & Stack Methodology

  • Splitting

  • Stacking

  • Combining the Two

Color Options

Color Option(s)

• red

• pink

• purple

• deep-purple

• indigo

• blue

• light-blue

• cyan

• teal

• green

• light-green

• lime

• yellow

• amber

• orange

• deep-orange

• brown

• blue-grey

https://materialui.co/colors/

See src-webviews/src/css/color.css for more option(s)

Color Text

The syntax is color--text

<span class="green--text">
    This is Green
</span>

See src-webviews/src/css/color.css for more option(s)

Darken / Lighten Colors

We can adjust the color of the green by using darken and lighten classes. The values are 1 - 5.

<span class="green--text text--darken-4">
    Darkest Green
</span>
<span class="green--text text--lighten-4">
    Lightest Green
</span>

See src-webviews/src/css/color.css for more option(s)

Font Style

Fonts are mostly just these for classes. However, there is way more customization similar to how Vuetify does typography.

• display-4

• display-3

• display-2

• display-1

• headline

• title

• subtitle-2

• subtitle-1

• body-2

• body-1

• caption

• overline

See src-webviews/src/css/font.css for more option(s)

<span class="green--text text--darken-4 overline">
    This is Overline Text
</span>

Font Weight

Font Weight is meant to be as simple as possible. You get only three options.

• bold

• bolder

• boldest

<span class="green--text text--darken-4 overline boldest">
    This is the Boldest Overline Text
</span>

Margin

Margin is something that is done through css entirely and values span from 1 - 16. They are incredibly useful for quickly spacing elements and ensuring everything is spaced evenly.

Syntax goes as follows.

a - All

l - Left

r - Right

t - Top

b - Bottom

Then we can combine a number with a value.

<span class="mt-6">
    This has space above it.
</span>
<span class="mb-6">
    This has space below it.
</span>
<span class="ma-6">
    This has space around it.
</span>

Padding

Padding is something that is done through css entirely and values span from 1 - 16. They are incredibly useful for quickly spacing elements and ensuring everything is spaced evenly.

Syntax goes as follows.

a - All

l - Left

r - Right

t - Top

b - Bottom

Then we can combine a number with a value.

<span class="pt-6">
    This has space above it.
</span>
<span class="pb-6">
    This has space below it.
</span>
<span class="pa-6">
    This has space around it.
</span>

Rounded Edges

Rounding edges adds simple border-radius to elements with a background.

• rounded-sm

• rounded

• rounded-lg

• rounded-xl

<div class="rounded-lg pa-6" style="background: red">
    This has rounded edges
</div>

Elevation

Elevation adds shadow below the element. Spans from 1 - 24.

<div class="rounded-lg pa-6 elevation-24" style="background: red">
    This has a shadow.
</div>

Split & Stack Methodology

This is an interesting concept and I don't know if it has a name. It's something that I use when I write all my design(s) for Athena. Hence the name Split & Stack Method. An element either needs to be split or the elements need to be stacked.

Here's a preview of a broken down page with each split / stack shown

Red is split, Blue is Stack

Splitting

Below is an example on how to split three items equally in a given space.

<div class="split split-full space-between">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
</div>

Stacking

These elements will stack together as a 'list' of sorts. They will be vertically stacked.

<div class="stack">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
</div>

Combining the Two

Below is a full example of how I would use split and stack.

<div class="stack" style="min-width: 200px">
    <div class="split split-full space-between">
        <span>Hello</span>
        <span>World</span>
    </div>
    <div class="split split-full space-between">
        <span>Welcome</span>
        <span>To</span>
    </div>
    <div class="split split-full space-between">
        <span>Vue</span>
        <span>3</span>
    </div>
</div>