A simple CSS demonstration which uses @keyframes and animation to create a page whose background color gently shifts across the spectrum.
You can see it in action here.
To hack on omgcolors yourself, fork the repository and then download the source using git. You'll need npm to install its dependencies.
$ git clone git@github.com:garbados/omgcolors.git
$ cd omgcolors
$ npm install
$ npm start
...
┌───────────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ - Local: http://localhost:5000 │
│ - On Your Network: http://127.0.1.1:5000 │
│ │
│ Copied local address to clipboard! │
│ │
└───────────────────────────────────────────────┘The project stores its uncompiled assets under the src/ directory, which looks like this:
css/: Stylesheets. No special language, just yer ol' fren CSS.mustache/: Mustache templates, which by default populate their variables usingpackage.json.static/: Files like favicons which are not modified in any way before being moved to the build directory.
When you run a command that builds the website, like npm start or npm run build, the contents of src/ are made ready for the web and then placed into the public/ directory. So, src/mustache/index.mustache becomes public/index.html.
To build the website and then re-build it whenever anything in src/ changes, use npm run dev:
$ npm run dev
...
┌───────────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ - Local: http://localhost:5000 │
│ - On Your Network: http://127.0.1.1:5000 │
│ │
│ Copied local address to clipboard! │
│ │
└───────────────────────────────────────────────┘