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
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@1/augmented.css">
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. ex: br-clip (bottom right clip)
Short designations for each position will be found on every aug and every aug property. There are 8 positions:
tl = top left corner
t = top edge
tr = top right corner
r = right edge
br = bottom right corner
b = bottom edge
bl = bottom left corner
l = left edge
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:
clipping of the element itself
creation and clipping of the border on the ::after pseudo element
creation and clipping of the inset on the ::before pseudo element
So without it, augmented-ui may appear to do nothing.
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.
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.
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;
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.
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.
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.
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>
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>
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>
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>
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>
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
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.
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)"
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.
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.
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.
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.
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
Show in jsfiddle
Show in codepen
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 :)
