augmented-ui
Version:
Integrate your apps with technology
137 lines (115 loc) • 13 kB
Markdown
# augmented-ui from PropJockey
Resources:
* Home: http://augmented-ui.com/
* Docs: http://augmented-ui.com/docs/
* WYSIWYG Mixin Mixer: http://augmented-ui.com/mixinmixer/
* NPM: https://www.npmjs.com/package/augmented-ui
* GitHub: https://github.com/propjockey/augmented-ui
* Twitter: https://twitter.com/James0x57
Old v1 Links:
* Home: http://augmented-ui.com/v1/
* Docs: http://augmented-ui.com/v1/docs/
* Test: http://augmented-ui.com/v1/test.html
* unpkg: https://unpkg.com/augmented-ui@1/augmented.css
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:
```html
<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](https://opencollective.com/augmented-ui)]
<a href="https://opencollective.com/augmented-ui/sponsor/0/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/0/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/1/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/1/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/2/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/2/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/3/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/3/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/4/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/4/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/5/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/5/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/6/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/6/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/7/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/7/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/8/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/8/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/9/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/9/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/10/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/10/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/11/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/11/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/12/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/12/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/13/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/13/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/14/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/14/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/15/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/15/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/16/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/16/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/17/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/17/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/18/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/18/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/19/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/19/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/20/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/20/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/21/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/21/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/22/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/22/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/23/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/23/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/24/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/24/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/25/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/25/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/26/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/26/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/27/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/27/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/28/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/28/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/sponsor/29/website" target="_blank"><img src="https://opencollective.com/augmented-ui/sponsor/29/avatar.svg"></a>
### Backers
Help the developer follow their excitement and support augmented-ui with a monthly donation. [[Become a backer](https://opencollective.com/augmented-ui)]
<a href="https://opencollective.com/augmented-ui/backer/0/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/0/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/1/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/1/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/2/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/2/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/3/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/3/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/4/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/4/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/5/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/5/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/6/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/6/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/7/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/7/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/8/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/8/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/9/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/9/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/10/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/10/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/11/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/11/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/12/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/12/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/13/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/13/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/14/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/14/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/15/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/15/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/16/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/16/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/17/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/17/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/18/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/18/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/19/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/19/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/20/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/20/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/21/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/21/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/22/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/22/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/23/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/23/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/24/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/24/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/25/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/25/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/26/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/26/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/27/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/27/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/28/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/28/avatar.svg"></a>
<a href="https://opencollective.com/augmented-ui/backer/29/website" target="_blank"><img src="https://opencollective.com/augmented-ui/backer/29/avatar.svg"></a>
## 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/
* 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