Brutalist Framework


Brutal Effects

Brutalize elements with some javascript-based effects.


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


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







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


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


Bezier Text allows you to create curvy responsive text!


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


Wave Text allows you to create a responsive wave of 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.


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





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


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.


Apply a throbbing, pulsing effect. It's CSS-based, so no javascript is needed. Simply apply the class .throb to an element.

Image Example


Content Block Example
See how I throb!


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.


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



Version 1.2