5 ms·

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

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 https://i.imgur.com/yY66cdv.png and https://i.imgur.com/A2Pyeur.png 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 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 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 https://www.npmjs.com/package/augmented-ui Happy to answer questions! <3 Get augmented! ;)

atemerev 7y ago
“high tech, low effort” — brilliant!
- James0x57 7y ago
  Thanks! ^_^
tgirod 7y ago
thank you so much for this. I'm currently organizing a Cyberpunk LARP, and I'm sure augmented-ui will be very useful!
- James0x57 7y ago
  ahh that's so cool! Have fun! I'd love to see what you build if you make it public at all!
- lsiebert 7y ago
  If it's in the SF bay area, I'd totally play in a cyberpunk larp
bonnow 7y ago
Cool, I will use it to rebuild my blog's layout.
scoobyyabbadoo 7y ago
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?
- James0x57 7y ago
  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!
  - scoobyyabbadoo 7y ago
    I'd definitely kick in money for this on KickStarter or whatever the appropriate platform for this is.
rtcoms 7y ago
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.
- James0x57 7y ago
  Fixed! Thank you very much!
  - rtcoms 7y ago
    Is it possible to have multiple clips on single side of border ?
    - James0x57 7y ago
      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!
liopleurodon 7y ago
Wow, nice work, thanks for doing this
d6e 7y ago
Looks awesome! Could you add TLS redirect though?
hanniabu 7y ago
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.
- teknopaul 7y ago
  Ditto in firefox mobile. Parts of text not readable
  - James0x57 7y ago
    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
    - hanniabu 7y ago
      Assuming the site was built with the library, then this seems like an issue pertaining to the project and not the website.
      - James0x57 7y ago
        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.
vanderZwan 7y ago
This probably deserves to be added to awesome-quirks, especially since it's pure CSS :) https://github.com/dsalaj/awesome-quirks/ https://github.com/dsalaj/awesome-quirks/
t0astbread 7y ago
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!
maaaats 7y ago
> 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?
- James0x57 7y ago
  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!
  - throwawaytoday5 7y ago
    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.
soulofmischief 7y ago
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.
waylandsmithers 7y ago
This is fantastic. Thank you for sharing and teaching me something I didn't know you could do with CSS.
hiccuphippo 7y ago
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.
- James0x57 7y ago
  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.
  - hiccuphippo 7y ago
    Thank you for all the insight. I'll be sure to keep clip-path in mind.

atemerev 7y ago

“high tech, low effort” — brilliant!

James0x57 7y ago
Thanks! ^_^

tgirod 7y ago

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

James0x57 7y ago
ahh that's so cool! Have fun! I'd love to see what you build if you make it public at all!
lsiebert 7y ago
If it's in the SF bay area, I'd totally play in a cyberpunk larp

bonnow 7y ago

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

scoobyyabbadoo 7y ago

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?

James0x57 7y ago
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!
- scoobyyabbadoo 7y ago
  I'd definitely kick in money for this on KickStarter or whatever the appropriate platform for this is.

rtcoms 7y ago

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.

James0x57 7y ago
Fixed! Thank you very much!
- rtcoms 7y ago
  Is it possible to have multiple clips on single side of border ?
  - James0x57 7y ago
    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!

liopleurodon 7y ago

Wow, nice work, thanks for doing this

d6e 7y ago

Looks awesome! Could you add TLS redirect though?

hanniabu 7y ago

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.

teknopaul 7y ago
Ditto in firefox mobile. Parts of text not readable
- James0x57 7y ago
  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
  - hanniabu 7y ago
    Assuming the site was built with the library, then this seems like an issue pertaining to the project and not the website.
    - James0x57 7y ago
      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.

vanderZwan 7y ago

This probably deserves to be added to awesome-quirks, especially since it's pure CSS :) https://github.com/dsalaj/awesome-quirks/ https://github.com/dsalaj/awesome-quirks/

t0astbread 7y ago

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!

maaaats 7y ago

> 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?

James0x57 7y ago
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!
- throwawaytoday5 7y ago
  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.

soulofmischief 7y ago

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.

waylandsmithers 7y ago

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

hiccuphippo 7y ago

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.

James0x57 7y ago
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.
- hiccuphippo 7y ago
  Thank you for all the insight. I'll be sure to keep clip-path in mind.