#

augmented-ui docs


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

Resources:
Home | Docs | Informal Tests | NPM | GitHub
#

Installing augmented-ui


Install with NPM:
$ npm install augmented-ui
Then include the /node_modules/augmented-ui/augmented.css file once, before any stylesheets that use it.

OR

Use your favorite NPM CDN and include it on your page before other stylesheets for small projects. Like so:
<link rel="stylesheet" type="text/css" href="https://unpkg.com/augmented-ui/augmented.css">

#

Basics of augmented-ui


Note: to help facilitate learning, all examples on this page start with the same base "demo" figure so the only changes between examples are to help demonstrate the feature being documented.
All examples on this page are displayed with:
1) <div class="demo" augmented-ui="tl-clip br-clip exe"></div>
2) and the following default css:
As a baseline, this is what it looks like when nothing is changed further:

Additional styles or overrides added to any example are shown below the figure.
Every set of examples has an option to show the full code that produced the figures and will include this base style.
Additionally, options to show the full code in jsfiddle or codepen are provided so you can more easily learn a feature hands-on.

Border properties for augmented-ui

A border in augmented-ui is a background applied to an element that has its own clip path where the center is removed. It exists on the ::after pseudo element when the exe executable option is used. A border may be delegated to a child element with advanced executable options. The background is only applied when CSS feature detection knows the center can be clipped away to avoid obstructing visibility of content in older browsers.

#

--aug-border


Default Value: 0px
Type: <length> (Typically px and does not support %)

--aug-border specifies the width of the border on an augmented element. Independent border sizes for top/right/bottom/left are not currently supported.

--aug-border: 1px;
--aug-border: 8px;
Show Full Code
augmented-ui docs
#

--aug-border-bg


Default Value: none
Type: <background>

--aug-border-bg specifies the background that will be used for the border.

--aug-border-bg: purple;
--aug-border-bg: linear-gradient(red, transparent), linear-gradient(to right, blue, transparent), black;
Show Full Code
augmented-ui docs
#

--aug-border-fallback-color


Default Value: the value of --aug-border-bg, else transparent
Type: <color>

--aug-border-fallback-color specifies the border color that will be used in older browsers (which will use actual borders). If --aug-border-bg is not suitable as a color value for the border property, the border will not draw unless this fallback is set. The border is drawn on a pseudo element (like the full-support one is), so it will not upset layout if it is drawn or not.

--aug-border-fallback-color: purple; --aug-border-bg: linear-gradient(purple, cyan);
--aug-border-fallback-color: red; --aug-border-bg: purple;
(--aug-border-fallback-color not specified) --aug-border-bg: linear-gradient(purple, cyan);
(--aug-border-fallback-color not specified) --aug-border-bg: purple;
Show Full Code
augmented-ui docs
#

--aug-border-opacity


Default Value: 1
Type: <alpha-value>

--aug-border-opacity specifies the opacity of the border.

--aug-border-opacity: 0.5; --aug-border-bg: purple;
--aug-border-opacity: 0.125; --aug-border-bg: purple;
Show Full Code
augmented-ui docs

Inset properties for augmented-ui

An inset in augmented-ui is a background on an element that has its own clip path, inset a specified distance from the inner edge of the border or containing element. It exists on the ::before pseudo element when the exe executable option is used. An inset may be delegated to a child element with advanced executable options.

#

--aug-inset


Default Value: 0px
Type: <length> (Typically px and does not support %)

--aug-inset specifies the distance of the inset on an augmented element. Independent inset sizes for top/right/bottom/left are not currently supported.

--aug-inset: 1px;
--aug-inset: 8px;
Show Full Code
augmented-ui docs
#

--aug-inset-bg


Default Value: none
Type: <background>

--aug-inset-bg specifies the background that will be used for the inset.

--aug-inset-bg: purple;
--aug-inset-bg: linear-gradient(red, transparent), linear-gradient(to right, blue, transparent), black;
Show Full Code
augmented-ui docs
#

--aug-inset-opacity


Default Value: 1
Type: <alpha-value>

--aug-inset-opacity specifies the opacity of the inset.

--aug-inset-opacity: 0.5; --aug-inset-bg: purple;
--aug-inset-opacity: 0.125; --aug-inset-bg: purple;
Show Full Code
augmented-ui docs

Augs available in augmented-ui

augs are the individual features/shapes assigned to a specific corner or edge; Such as br-clip (bottom right clip). Technically, they are clip-path partials integrated into an app's flexible ui elements. The name is from the Cyberpunk genre where augs are pieces of technology, often large, integrated into the human body.

#

tl-clip, t-clip, tr-clip, r-clip, br-clip, b-clip, bl-clip, l-clip


Supported properties: --aug-*
where * is the corresponding corner or edge position: tl, t, tr, r, br, b, bl, or l
Type Support for --aug-*: <length> (Typically px and does not support %)

Equip augs by placing them in the value of the augmented-ui attribute along with an executable option: <div augmented-ui="tl-clip exe"></div>

augmented-ui="tl-clip br-clip exe"
augmented-ui="r-clip bl-clip exe" style="--aug-bl: 25px;"
Show Full Code
augmented-ui docs
#

tl-round, tr-round, br-round, bl-round


Supported properties: --aug-*
where * is the corresponding corner position: tl, tr, br, or bl
Type Support for --aug-*: <length> (Typically px and does not support %)

Equip augs by placing them in the value of the augmented-ui attribute along with an executable option: <div augmented-ui="tl-round exe"></div>

augmented-ui="tl-round br-round exe"
augmented-ui="bl-round exe" style="--aug-bl: 10px;"
Show Full Code
augmented-ui docs
#

tl-rect, t-rect, tr-rect, r-rect, br-rect, b-rect, bl-rect, l-rect


Supported properties: --aug-*, --aug-*-width, --aug-*-height
where * is the corresponding corner or edge position: tl, t, tr, r, br, b, bl, or l
Type Support for --aug-*: <length> (Typically px and does not support %) Type Support for --aug-*-width, --aug-*-height: <length-percentage>

Equip augs by placing them in the value of the augmented-ui attribute along with an executable option: <div augmented-ui="tl-rect exe"></div>

augmented-ui="tl-rect br-rect exe" style="--aug-tl-width: 50%;"
augmented-ui="r-rect bl-rect exe" style="--aug-bl: 25px; --aug-r-width: 10%; --aug-r-height: 25%;"
Show Full Code
augmented-ui docs
#

tl-clip-x, t-clip-x, tr-clip-x, r-clip-x, br-clip-x, b-clip-x, bl-clip-x, l-clip-x


Supported properties: --aug-*, --aug-*-width, --aug-*-height
where * is the corresponding corner or edge position: tl, t, tr, r, br, b, bl, or l
Type Support for --aug-*, --aug-*-height: <length> (Typically px and does not support %) Type Support for --aug-*-width: <length-percentage>

Similar to clip, extended rectangularly along the x axis. Equip augs by placing them in the value of the augmented-ui attribute along with an executable option: <div augmented-ui="tl-clip-x exe"></div>

augmented-ui="tl-clip-x br-clip-x exe" style="--aug-tl-width: 50%;"
augmented-ui="r-clip-x bl-clip-x exe" style="--aug-bl: 25px; --aug-r-width: 33%; --aug-r-height: 10px;"
augmented-ui="b-clip-x exe" style="--aug-b-width: 65%; --aug-b-height: 10px;"
Show Full Code
augmented-ui docs
#

tl-clip-y, t-clip-y, tr-clip-y, r-clip-y, br-clip-y, b-clip-y, bl-clip-y, l-clip-y


Supported properties: --aug-*, --aug-*-width, --aug-*-height
where * is the corresponding corner or edge position: tl, t, tr, r, br, b, bl, or l
Type Support for --aug-*, --aug-*-width: <length> (Typically px and does not support %) Type Support for --aug-*-height: <length-percentage>

Similar to clip, extended rectangularly along the y axis. Equip augs by placing them in the value of the augmented-ui attribute along with an executable option: <div augmented-ui="tl-clip-y exe"></div>

augmented-ui="tl-clip-y br-clip-y exe" style="--aug-tl-height: 50%;"
augmented-ui="r-clip-y bl-clip-y exe" style="--aug-bl: 25px; --aug-r-height: 57%; --aug-r-width: 10px;"
augmented-ui="b-clip-y exe" style="--aug-b-height: 65%; --aug-b-width: 10px;"
Show Full Code
augmented-ui docs

Alignment of augs in edge positions

augmented-ui provides options to fine-tune the position of augs equpped to edge positions (top, right, bottom, left)

#

--aug-t-origin-x, --aug-b-origin-x


Default Value: half way between the innermost point of the left and right corner augs along the same edge
Type: <length-percentage>

Specifies the center placement of augs equipped to the top and bottom positions, respectively. Ex: set it to 50% to center it in the middle of the element instead of centering between the corner augs

(--aug-t-origin-x not set) augmented-ui="tl-clip t-rect exe" style="--aug-tl: 25px; --aug-inset: 2px; --aug-border: 2px;"
augmented-ui="tl-clip t-rect exe" style="--aug-t-origin-x: 50%; --aug-tl: 25px; --aug-inset: 2px; --aug-border: 2px;"
augmented-ui="tl-clip t-rect exe" style="--aug-t-origin-x: 75%; --aug-tl: 25px; --aug-inset: 2px; --aug-border: 2px;"
Show Full Code
augmented-ui docs
#

--aug-l-origin-y, --aug-r-origin-y


Default Value: half way between the innermost point of the top and bottom corner augs along the same edge
Type: <length-percentage>

Specifies the center placement of augs equipped to the left and right positions, respectively. Ex: set it to 50% to center it in the middle of the element instead of centering between the corner augs.

(--aug-l-origin-y not set) augmented-ui="tl-clip l-rect exe" style="--aug-tl: 25px; --aug-inset: 2px; --aug-border: 2px;"
augmented-ui="tl-clip l-rect exe" style="--aug-l-origin-y: 50%; --aug-tl: 25px;"
augmented-ui="tl-clip l-rect exe" style="--aug-l-origin-y: 75%; --aug-tl: 25px; --aug-inset: 2px; --aug-border: 2px;"
Show Full Code
augmented-ui docs
#

--aug-t-offset, --aug-r-offset, --aug-b-offset, --aug-l-offset


Default Value: 0px
Type: <length-percentage>)

Specifies an offset from the origin of the aug in the corresponding position. On top/bottom a negative value shifts left, on right/left it shifts up.

augmented-ui="tl-clip t-rect exe" style="--aug-t-offset: 0px; --aug-tl: 25px;" (default position, centered between the corner augs)
augmented-ui="tl-clip t-rect exe" style="--aug-t-offset: -12px; --aug-tl: 25px;" (--aug-t-origin-x is not set so this is offset from the center point between the corner augs)
augmented-ui="tl-clip t-rect exe" style="--aug-t-offset: 10px; --aug-t-origin-x: 50%; --aug-tl: 25px; (10px past the center of the element)"
Show Full Code
augmented-ui docs

Adjusting the size of equipped augs

augmented-ui provides sizing properties corresponding to the position an aug is assigned to.

#

--aug-tl, --aug-t, --aug-tr, --aug-r, --aug-br, --aug-b, --aug-bl, --aug-l


Default Value: 15px
Type: <length> (Typically px and does not support %)
Supported on augs: All

Specifies the base-size of an aug in the corresponding position, acting as a sort of radius for drawing each part of an aug from an outside edge or corner point of the element. The border and inset maintain consistent width/distance around an aug and may make an aug effectively larger.

augmented-ui="tl-clip br-rect exe" style="--aug-tl: 25px; --aug-br: 20px;"
augmented-ui="t-clip r-rect exe" style="--aug-t: 25px; --aug-r: 20px;"
augmented-ui="bl-clip-y r-clip-x exe" (default sizes, 15px)

augmented-ui="tl-clip br-rect exe" style="--aug-tl: 25px; --aug-br: 20px; --aug-border-bg: none; --aug-inset-bg: none; background: gold;"
augmented-ui="t-clip r-rect exe" style="--aug-t: 25px; --aug-r: 20px; --aug-border-bg: none; --aug-inset-bg: none; background: gold;"
augmented-ui="bl-clip-y r-clip-x exe" style="--aug-border-bg: none; --aug-inset-bg: none; background: gold;" (default sizes, 15px)
Show Full Code
augmented-ui docs
#

--aug-tl-width, --aug-t-width, --aug-tr-width, --aug-r-width, --aug-br-width, --aug-b-width, --aug-bl-width, --aug-l-width


Default Value: varied
Type: <length> (Typically px and does not support %)
Supported on augs: *-rect, *-clip-x, *-clip-y
Additionally, % values are supported only on *-rect and *-clip-x

Specifies the width of an aug in the corresponding position. The border and inset maintain consistent width/distance around an aug and may make an aug effectively larger.

augmented-ui="tl-rect exe" style="--aug-tl: 25px; --aug-tl-width: 50%;"
augmented-ui="t-clip-x exe" style="--aug-t: 10px; --aug-t-width: 33%;"
augmented-ui="b-clip-y exe" style="--aug-b-width: 10px;"
augmented-ui="r-clip-x exe" style="--aug-r-width: 50%;"

augmented-ui="tl-rect exe" style="--aug-tl: 25px; --aug-tl-width: 50%; --aug-border-bg: none; --aug-inset-bg: none; background: gold;"
augmented-ui="t-clip-x exe" style="--aug-t: 10px; --aug-t-width: 33%; --aug-border-bg: none; --aug-inset-bg: none; background: gold;"
augmented-ui="b-clip-y exe" style="--aug-b-width: 10px; --aug-border-bg: none; --aug-inset-bg: none; background: gold;"
augmented-ui="r-clip-x exe" style="--aug-r-width: 50%; --aug-border-bg: none; --aug-inset-bg: none; background: gold;"
Show Full Code
augmented-ui docs
#

--aug-tl-height, --aug-t-height, --aug-tr-height, --aug-r-height, --aug-br-height, --aug-b-height, --aug-bl-height, --aug-l-height


Default Value: varied
Type: <length> (Typically px and does not support %)
Supported on augs: *-rect, *-clip-x, *-clip-y
Additionally, % values are supported only on *-rect and *-clip-y

Specifies the height of an aug in the corresponding position. The border and inset maintain consistent width/distance around an aug and may make an aug effectively larger.

augmented-ui="tl-rect exe" style="--aug-tl: 25px; --aug-tl-height: 50%;"
augmented-ui="t-clip-y exe" style="--aug-t: 10px; --aug-t-height: 33%;"
augmented-ui="b-clip-x exe" style="--aug-b-height: 10px;"
augmented-ui="r-clip-y exe" style="--aug-r-height: 50%;"

augmented-ui="tl-rect exe" style="--aug-tl: 25px; --aug-tl-height: 50%; --aug-border-bg: none; --aug-inset-bg: none; background: gold;"
augmented-ui="t-clip-y exe" style="--aug-t: 10px; --aug-t-height: 33%; --aug-border-bg: none; --aug-inset-bg: none; background: gold;"
augmented-ui="b-clip-x exe" style="--aug-b-height: 10px; --aug-border-bg: none; --aug-inset-bg: none; background: gold;"
augmented-ui="r-clip-y exe" style="--aug-r-height: 50%; --aug-border-bg: none; --aug-inset-bg: none; background: gold;"
Show Full Code
augmented-ui docs

Fallback properties for older browsers

augmented-ui includes automatic fallbacks for older browsers, these properties will override default fallbacks


  See the borders section for details about --aug-border-fallback-color

#

--aug-border-radius-fallback


Default Value: an automatic calculation based on size of any corresponding corner aug equipped to the element.
Type: <border-radius>

--aug-border-radius-fallback specifies the border radius applied to both the main element and the border element when clipping is not available in the browser. Note: in the automatic fallback, augs along the edges are not rendered or considered for these browsers, only corner augs are simulated. The automatic appearance is a softer, almost cyberpunk-melted version of the full support augmented element.

(no fallback) augmented-ui="tl-clip-y br-clip exe" style="--aug-tr-height: 30%;"
augmented-ui="tl-clip-y br-clip exe" style="--aug-tr-height: 30%; --aug-border-radius-fallback: 5px 0px 15px 0px;"
Show Full Code
augmented-ui docs
#

--aug-border-radius-fallback-inset


Default Value: an automatic calculation based on size of any corresponding corner aug equipped to the element, minus the (border width + inset distance)
Type: <border-radius>

--aug-border-radius-fallback-inset specifies the border radius applied to the inset element when clipping is not available in the browser. Note: in the automatic fallback, augs along the edges are not rendered or considered for these browsers, only corner augs are simulated. The automatic appearance is a softer, almost cyberpunk-melted version of the full support augmented element.

(no fallback) augmented-ui="tl-clip-y br-clip exe" style="--aug-tr-height: 30%;"
augmented-ui="tl-clip-y br-clip exe" style="--aug-tr-height: 30%; --aug-border-radius-fallback-inset: 20px 0px 5px 0px;"
Show Full Code
augmented-ui docs

TODO: notes about advanced executable modes on an augmented element
TODO: notes about clipping delegated elements within an augmented element (border-el, inset-el, etc)
#

Supporting augmented-ui


augmented-ui is open source and free to use in any project. NPM | GitHub | BSD 2-Clause License
Monetary support isn't necessary but it would be very very much appreciated. (Full transparency: There were only a couple costs in development up to now, less than $250 total aside from the time, but my laptop is unlikely to meet minimum specs for Cyberpunk 2077 in April 2020 sooo that's the big dream)
Above all else though, I just want help make awesome cyberpunk inspired UI as common on the web as it is in the games and movies.
If you use augmented-ui in your project, I would love to see it! I'm not much of a designer so I can't wait to see it in the hands of someone skilled!
Find me @James0x57 on twitter and Reddit :)

Support With Paypal


Support With Bitcoin


1CdjKJ5wmio74bnzGkFqUpCi7mjJzwfb4U
augmented-ui docs