Proxima

Proxima is a SCSS library that will let you cyberpunkify your site.

About

Proxima is a library of classes and accompanying mixins to use to give your site a cyberpunk look and feel. This site is a demonstration of everything in the library. For full the documentation and code examples, checkout the github repository.

How To Use

Being a SASS library, you will need to be using SASS in your project in order to use Proxima. You will need to use the import (depracated) keyword or the use keyword to get the source file into your own stylesheet. Simply download the scss file from github and 'use' it. Have fun!

Lines

There are five lines to use as accents on text. These lines all use the before pseudo element so that the after pseudo element is avaiable for other things like the cursor effects in the Text section. There are also two glitch class for these lines, one that flips the line and one that displays the "wrong" line.

Standard Lines

.p-underline-1 .p-underline-2 .p-underline-3 .p-underline-4 .p-underline-5

Line Glitches

.p-underline-1.p-flip .p-underline-1.p-bungle-1 .p-underline-2.p-bungle-2 .p-underline-3.p-bungle-3 .p-underline-4.p-bungle-4 .p-underline-5.p-bungle-5

Mixins to use

There's only one mixin for the lines which will take in the color and the distance between line and the text. @include underline($line-color, $line-height);

Buttons

Proxima has three different button variations and two different glitch classes, one that is always glitching and one that glitches on hover. Below are examples of how the classes work with anchor elements and button elements as well as what how the glitch animations look and feel.

Anchor Elements

.p-btn-1 .p-btn-2 .p-btn-3

Button Elements

Button Glitches

Mixins to use

There's once again only one mixin for buttons which will set the color and the hover color of the buttons. @include button-bg($bg-color, $bg-color-hover);

Boxes

The box classes give any your elements a cyberpunk-esque border. Don't forget to set you border color when using these classes!

.p-box-1

.p-box-2

.p-box-3

.p-box-4

.p-box-5

Mixins to use

There are no mixins for the box classes. You just use set the border-color in your stylesheet.

Cutouts

Cutouts are a set of classes that are basically the reverse of the boxes. Instead of an outline, the element will have a background fill. Don't forget to set a background color when using these classes!

.p-cutout-1

.p-cutout-2

.p-cutout-3

.p-cutout-4

.p-cutout-5

Mixins to use

There are no mixins for the cutout classes. You just use set the background color in your stylesheet.

Text

Hyper Text

The Hyper Text class applies a tri-color overlay to an element. It uses a data attribute called "data-hypertext" which should have the same value as the innerHTML and uses pseudo elements to create the glitching effect.

.p-hypertext

Cursors

These classes will use the after pseudo-element and create a blinking cursor after some text.

.p-cursor-underline .p-cursor-line .p-cursor-block

Mixins to use

For text classes, there is a single mixin that is used for the hypertext. The mixin takes in three colors that are applied to the glitch effect. @include hypertext($color-1, $color-2, $color-3);

Trims

These are the most complicated classes to use of the library. It's recommended to give the trim elements another class (i.e. p-odd) then pass them all the corresponding mixin. Then the "other" non-trim elements can get a class like p-even to be styled all at once.
The last element will need the p-trim-bottom class and will accept the trim mixin.

.p-trim-1.p-odd

.p-even

.p-trim-2.p-odd

.p-even

.p-trim-3.p-odd

.p-trim-bottom

Mixins to use

There is one mixin to use for the trims. You pass it a background color, the before pseudo element color, the after pseudo element color, and the text color. @include trim-colors($bg-color, $before-color, $after-color, $text-color)

Other Goodies

General Glitches

.p-glitch

.p-glitch-hover

Fast Glitches

.p-glitch-fast

.p-glitch-faster

Slow Glitches

.p-glitch-slow

.p-glitch-slower

Background Texture: Dotted

.p-dotted

Background Texture: Crossed

.p-crossed

Background Texture: Connected

.p-connected

Mixins to use

There are three mixins for the goodies section, each pertaining to their respective background textures.

For Dotted: @include dotted($dot-color, $size);
For Crossed: @include crossed($cross-color, $size);
For Connected: @include connected($line-color, $dot-color);

! Note: You MUST use an RGBA value for these three mixins.