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.
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>Last updated