augmented-ui
ANIMATION DIAGNOSTICS
PERFORMANCE:
FPS
augs plural noun, abr.
1. Pieces of technology, often large, integrated into the squishy human body. Common in the cyberpunk genre.

2. clip-path partials integrated into an app's flexible ui elements with augmented-ui.

augmented-ui

This browser is using the automatic elliptical border-radius fallback.
.my-augfiguration {
  --aug-tr: 25px;
  --aug-bl: 57px;
  --aug-br-width: 25px;
  --aug-br-height: 50%;
  --aug-border: 10px;
  --aug-border-bg: linear-gradient(to botto...);
  --aug-border-fallback-color: #d8aea4;
  --aug-inset: 10px;
  --aug-inset-bg: #fbe806;
  background: linear-gradient(#ff604d, #b1ffff);
  color: #b1ffff;
  font-size...
}
<div class="my-augfiguration"
  augmented-ui="tr-clip bl-clip br-clip-y exe"
>
  &lt; / &gt;
</div>
If --aug-border-bg isn't a solid color, use this to specify one for the fallback border
Just a class name to style the element
Set this attribute on elements you want to augment. Don't forget to execute!
Many augs can be sized with width and height separately
Top-Right and Bottom-Left clip augs. Equipped by the attr, sized by CSS. All augs in all slots can be sized with --aug-[aug slot]
The main executable! This creates all the clip paths needed to augment the element
Borders can be set to any size (uniform for now), with any background supported by CSS
Typical CSS to style the content inside -->
Similar properties to the border, creates a smaller background, evenly inset the distance specified
Normal background for the element. Don't set one if you want the inset gap to be transparent!
< / >
::after
innerHTML
::before
style.background

High Tech, Low Effort


augmented-ui is just CSS.

Namespaced to avoid crossing wires.

Automatic fallbacks and feature detection.

Use augmented-ui in any project, for free.

PLUGIN AVAILABLE
BETA

aug-attr-spliced.js

Skip the attribute, stick to {CSS}
Import aug-attr-spliced.js to have the
augmented-ui attributes automatically added and updated, live, from your CSS to your HTML with a new custom property:
--augmented-ui

Use aug-attr-spliced.js in any project, for free.

· Free :: BSD 2-Clause License
· Open Source :: NPM  GitHub
.my-spliced-augs {
    --augmented-ui: tr-clip exe;
    --aug-br: 25px;
}
<span class="my-spliced-augs"   augmented-ui="br-clip exe">
    NAME:
</span>
<input class="my-spliced-augs"   augmented-ui="br-clip exe" />
NAME:
augmented as soon as the page loads, based on the CSS
input:hover {
    --augmented-ui: l-clip r-clip exe;
    --aug-l: 10px; --aug-r: 10px;
}
<span class="my-spliced-augs" augmented-ui="br-clip exe">
    NAME:
</span>
<input class="my-spliced-augs"
   augmented-ui="l-clip r-clip exe" augmented-ui="br-clip exe" />
NAME:
augs applied on :hover in/out, as defined in the CSS
Same screenshot in browsers with clip-path
X
Screenshot of old browser fallbacks
X
Ancient browsers don't hate it (IE11 screenshot)
X
Future Ideas
X
---------------------------------,--------------------------------------------------------
   FUTURE AUGS?                  |   FUTURE OPTIONS?
---------------------------------+--------------------------------------------------------
                                 |   
   * scoop (all)                 |   --aug-*-width : support for *-clip
       ,----,   ,------          |   --aug-*-height: support for *-clip
     -ยท`     -.-                 |   
     |                           |   --aug-notch-size: adds ability on clip-x/y augs to
                                 |                     render with any angle ( +/- ? )
   * clip-x-45 (corners only)    |   
         _________               |   --aug-*-width : support for *-round (corners only)
        |                        |   --aug-*-height: support for *-round (corners only)
     __-`                        |   
    |                            |   --aug-border-*: independent t, l, r, b widths
                                 |   --aug-inset-* : independent t, l, r, b distances
   * clip-y-45 (corners only)    |   
         _________               |   More support for % aug sizes (currently limited)
        `.                       |   
    |`-__|                       |   auto clean up corners via aug-attr-spliced.js
    |                            |   
                                 |   --aug-*-custom-outer: custom polygon partials
   * round-hd (corners only)     |   --aug-*-custom-border: custom polygon partials
   * scoop-hd                    |   --aug-*-custom-inset: custom polygon partials
                                 |   
---------------------------------'--------------------------------------------------------
          
.TXT
Top-Secret
.PNG
Recent-Browsers
.PNG
Old-Browsers
.PNG
Ancient-Browsers

Automatic Fallbacks,
Browser Support, & Options


Full support for ~91% of global users!

  • As of Sept 9th, 2019 with v1.1.0, ~91% of global users would experience the fully supported version according to data from caniuse.com
  • Automatic -webkit-clip-path fallback brings full support as far back as: Chrome 51-54, Safari 9.1+, iOS Safari 11+, Opera 38-41, Opera mobile 46+, UC Browser 12+, Samsung Internet 5+

Automatic fallbacks use elliptical border-radius

  • 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.
  • The --aug-inset options still work the same, creating a background behind the content, inset the same distance from the outer edge. The inset background performs a similar construction of an elliptical border-radius, with appropriately smaller sizes just like the full version.
  • Augmented elements will have overflow:hidden; and transform:translateZ(0px); applied to simulate clip-path's overflow clipping and its new stacking context so layout differences are avoided.
  • This elliptical fallback will be seen by about 3.5% of global users according to data from caniuse.com - primarily pre-chromium Edge and older iOS users.

Fallback options

Ancient Browsers without custom properties (ex: IE11)

Support With Paypal

augmented-ui


Docs located here: http://augmented-ui.com/docs/
Informal/Visual tests located here: http://augmented-ui.com/test.html

Get Augmented: Integrate your apps with technology
$ npm install augmented-ui
Then copy the /node_modules/augmented-ui/augmented.css file into your build and include it before any stylesheets that use it.

OR

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


Support With Bitcoin

1CdjKJ5wmio74bnzGkFqUpCi7mjJzwfb4U