torch2424 / aesthetic-css

A vaporwave CSS framework 🌴🐬

A E S T H E T I C C S S

A vaporwave css framework

Demo / Documentation

Table Of Contents

• Features
• Example Elements
• Installation
  • npm
  • html link
• Importing Modules
• Suggested Fonts
  • Google Fonts
• Contributing
  • Installation
  • Npm Scripts & CLI Commands
• Reference Material
• Authors
• License

Features

• Includes Elements, Colors, and Effects ✨

• Framework fits in ~40KB (as of 9/17/18) 👌

• Written with SASS, only import what you need 😍

• Compatible with AMPHTML ⚡

Example Elements

Installation

npm

npm install --save aesthetic-css

html link

Feel free to download the latest aesthetic.css from the master branch, or one of our releases.

<link rel="stylesheet" type="text/css" href="aesthetic.css">

Importing Modules

Similar to Bulma's Modularity, you can import specific sass files from the src directory.

For example:

@import "../node_modules/aesthetic-css/src/variables";

Suggested Fonts

Google Fonts

• Cinzel
• PlayFair
• Monoton
• VT323
• Press Start 2P
• Limelight
• Share Tech Mono
• Six Caps
• Cutive Mono
• Spectral SC
• Matte SC
• Im Fell French Cannon SC

Contributing

Feel free to fork and submit PRs! Any help is much appreciated, and would be a ton of fun! I would appreciate opening an issue, or replying to an already open issue to express intent of trying to solve the issue, and we discuss.

Installation

Just your standard node app. Install Node with nvm, git clone the project, and npm install, and you should be good to go!

Npm Scripts & CLI Commands

# Watch for changes and serve the project. You want to use this for development/contributing.
npm run dev

# Build the demo, and the Sass to css
npm run build

# Runs npm run build, but includes the livereload script. Used in npm run dev
npm run build:dev

# Only builds the Sass to css
npm run style:build

# Run the http server for development
npm run serve

# Run the livereload server to livereload the http server
npm run livereload

# Watch the files for changes, and build
npm run watch

Reference Material

• felixrieseberg/windows95
• httpsters
• r/VaporwaveAesthetics/
• HTML Nostalgia: 10 Things From the 90s
• 5 ESSENTIAL VAPORWAVE FONTS
• windows_98.css
• seapunk vaporwave colourlovers
• Text Glitch Effect
• Windows 95 In your Browser

Authors

Aaron Turner and Daniel Gomez

License

Licensed under Apache 2.0. 🐦

aesthetic-css's Issues

Make modals and things' content fill remaining height

https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space

More resources

https://github.com/ShizukuIchi/winXP

Reference Material / Put these links in wiki or README

Build System:

https://github.com/oxalorg/sakura

Visuals:

http://httpsters.me/ @davidnuon

https://www.reddit.com/r/VaporwaveAesthetics/

https://codepen.io/CSWApps/pen/YyerKb

https://codepen.io/geeksmarter/pen/akGJbm

https://codepen.io/era_eric_og/pen/apbVpN

https://codepen.io/Aests/pen/bwzBRk

Add a DOS theme

Similar to: http://kristopolous.github.io/BOOTSTRA.386/javascript.html#typeahead

Add to some awesome lists

https://github.com/troxler/awesome-css-frameworks

Clean Up & Deploy

This was made to create a project called Vaporboy, that will be a frontend for WasmBoy.

We need to make this npm installable, place on npm, make the Demo AMP Valid, and write some docs. Also would be nice to do #9 .

Some general code cleanup would be cool too 👍

Mention on README more features

Responsive

Works on all major browsers

Accessible

Add examples of Dropdown and Loader to the demo

There are Loader and Dropdown under Elements in the demo website but no piece of code of them.

BEM the framework

Was kind of holding off on BEM to help teach Daniel and due to bulma not being to BEM-y, but after looking at their file component, seems like BEM'ing is an okay choice.

I personally love BEM, and so does @MasterKale

More 95 inspiration

https://github.com/felixrieseberg/windows95

Minify CSS

Someone brought up a good point that I am not minifying CSS< this would be very helpful in minimizing the demo page size for AMP haha!

Mention on Docs which elements needs JS

For example the drop-down require an is-active class