augmented-ui — Cyberpunk-Inspired Web UI Made Easy

Augment your web application

Indrek Lasn
Sep 17, 2019 · 5 min read
Image for post
Image for post
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.

Image for post
Image for post
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

Image for post
Image for post
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.

Notice the CSS variables we’re using here. The variables are provided by the augmented-ui library and are the core way of styling elements.

We should see the following appear on the screen:

Image for post
Image for post

Pretty neat. Let’s add a gradient border. Add the following styles to the element.

--aug-border-bg: linear-gradient(red, transparent), linear-gradient(to right, blue, transparent), black;

Here’s what we should see:

Image for post
Image for post

As you can see, it’s simple to build augmented style components with the library. I’m a big fan of cyberpunk, so I’m naturally excited to see what you can build with the library.

Basics of augmented-ui

  • augmented-ui uses an attribute selector for all defaults and styling, which has the same weight as a class selector. See CSS Selector Specificity on MDN for more information.
    tl;dr: div { --aug-t: 50px; } uses a type selector and will not override the default — but .divclass { --aug-t: 50px; }would.
  • augs are the individual features/shapes assigned to a specific corner or edge. e.g., br-clip (bottom right clip)
  • Short designations for each position will be found on every aug and every aug property. There are eight positions:
  1. tl = top left corner
  2. t = top edge
  3. tr = top right corner
  4. r = right edge
  5. br = bottom right corner
  6. b = bottom edge
  7. bl = bottom left corner
  8. l = left edge
Image for post
Image for post
Augs available in augmented-ui
  • Augs are equipped to an element by putting them in the value of the augmented-ui attribute (<div augmented-ui=”br-clip exe”></div>)
  • An executable option is required in the value of the augmented-ui attribute and is what creates the actual clip-path polygons (for basics, only exe will be used)

The exe executable option does:

  1. Clipping of the element itself
  2. Creation and clipping of the border on the ::after pseudo element
  3. Creation and clipping of the inset on the ::before pseudo element

Without the exe property , augmented-ui may appear to do nothing.

Image for post
Image for post
Adjusting the size of equipped augs

Namespaced CSS varibables

According to their website:

• All custom properties begin with — aug-

• Selectors only use the augmented-ui attribute

Automatic fallbacks

According to their website, augmented-ui boasts the following features:

• Full support with v1.1.0+ has a global user reach of ~91%

• Great automatic fallback for older browsers (+ ~3.5% global reach)

Free to use

augmented-ui is under the BSD 2-Clause License and is free to use in any project.

Browser support

According to statistics on their website:

• As of Sept. 9, with v1.1.0, ~91% of global users experience the fully supported version according to data from caniuse.com

• Automatic -webkit-clip-path fallback brings full support as far back as Chrome 49–54, Safari 9.1+, iOS Safari 11+, Opera 36–41, Opera mobile 46+, UC Browser 12+, and Samsung Internet 5+

Image for post
Image for post
https://caniuse.com/#search=clip-path

Auto-creates elliptical border-radius

According to their website:

• On browsers without a clip-path option, and on older iOS versions with only partial support of custom properties, augmented-ui automatically constructs an elliptical border-radius for the element.

• The effective width and height of each corner aug is used to determine the border shape — producing a softer, almost melted, version of your augmented element

Here’s a full list of examples — go ahead and explore them. The examples give you a rough idea of how to apply classes for each style.

If you’re new to JavaScript and want to learn the language, I recommend starting with reading books combined with building things. Start with the “A Smarter Way to Learn JavaScript” book and here’s a list of fun apps to build.

Better Programming

Advice for programmers.

Indrek Lasn

Written by

Node + React web engineer, High Quality Tech Writers For-hire: https://vowelmagic.com/, connect with me on Twitter @ https://twitter.com/lasnindrek

Better Programming

Advice for programmers.

Indrek Lasn

Written by

Node + React web engineer, High Quality Tech Writers For-hire: https://vowelmagic.com/, connect with me on Twitter @ https://twitter.com/lasnindrek

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store