1.7.1 • Published 1 year ago
aether-css-framework v1.7.1
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.1
1 year ago
1.7.0
1 year ago
1.6.19
2 years ago
1.6.18
2 years ago
1.6.17
3 years ago
1.6.16
3 years ago
1.6.15
3 years ago
1.6.14
3 years ago
1.6.11
3 years ago
1.6.13
3 years ago
1.6.10
3 years ago
1.6.9
3 years ago
1.6.8
3 years ago
1.6.7
3 years ago
1.6.6
3 years ago
1.6.5
3 years ago
1.6.4
3 years ago
1.6.3
3 years ago
1.6.2
3 years ago
1.6.1
3 years ago
1.3.1
3 years ago
1.3.0
3 years ago
1.2.0
3 years ago
1.1.1
3 years ago
1.1.0
3 years ago
1.0.3
3 years ago