1.7.2 • Published 9 months ago
aether-css-framework v1.7.2
Aether CSS framework
Simple, Interactive, Fun, Beautiful CSS system
Demo: https://tomsoderlund.github.io/aether-css/
Design goals
- A good starting point for any web/mobile/PWA project.
- Plug-and-play. Just drop the CSS file into your HTML page. Avoid weird classes* as much as possible, just use element names.
- Easy to customize (“themeable”). Examples:
- Elements use opacity so you can customize the background color (click “Change background” in the demo page).
- Change the color of button, and hover states are automatically updated (they use
opacity
/filter
).
- Use the Three Zone Navigation System.
- Clear interaction states for buttons etc.
- Lightweight (somewhat).
- Compatible (somewhat).
*Exceptions: .fieldset
(because of fieldset
flexbox bug), .tag
(tags/tokens), .flex
(flexbox container for columns etc).
Changing color theme just by changing background-color
of body
:
Todo
- Progress button
- Tags - revise
- Code block and Block quote
- Toggle switch
- Range Slider 2D
- Hamburger menu
Install
yarn add aether-css-framework
Import in JavaScript
import 'aether-css-framework/dist/aether.min.css'
And use the “Inter” font:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
Update NPM
yarn publish
(Will run yarn prepare
automatically, which builds the /dist
folder)
1.7.2
9 months ago
1.7.1
2 years ago
1.7.0
3 years ago
1.6.19
3 years ago
1.6.18
3 years ago
1.6.17
4 years ago
1.6.16
4 years ago
1.6.15
4 years ago
1.6.14
4 years ago
1.6.11
4 years ago
1.6.13
4 years ago
1.6.10
5 years ago
1.6.9
5 years ago
1.6.8
5 years ago
1.6.7
5 years ago
1.6.6
5 years ago
1.6.5
5 years ago
1.6.4
5 years ago
1.6.3
5 years ago
1.6.2
5 years ago
1.6.1
5 years ago
1.3.1
5 years ago
1.3.0
5 years ago
1.2.0
5 years ago
1.1.1
5 years ago
1.1.0
5 years ago
1.0.3
5 years ago