augmented-ui v1.1.2 - Integrate your apps with technology

.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...
}

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.

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

Namespaced to avoid crossing wires.

All custom properties begin with "--aug-"
Selectors only use the "augmented-ui" attribute

Automatic fallbacks and feature detection.

Full support with v1.1.0+ has a global user reach of ~91%!
Great automatic fallback for older browsers (+ ~3.5% global reach). More details below!

Use augmented-ui in any project, for free.

Free :: BSD 2-Clause License
Open Source :: NPM GitHub

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;
}

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;
}

NAME:

augs applied on :hover in/out, as defined in the CSS

Same screenshot in browsers with clip-path

Screenshot of old browser fallbacks

Ancient browsers don't hate it (IE11 screenshot)

Future Ideas

---------------------------------,--------------------------------------------------------
   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

The automatically constructed border radius rules can be overwritten with --aug-border-radius-fallback and --aug-border-radius-fallback-inset.
augmented-ui borders are clipped from an ::after element with a standard CSS background applied. For the fallback, this background is never applied to the element. Instead, a border of the same width is applied (also on the ::after element so no layout issues will occur). The color of this border can be set with --aug-border-fallback-color, else defaults to what was set as the original background. If the background is anything other than a color and a fallback value was not provided, the border will be invalid and not render at all. The original opacity option works as is.

Ancient Browsers without custom properties (ex: IE11)

Usable, but not dressed up. The remaining ~6% of global users would experience this (if they're in your target audience).
Additional considerations for this are left to the user. (No automatic fallbacks provided since these browsers do not support CSS feature detection either.)
Main issues may be: visibility of text (no inset bg is present), and the new stacking context that clip path creates will not happen (set a transformation other than none to simulate this).
An earlier screenshot of part of this site rendered in IE11 is available above. The biggest issues pictured are from when display:grid was used (nothing to do with augmented-ui) but most of the augmented elements still show up in the correct spot, with text readable, correct layering, and size maintained.

augmented-ui