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

DEPRECATED: Due to compatibility issues, Pride filter is no longer supported as of 1.4.


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.


Blink

Blink is back! Apply theses classes to blink any element, even entire areas! Requires brutalist.js and start.brutalizing.js.

.blink

.blink-slow

.blink-fast

Here is a fast-blinking span and image:
Fast-blinking Image

.blink-182

Get Your Blinker Fluid NOW!
Blinker Fluid


Throb

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

Image Example

Original

Content Block Example
See how I throb!


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