🏠 Go home.

Augmented UI is a cool cyberpunk inspired CSS toolkit

Published on


Augmented UI is a cool CSS framework which allows you to build cyberpunk-aesthetic interfaces with some simple CSS and HTML attributes. I am pairing this with Foundation CSS's grid system and UI kit, mostly because I'm too lazy to learn anything else right now, and it fits my needs.

<section class="grid-x callout aug" augmented-ui="exe l-clip-y br-clip-y tr-clip-y">
            <p class="cell small-10">A modern take on the User Agent.</p>
            </section>

            <section class="grid-x success callout aug" augmented-ui="exe l-clip-y br-clip-y tr-clip-y">
            <p class="cell small-10">A modern take on the User Agent.</p>
            </section>

            <section class="grid-x warning callout aug" augmented-ui="exe tr-clip-y b-clip-x tl-round bl-clip-y br-round">
            <p class="cell small-10">Current Task over-clocked by one hour!</p>
            </section>

            <section class="grid-x alert callout aug" augmented-ui="exe tl-rect r-clip-y bl-clip-y b-clip-x t-clip-x">
            <p class="cell small-10">Fatal error processing data link.</p>
            </section>

            <section class="grid-x callout aug rounded" augmented-ui="exe tl-clip tr-round bl-round br-clip">
            <p class="cell small-10">A modern take on the User Agent.</p>
            </section>
          

Obviously there is some room for standardization, and so those augmented-ui attributes I can extract in to view helpers.

Styling them consistently with CSS is similarly straightforward:

.aug.callout {
                  --aug-bl-height: 0.5em;
                  --aug-bl-width: 25%;

                  --aug-br-width: 0.5em;
                  --aug-br-height: 18%;
                  --aug-tr-width: 0.5em;
                  --aug-tr-height: 18%;

                  --aug-tl: 1em;

                  --aug-bl-width: 0.5em;
                  --aug-bl-height: 50%;

                  --aug-l-height: 75%;
                  --aug-l-width: 0.5em;

                  --aug-r-height: 75%;
                  --aug-r-width: 0.5em;

                  --aug-t-width: 75%;
                  --aug-t-height: 1em;

                  --aug-b-width: 25%;
                  --aug-b-height:0.5em;
                  --aug-b-origin-x: 25%
                  }

                  .aug.alert {
                  --aug-b-origin-x: 75%;
                  --aug-t-origin-x: 35%;
                  --aug-t-width: 25%;
                  }

                  .aug.rounded {
                  --aug-tl-width: 1em;
                  --aug-tl-height: 1em;
                  --aug-br-width: 1em;
                  --aug-br-height: 1em;
                  }

I want to inject some random-ness which I need to think about, a helper which inserts a random CSS class on the divs when they load.

Respond to this note:

Ryan Rix is a privacy rights advocate and net-art wannabe. Reach them on the Fediverse as @rrix@cybre.space, twitter as @rrrrrrrix, via email to ryan@whatthefuck.computer or on Facebook or on Matrix as @rrix:whatthefuck.computer.