This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 400,000 packages pre-installed, including
augmented-ui with all
npm packages installed. Try it out:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
Informal/Visual Tests: http://augmented-ui.com/test.html
$ npm install augmented-ui
Then include the
/node_modules/augmented-ui/augmented.css file before any stylesheets that use it.
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/augmented.css">
You may, optionally, use data-augmented.css instead of augmented.css if you prefer to stick to standard markup. They are not interchangeable, please only use one or the other. The API is exactly the same, just instead of the
augmented-ui="tl-clip exe" attributes, you'll use
data-augmented-ui="tl-clip exe" instead. data-augmented.css is currently incompatible with aug-attr-spliced.js
Become a sponsor and get your logo on this README with a link to your site. [Become a sponsor]
Help the developer follow his excitement and support augmented-ui with a monthly donation. [Become a backer]
v1.1.2 - March 5th, 2020:
v1.1.0 - September 9th, 2019:
v1.0.0 - August 31st, 2019:
augmented-ui relies on dynamic and optional composition of standard comma-separated CSS properties. This requires a leading comma in a custom property + an empty fallback in var(). Here is a minimal example of how that works: https://jsbin.com/cemujarozo/1/edit?html,css,output
A common problem in CSS parsers is to erroneously give meaning to commas in custom properties, and then complain about having a leading comma. Even old versions of safari on iOS ran into this issue and they have since fixed it. Fortunately it can be safely feature detected to avoid problems in those versions of iOS:
@supports (--foo: , 0 0)
Create React App depends on PostCSS and cssnano. Both of these libraries have parsing bugs that block augmented-ui so you'll need to copy augmented.css (or data-augmented.css) into the public folder and manually include it in the index.html file to avoid them until they're fixed.
You can read more about using the public folder here: https://create-react-app.dev/docs/using-the-public-folder/
You can read more about the Post CSS bug here (issue has been open for about 1 year): https://github.com/postcss/postcss-calc/issues/77
You can read more about the cssnano bug here (solved, but there hasn't been a release in over a year): https://github.com/cssnano/cssnano/issues/822
styled-components strips non-standard attributes so make sure to use
VSCode complains about the leading comma and currently the only way to avoid it is to disable its CSS Validation.
You can read more about disabling it here: https://github.com/propjockey/augmented-ui/issues/2#issuecomment-540184111
You can read more about the issue here: https://github.com/microsoft/vscode/issues/82178
SASS has multiple implementations/compilers, some have parsing bugs related to the leading comma in custom properties. The compiler used on sassmeister.com handles the leading comma correctly in custom properties (by ignoring it), but trips up when it's used in a supports statement
@supports (--foo: , 0 0) If you run into trouble, include augmented.css separately from your SASS ecosystem.
Please feel free to file an issue if you run into any trouble, I'll be glad to take a look and work on a path forward for you!