3 ms·

> 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.
  - James0x57 7y ago
    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.
  - carti 7y ago
    CSS Secrets: Better Solutions to Everyday Web Design Problems (written by Lea Verou) covers a variety of interesting techniques along these lines.

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.
- James0x57 7y ago
  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.
- carti 7y ago
  CSS Secrets: Better Solutions to Everyday Web Design Problems (written by Lea Verou) covers a variety of interesting techniques along these lines.