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
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.
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)
Font Weight
Font Weight is meant to be as simple as possible. You get only three options.
bold
bolder
boldest
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.
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.
Rounded Edges
Rounding edges adds simple border-radius to elements with a background.
rounded-sm
rounded
rounded-lg
rounded-xl
Elevation
Elevation adds shadow below the element. Spans from 1 - 24.
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.
Stacking
These elements will stack together as a 'list' of sorts. They will be vertically stacked.
Combining the Two
Below is a full example of how I would use split and stack.
Last updated