augmented-ui — Cyberpunk-Inspired Web UI Made Easy

Augment your web application

augmented-ui library

augmented-ui enables you to create a cyberpunk-inspired UI for any size element, on any web page or app, and all with very little effort. augmented-ui is free to use in any project.

The augmented-ui source code is available on Github

Getting Started With augmented-ui

NPM: $ npm install augmented-ui

Once you have installed the augmented-ui library, include the /node_modules/augmented-ui/augmented.css file once before any existing stylesheets.

CDN: Include it on your page before other stylesheets for small projects.
<link rel="stylesheet" type="text/css" href="https://unpkg.com/augmented-ui/augmented.css">

Voila! That’s all you need to do. augmented-ui is a pure CSS library — there’s no functionality included, just the pure styling included in the box.

augmented-ui Is All CSS

According to their website, augmented-ui includes the following:

• Futuristic, cyberpunk-inspired UI shaping for any element

• Add the “augmented-ui” attribute to equip the augs and a few CSS settings for each one to make it feel just right

augs definition

Examples

To use augmented-ui, let’s create a div element. Notice the augmented-ui property attached to the element. These are meant to define the styling for the element.

<div class=”demo” augmented-ui=”tl-clip br-clip exe”></div>

Let’s give the div height and add some padding.