C:\SS\augmented-ui $  augui update -f
  PropJockey AUGUI Updater ->
  ...
  Version installed is v1.1.2
  Version latest is v2.0.0
  Version upgrade initialized AUG-2020
  ...
  Fin.
  BSD 2-Clause License
  Copyright (c) 2020 James0x57, PropJockey
  RELAUNCH...
augmented-ui
version 2
Learn more!
↓

augmented-ui

CSS .my-augfiguration {
  --aug-tr: 25px;
  --aug-bl: 57px;
  --aug-br: 25px;
  --aug-br-inset2: 40%;
  --aug-border-all: 10px;
  --aug-border-bg: linear-gradient(to botto...);
  --aug-inlay-all: 10px;
  --aug-inlay-bg: #fbe806;
  background: linear-gradient(#ff604d, #b1ffff);
  color: #b1ffff;
  font-size...
} HTML <div class="my-augfiguration"
  data-augmented-ui="tr-clip bl-clip br-clip-y both"
>
  &lt; / &gt;
</div>
Just a class name to style the element
Add this attribute to elements you want to augment. If you equip augs with CSS using augmented-ui's core, no value is needed!
Every region has a common set of core properties (like inset2) that will override the mixin's default values
Top-Right and Bottom-Left clip augs. Equipped by putting the mixin names in the attr, sized by CSS. All mixins in all regions can be sized with --aug-[region]
This turns on both the border and inlay
Borders can be set to any size (including individual top / right / bottom / left properties), with any background supported by CSS (including multi-layerd ones!)
Typical CSS to style the content inside →
Similar properties to the border, creates a smaller inlay background, inset the distance(s) specified
Normal background for the element. Don't set one if you want the border-inlay gap to be transparent!
< / >
::after
innerHTML
::before
style.background

High Tech, Low Effort


augmented-ui is just CSS.

Namespaced to avoid crossing wires.

Use augmented-ui in any project, for free.

Mixin Mixer


Thanks to the wide customizations possible with the new augmented core, 164 NEW preset mixin configurations have been added to the 36 from version 1! That's 200 total region mixins in version 2!

So, to make augmented-ui even easier than before, Mixin Mixer will show you all 200 region mixins and lets you rapidly generate the HTML from your selections.
Pick, click, repeat, copy, paste.


BONUS


Beyond the region mixins shown in Mixin Mixer, there are also a handful of common fixed-aspect-ratio shapes available that take advantage of core's new any-angle clip properties automatically:


Screenshot of Mixin Mixer
Using Mixins
.dna-demo-mixins li {
  --aug-l: 0.5rem;
  --aug-r: 0.5rem;
  --aug-tl: 0.5rem;
  --aug-tr: 0.5rem;
  --aug-bl: 0.5rem;
  --aug-br: 0.5rem;
}
/* The remaining CSS is common
   between both approaches.
   The mixins are hard-coded
   individually per letter,
   per left/right side.
   
   The core approach can
   instead use CSS selectors
   to make the augs dynamic
   just by adding a class
   (or attr) to identify
   the C/G/T/A nucleotide.
 */ <ul class="dna-demo-mixins">
  <li data-augmented-ui="border r-scoop">C
  <li data-augmented-ui="border tl-round bl-round">G

  <li data-augmented-ui="border r-scoop">C
  <li data-augmented-ui="border tl-round bl-round">G

  <li data-augmented-ui="border r-clip">T
  <li data-augmented-ui="border tl-clip bl-clip">A

  <li data-augmented-ui="border tr-round br-round">G
  <li data-augmented-ui="border l-scoop">C

  <li data-augmented-ui="border r-clip">T
  <li data-augmented-ui="border tl-clip bl-clip">A

  <li data-augmented-ui="border tr-clip br-clip">A
  <li data-augmented-ui="border l-clip">T

  <li data-augmented-ui="border tr-clip br-clip">A
  <li data-augmented-ui="border l-clip">T

  <li data-augmented-ui="border r-clip">T
  <li data-augmented-ui="border tl-clip bl-clip">A

  <li data-augmented-ui="border r-scoop">C
  <li data-augmented-ui="border tl-round bl-round">G

  <li data-augmented-ui="border r-scoop">C
  <li data-augmented-ui="border tl-round bl-round">G

  <li data-augmented-ui="border r-scoop">C
  <li data-augmented-ui="border tl-round bl-round">G

  <li data-augmented-ui="border tr-clip br-clip">A
  <li data-augmented-ui="border l-clip">T

  <li data-augmented-ui="border tr-round br-round">G
  <li data-augmented-ui="border l-scoop">C

  <li data-augmented-ui="border r-scoop">C
  <li data-augmented-ui="border tl-round bl-round">G
</ul>
  • C
  • G
  • C
  • G
  • T
  • A
  • G
  • C
  • T
  • A
  • A
  • T
  • A
  • T
  • T
  • A
  • C
  • G
  • C
  • G
  • C
  • G
  • A
  • T
  • G
  • C
  • C
  • G
Using Core
.dna-demo-core li {
  --aug-border: initial;
  --aug-l1: 0.5rem;
  --aug-l2: 0.5rem;
  --aug-r1: 0.5rem;
  --aug-r2: 0.5rem;
  --aug-tl1: 0.5rem;
  --aug-tr1: 0.5rem;
  --aug-bl1: 0.5rem;
  --aug-br1: 0.5rem;
}
.dna-demo-core [data-C]:nth-child(2n - 1) {
  --aug-scoop-r1: initial;
  --aug-scoop-r2: initial;
}
.dna-demo-core [data-C]:nth-child(2n) {
  --aug-scoop-l1: initial;
  --aug-scoop-l2: initial;
}
.dna-demo-core [data-G]:nth-child(2n - 1) {
  --aug-round-tr1: initial;
  --aug-round-br1: initial;
}
.dna-demo-core [data-G]:nth-child(2n) {
  --aug-round-tl1: initial;
  --aug-round-bl1: initial;
}
.dna-demo-core [data-A]:nth-child(2n - 1) {
  --aug-clip-tr1: initial;
  --aug-clip-br1: initial;
}
.dna-demo-core [data-A]:nth-child(2n) {
  --aug-clip-tl1: initial;
  --aug-clip-bl1: initial;
}
.dna-demo-core [data-T]:nth-child(2n - 1) {
  --aug-clip-r1: initial;
  --aug-clip-r2: initial;
}
.dna-demo-core [data-T]:nth-child(2n) {
  --aug-clip-l1: initial;
  --aug-clip-l2: initial;
} <ul class="dna-demo-core">
  <li data-C data-augmented-ui>C <li data-G data-augmented-ui>G
  <li data-C data-augmented-ui>C <li data-G data-augmented-ui>G
  <li data-T data-augmented-ui>T <li data-A data-augmented-ui>A
  <li data-G data-augmented-ui>G <li data-C data-augmented-ui>C
  <li data-T data-augmented-ui>T <li data-A data-augmented-ui>A
  <li data-A data-augmented-ui>A <li data-T data-augmented-ui>T
  <li data-A data-augmented-ui>A <li data-T data-augmented-ui>T
  <li data-T data-augmented-ui>T <li data-A data-augmented-ui>A
  <li data-C data-augmented-ui>C <li data-G data-augmented-ui>G
  <li data-C data-augmented-ui>C <li data-G data-augmented-ui>G
  <li data-C data-augmented-ui>C <li data-G data-augmented-ui>G
  <li data-A data-augmented-ui>A <li data-T data-augmented-ui>T
  <li data-G data-augmented-ui>G <li data-C data-augmented-ui>C
  <li data-C data-augmented-ui>C <li data-G data-augmented-ui>G
</ul>
  • C
  • G
  • C
  • G
  • T
  • A
  • G
  • C
  • T
  • A
  • A
  • T
  • A
  • T
  • T
  • A
  • C
  • G
  • C
  • G
  • C
  • G
  • A
  • T
  • G
  • C
  • C
  • G

augmented core !

Skip the attribute value, augment {CSS} itself
Mixins are a great way to get started and move fast, and they're a great way to learn core and its nuances at your own pace, but they are optional!

Core is still just CSS; built using inverted CSS Space Toggles.
As a result, you can equip any augs to any element with the data-augmented-ui attribute from your CSS.
No need to import a separate JS library with more edge cases than use cases! ;)

$
Thank
You!
css-media-vars logo
propjockey logo

92.96% Global User Support

(according to browser usage percentages from caniuse.com in mid August 2020)
Browser Edge Firefox Chrome Safari iOS
Safari
Unsupported 0.91% 0.36% 0.55% 0.16% 0.56%
Supported
Since Version		 79+ 54+ 51+ 9.1+ 11.2+
Supported
Global Usage		 1.89% 3.70% 30.66% 3.70% 11.20%
Browser Android Browser Chrome for
Android		 Firefox for
Android		 UC
Browser		 Samsung
Internet
Unsupported 0.17% 0.00% 0.30%
Supported
Since Version		 81+ 84 68 12+ 5+
Supported
Global Usage		 0.00% 35.38% 0.26% 1.47% 3.62%
Browser IE Opera Opera
Mini		 Opera
Mobile
Unsupported 1.65% 0.24% 0.91% 0.00%
Supported
Since Version		 38+ 46+
Supported
Global Usage		 1.07% 0.01%