Brutalist Framework

BFX

Brutal Effects

Brutalize elements with some javascript-based effects.

BAFFLE

Baffle adds an animated obfuscation effect to any text. Reload page to see effect.

Classes:

.baffle - Baffles once upon page load.

.baffle-longer - Baffles once, but for a longer duration (3 seconds).

.baffle-prolonged - Baffles for a prolonged period.

.baffle-forever - .baffle-forever - Baffles endlessly.


FITTEXT

Fittext makes any text aggressively responsive. Re-size your browser window to see them scale!

.fittext - Best scales text to fit within container.

Brutalist Framework

.fittext-compress - Increases compression.

Brutalist Framework

.fittext-uncompress - Decreases compression.

Brutalist Framework

Below are fittext classes that are ideal for H1 - H6 tags.

.fittext-h1

.fittext-h2

.fittext-h3

.fittext-h4

.fittext-h5
.fittext-h6


CURVED TEXT

Warp your text into curves, spirals, circles, and waves! Works best on paragraphs. All are fully responsive.

.arc-text

Arc Text allows you to create a responsive arch of text!

.bezier-text

Bezier Text allows you to create curvy responsive text!

.circle-text

Circle Text allows you to create a responsive circle of text!

.wave-text

Wave Text allows you to create a responsive wave of text!

.spiral-text

Spiral Text allows you to become sucked into another dimension! It is fully responsive, too!


Equal Heights

Equal heights makes boxes the same height within a multi-column layout. In the example below, notice how all 3 column boxes have the same height.

.equal-height

Column One
This box has 2 lines of text

Column Two
This box has several lines of text.
Some small text.
Another small text line.

Column Three
This box has 2 lines of text


Pride Filter

Got pride? Add a rainbow color filter to any image! Apply the class .pride to the img tag. To apply to multiple images, simply wrap them within a div with the pride class.

NOTE: Pride filter requires a live server to work.

Original Image

Original

.pride

Prideified


Glitch

Add a glitch effect to any element! Works on images and text, or even entire areas! It is entirely CSS-based. Apply .glitch class to any element.

Glitched Circle Image

Original

Glitched Paragraph

This is a rather glitchy paragraph. You could even baffle all your firking enemies!

This paragraph has just one glitched word, using the span tag.


Clip-Box

Clip-Box allows you to apply a custom background image to any text!

.clip-box - Outer wrapper for area to contain text with background image.
.clip-box-cover - Makes the background image fluid

Apply Background Image: Create a custom class in the theme CSS file, and specify the background-image url.

DEMO 1: Clip-Box text in a vanilla-cherry-gradient container.

Clip-Box

DEMO 2: Clip-Box text inside a custom cover image area (stacks are needed for this).

Clip-Box

Download

Version 1.1