Select Page





augmented-ui – Integrate your apps with technology












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

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

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%