• Stars
    star
    1,260
  • Rank 37,337 (Top 0.8 %)
  • Language
    CSS
  • License
    BSD 2-Clause "Sim...
  • Created over 5 years ago
  • Updated 6 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Cyberpunk-inspired web UI made easy. Get augmented.

James0x57

augmented-ui from PropJockey

Resources:

Old v1 Links:

Install: $ npm install augmented-ui Then include the /node_modules/augmented-ui/augmented-ui.min.css file 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@2/augmented-ui.min.css">

Files

  • augmented-ui.css - Everything, not minified (core, border and inlay mixins, individual-region mixins, all-region shape mixins)
  • augmented-ui.min.css - Everything, minified (core, border and inlay mixins, individual-region mixins, all-region shape mixins)
  • aug-core.min.css - core only, minified
  • border-inlay-mixins.min.css - border and inlay mixins (and their delegate options) only, minified. Requires aug-core.min.css
  • region-mixins.min.css - individual-region mixins only, minified. Requires aug-core.min.css
  • shape-mixins.min.css - all-region mixins only, minified. Requires aug-core.min.css

Support

http://augmented-ui.com/docs/#supporting-augmented-ui

Sponsors

Become a sponsor and get your logo on this README with a link to your site. [Become a sponsor]

Backers

Help the developer follow their excitement and support augmented-ui with a monthly donation. [Become a backer]

CHANGELOG:

v2.0.0 - August 30, 2020:

  • Complete rewrite
  • Over 200 aug mixins built on top of a new core feature set
  • Mixin Mixer: http://augmented-ui.com/mixinmixer
  • Properties that enable clip augs at any angle, not just 45deg
  • Optionally equip augs dynamically from CSS using core, without DOM attribute mixins and without JavaScript (no more aug-attr-spliced.js!)
  • Border size and Inlay (previously "Inset") distance gained individual top/right/bottom/left options
  • Full support global user reach at 92.96%
  • Automatic elliptical border-radius fallbacks removed to simplify adding augmented-ui to projects with legacy browser support

v1.1.2 - March 5th, 2020:

  • Added data-augmented.css option for data- prefixed augmented-ui attribute.
  • Added compatibility notes for specific frameworks/libraries at the bottom of this README

v1.1.0 - September 9th, 2019:

  • Increased full support global user reach from ~70% to ~91% with -webkit-clip-path
  • Bought an old iPhone to isolate and feature detect the iOS issue found before launch, enabling -webkit-clip-path to be used everywhere else
  • Better docs: http://augmented-ui.com/docs/

v1.0.0 - August 31st, 2019:

  • Initial release
  • -webkit-clip-path support removed before release due to breaking issues on older iOS versions used by ~2% of global users

More Repositories

1

css-sweeper

MineSweeper implemented in CSS + HTML using the Space Toggle trick (no JavaScript!)
HTML
825
star
2

css-media-vars

A brand new way to write responsive CSS. Named breakpoints, DRY selectors, no scripts, no builds, vanilla CSS.
CSS
293
star
3

DOMinion-build-demo

Demo of a build produced by a 3D CSS editor in development
HTML
115
star
4

aug-attr-spliced.js

augmented-ui plugin: adds augmented-ui attribute to elements automatically from CSS
JavaScript
96
star
5

bcd7sdd

Binary Coded Decimal 7 Segment Display Decoder implemented with CSS via the Space Toggle trick
HTML
88
star
6

css-peeps

One CSS file | One <div> | 5 Million Open Peeps combinations | Infinite Customization
28
star
7

css-conways-game-of-life

100% CSS + HTML implementation of Conway's Game of Life. 60 generation simulation @ 20x20
CSS
18
star
8

eased-gradient

generate css gradients with an easing function applied to the spectrum
JavaScript
7
star
9

css-breakout

Breakout implemented in 100% CSS
CSS
6
star
10

css-peeps-website

CSS-Peeps website
HTML
6
star
11

css-var-listener

JavaScript
5
star
12

analog-array

read values between array indexes
JavaScript
3
star
13

css-inherit-fn

--var: calc(inherit(--var, 0) + 1);
JavaScript
3
star
14

Augooiigooey

#NoCode WYSIWYG Editor for designing augmented-ui elements. Sci-Fi and CyberPunk web design has never been more accessible.
3
star
15

houdini-hud

augmented-ui implemented in Houdini with hopes of future enhancements to the paint api
JavaScript
3
star
16

propjockey

JavaScript
2
star
17

css-badge

css-only badge component
HTML
2
star
18

propjockey.io

CSS
2
star
19

css-bin-bits

a vanilla CSS API for binary operations and bit manipulation of 16 bit numbers
CSS
2
star
20

propjockey-brand

PropJockey pngs, svgs, favicons, and more
CSS
2
star
21

houdini-hud-website

documentation website for houdini-hud
JavaScript
1
star
22

aug-compile

Get the most out of your runtime performance by compiling static augmented-ui configurations up front
JavaScript
1
star
23

propgun

PropJokey propgun - generate a function from position:value pairs that takes t [0, 1] and returns the corresponding tween value.
JavaScript
1
star
24

css-screensize

Capture CSS <number> vars for screen --width and --height. 100% CSS, Zero JS
CSS
1
star
25

ezLight

The easiest, Zero-Build, way to set up your light & dark CSS themes with an expressive list of classes automatically available ~
1
star
26

nth-vars.css

CSS --nth-child & --nth-of-type variables for every element πŸŽ‰
CSS
1
star