Comment by James0x57 | Hacker News Reader

Comment by James0x57 | Hacker News Reader

Normally making designs like this on the web is really tedious and a bit challenging. You'd have to do things like add a new element to the dom, rotate it 45deg, position it perfectly, draw just one border and make the background match what's outside the box to cover up the square border underneath the main element. (and that's just one corner of one element)

For example: https://i.imgur.com/yY66cdv.png and https://i.imgur.com/A2Pyeur.png on Cyberpunk 2077's website this is roughly how they do it.

I set out to fix that with augmented-ui.

All you have to do now (after including the CSS file (no js or images, etc)) is this: <button augmented-ui="bl-clip exe">...

From there, there's a bunch of options that are just CSS. (and there are several other options, not just a simple corner clip!) You can set the size of the clip, change the border on the element to anything, including images and gradients (which is nearly impossible when done the traditional way). You can give it a background inset a distance from the border, leaving a transparent gap (so it'll work over any background at all) and much more!

Here are the docs on the border: http://augmented-ui.com/docs/#--aug-border-bg (click show in codepen if you want to play with it, jsfiddle's post feature is currently down)

I made all this possible with the polygon feature of clip-path so full-support reaches over 91% of global web users. Check out the CSS behind it all here if you want to see CSS being used as a programming language: https://unpkg.com/augmented-ui/augmented.css

Aaaand this is all free to use in any project! Check it out on NPM, I'd really really love to see what you make with it: https://www.npmjs.com/package/augmented-ui

Happy to answer questions! <3 Get augmented! ;)

Great work! One bug I noticed is that text runs out of the panels as seen on your page. I suggest making them overflow: auto to make it scroll when necessary, also with the required padding/margin to keep everything tidy within the parameters so it's not kissing the edge of the panel if the characters happen to line up perfectly to fit the width of the panel.

Ditto in firefox mobile. Parts of text not readable

I'll work on it. The site was secondary to the project and I cut a lot of corners making it as fast as I could, putting all the real effort and focus in the project itself

Assuming the site was built with the library, then this seems like an issue pertaining to the project and not the website.

Logical Equivalence:

  This photo album was made with construction paper and the hole here isn't big enough for the picture in it, so construction paper must be broken.

I just didn't make it properly responsive there yet. augmented-ui doesn't care what size the elements are.

I started getting ready to write a response saying, no, why the hell would you clip and make shapes in the DOM and not regular CSS, till I finished reading the rest of your post.

Great job on the animation, it really highlights how cool your augmentation system is. I have no doubt this will see a lot of use.

This probably deserves to be added to awesome-quirks, especially since it's pure CSS :)

https://github.com/dsalaj/awesome-quirks/

“high tech, low effort” — brilliant!

Thanks! ^_^

thank you so much for this. I'm currently organizing a Cyberpunk LARP, and I'm sure augmented-ui will be very useful!

ahh that's so cool! Have fun! I'd love to see what you build if you make it public at all!

If it's in the SF bay area, I'd totally play in a cyberpunk larp

> Check out the CSS behind it all here if you want to see CSS being used as a programming language

Could you explain the process behind the CSS, how it works?

Sure. Each aug is a clip-path partial. That is, a series of points meant to be put inside a clip-path: polygon(...here...); stored in custom properties.

All augs, by position, store their partial in the same internal variable. (--aug-_TlPath and --aug-_BPath for example).

So <div augmented-ui="tl-clip"> would store in the --aug-_TlPath a partial polygon path that draws the simple clip shape on the top left corner. Other augs in the tl position would do the exact same.

Then, to actually perform the clip, you use an executable option (exe for simplicity) like so: <div augmented-ui="tl-clip exe">

That executable option creates a clip-path: polygon(var(--aug-_TlPath), ...); on the element which combines all the partial paths into a single final path. They're applied clockwise from tl on.

Each partial is packed with calc() for every point, math based on the size options available for the position/aug, and sets up a lot of other internals. (like corners leave behind a variable for where they start/end so augs on the edge can find the mid point and center itself between the corners)

These vars are all applied to the same one element so even though the vars are set up in separate rules, they all have visibility with each other. With appropriate defaults in the custom properties, eg var(--aug-_TlPath, 0 0) this enables a pick-and-choose sort of plugin system for each partial.

In total there are 3 clip paths created. One for the element itself, one for the inside edge of the border (that loops back around and outside the element, creating a frame), and one for the inset.

Each aug in each position is responsible for providing all 3 paths. Each layer inward also degrades or compounds its size based on border width and inset distance respectively so a constant border and gap width are drawn the whole way around.

...That's pretty much it.

Oh and the automatic elliptical border radius fallback for pre-chromium Edge and iOS < 11 does the exact same thing with corner aug data but instead of making a clip-path, it makes a border-radius rule.

happy to clarify any point you're interested in!

Are there any resources or articles you'd recommend to get a more in-depth view of CSS? I'm a frontend developer but I always struggle with CSS beyond the basics.

Understanding how you you created this is very enlightening.

I land on css-tricks constantly. That's loaded with neat ideas.

For me, learning is always easiest when I'm learning what I need right now Soo my personal suggestion would be: just keep making things and don't let what you already know how to do be a limit for you.

Can't-do almost doesn't exist.

CSS Secrets: Better Solutions to Everyday Web Design Problems (written by Lea Verou) covers a variety of interesting techniques along these lines.

I had to implement something like this during an internship last year and I can confirm that it's a pain. I wish I had augmented back then!

This is fantastic. Thank you for sharing and teaching me something I didn't know you could do with CSS.

Would it be better to use the css border-image property? If you don't want to use images I guess you could embed svg in it. That should give you around 98% of all browser users according to caniuse.

Border image property with svg was one of the first approaches I tried and tried. It got about half way to about half the options and required more setup than just a single CSS file.

I got slightly further to what I wanted with border-mask, but still fell really far short.

Some of the biggest limits on both of those is: 1) the size definitions is only 4 numbers so same-edge corners share a dimension (reasonable but very limiting) 2) changing the color of the border required more effort than setting a css property 3) doing more than using a color was a no-go without hands-on svg work and dom insertion required. 4) applying it to a larger element meant the border got wider. You'd have to have separate svg parts for each width built in, which sucks.

It took almost a week before I realized I could do everything I wanted by using clip-path. As soon as I did though, I went all in. Clip path was the most work up front but resulted in the most possible options, the easiest setup, and the easiest general use. Borders and the inset are full-featured CSS backgrounds that support practically anything, the augs along the edge could have different positions with simple css properties, it scaled to any element without changing the border width or inset distance, and it all worked out of the box with a single CSS file added to your project.

Thank you for all the insight. I'll be sure to keep clip-path in mind.

Nice work.

I guess there is a mistake in documentation on website. When I hover on --aug-tr, --aug-bl

The description says, Top-left, Bottom-right clip augs. I It should be Top-right Bottom-left.

Fixed! Thank you very much!

Is it possible to have multiple clips on single side of border ?

There are 8 positions, top-left, top, top-right, right, bottom-right, and so on.

Each position can have an aug equipped so the left side could have 3.

If you mean like stacked, I suppose you could add extra dom elements inside and augment each layer as you wish to.

There isn't a way built in to put multiple different augs in a given position/slot.

If you have anything even as crude as an MS Paint mockup so I can better see what you mean, I'd be happy to take a look and consider it or let you know if it's possible as-is!

Cool, I will use it to rebuild my blog's layout.

Looks awesome! Could you add TLS redirect though?

Wow, nice work, thanks for doing this

This is really cool! I am actually more of a backend engineer though, and I use dashboard templates like you would find with bootstrap and then just tweak the template a bit to accept data from my backend. Are there any dashboards/consoles/portals/anything templates written with this augmented-ui that someone could just take and tweak what data populates it?

That's a really good opportunity for quality designers (not me lol).

It's only been 10 days since v1.0.0 released so I'm sure nobody's done that yet. But yeah, great idea, it could make them some money, hope it happens!

I'd definitely kick in money for this on KickStarter or whatever the appropriate platform for this is.

Reply on news.ycombinator.com