top

download
Brutalist Framework

BFX

Brutal Effects

Brutalize elements with some CSS and javascript-based effects.

core/css/bfx.css

Text Effects

BAFFLE Text

REQUIRES:
core/jab/bfx.js

Baffle adds an animated obfuscation effect to any text. Reload page to see effect. Apply these baffling 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

TumbleText

REQUIRES:
core/jab/jquery.3.js
core/jab/plugins/tumbletext.js

Tumble text characters either forward, backwards, or both! The tumble animation starts upon page load.

S M O K E
C H A R C O A L
C O N C R E T E

Classes
.tumbletext - apply to any text element
.forwards - tumbles all characters forward
.backwards - tumbles all characters backward
.mixed - combines both forward and backwards, alternating characters

EXAMPLE: .tumbletext.mixed

TIP: Make sure there is at least 1em of padding on the bottom of any parent element that contains tumbled text.

Text Shadow Effects

.brutal-text

.brutal-text-mono

.neon-text

.cellophane

.bitshadow

Chop Text

REQUIRES:
core/jab/bfx.js

Truncate a paragraph of text to a preset number of words. Even if there are a fewer number of words, an elipsis (...) will be appended to the end of the truncated text. Apply any of these classes to any text to truncate it:

.chop-8
.chop-16
.chop-32
.chop-64
.chop-128

Example: .chop-16

In this example, we wish to limit a paragraph of text to 16 words.

Lorem ipsum no facer prompta vim, movet ubique qui ei. Per no regione aliquid, ea mei nulla scribentur liberavisse. Vim cu tale ludus possit, discere suavitate nam ad. No verterem reprimique vix, phaedrum hendrerit an quo. Qui feugait apeirian ut, ne virtute numquam mandamus mea. Eos et enim dicant deterruisset.

Example: .chop-64

In this example, we wish to limit a paragraph of text to 64 words.

Lorem ipsum no facer prompta vim, movet ubique qui ei. Per no regione aliquid, ea mei nulla scribentur liberavisse. Vim cu tale ludus possit, discere suavitate nam ad. No verterem reprimique vix, phaedrum hendrerit an quo. Qui feugait apeirian ut, ne virtute numquam mandamus mea. Eos et enim dicant deterruisset.

FITTEXT

REQUIRES:
core/jab/bfx.js

Fittext makes any text aggressively responsive, and scales the text in proportion to the window width.

.fittext - Best scales text to fit within container.

Brutalist Framework 3

.fittext-c - Compress scaling of text size.

Brutalist Framework 3

.fittext-cc - Conservative compression of scaling text.

Brutalist Framework 3

.fittext-x - Expands scaling text aggressively.

Brutalist Framework 3

.fittext-xx - Extreme expansion of scaling text!!

Brutalist Framework 3

CurveText

REQUIRES:
core/jab/jquery.3.js
core/jab/plugins/curvetext.js

Warp your text into curves, spirals, circles, and waves! Works best on paragraphs. All are fully responsive. Apply these classes for these effects:

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

Animations

All animations are pure CSS, and are useful for drawing attention toward an element.

Glitch Effects

Add a glitch effect to any element! Works on images and text, or even entire areas! Simply apply the following class to any element:
.glitch

Glitched Circle Image Glitch Circle

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

.shift-glitch

shift-glitch is a more aggressive glitch effect than glitch.

Shift Glitch

.glitchtext

NOTE: .glitchtext works only on text.
You can also add -h to apply the effect upon hover.

Blink

Blink is back! Formerly known as the <blink> HTML tag, blink is now available as a CSS animation! Apply theses classes to blink any element!

.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

.strobe

Get Your Blinker Fluid!

Bouncy

Bounce any element by applying the following class:
.bouncy

TIP: The parent element containing the bounce element should be at least 200px.

Throb

Apply a throbbing, pulsing effect. It's CSS-based, so no javascript is needed. Simply apply this class to any element:

.throb

Original

.throb-throw

Original

Spin

Spin any element constantly. Apply these classes:

  • Spin Me Right Round
    .spin
  • Spin Me Backward
    .spin-r
  • Spin Me Faster
    .spin-fast
  • Spin Me Faster Backward
    .spin-r-fast
  • Spin Me Fastest
    .spin-xfast
  • Spin Me Fastest Backward
    .spin-r-xfast
  • Spin Me in a Cycle
    .spin-cycle

Rotate Text

Rotate Text is a jQuery plugin that rotates text within an element.

REQUIRES:
core/jab/jquery.3.js
core/jab/plugins/rotate-text.js

Markup

Rotate Text uses data attributes to configure the settings. You will need to apply a unique ID to each individual Rotate Text element. The markup is as follows:

<div id="rotate-text-1" class="rotator" data-rotate-interval="3000" data-rotate-animate="fadeIn,rollOut">
  /* element to render rotated text */
  <p class="rotate-arena"></p>
  /* specify list of rotated text */
  <ul>
   <li>First Text Phrase</li>
   <li>Second Phrase of Text</li>
   <li>Last Text Phrase</li>
  </ul>
</div>

data-rotate-interval
[3000 = 3 seconds until next rotation]

data-rotate-animate
[Animations use animate.css. Visit animate.style for reference.]

Example 1

Rotate text within a <span> element.

Brutalist Framework uses to Brutalize!
  • HTML5
  • CSS3
  • jQuery

Example 2

Rotate text within a header element, with fadeIn and fadeOut animation.

  • Crude and Harsh
  • Ugly, Unrefined, Uncomfortable
  • Cynical and Confrontational

Example 3

Rotating paragraph with data-rotate-animate left unspecified.

  • First text item.
  • I have no animation.
  • I'm extra chonky.
  • I change every 2 seconds.

Animated Backgrounds

Animated backgrounds are based purely on CSS. Apply any of these classes to any element:

.gathering

.fright-night

.heat

.pastelize

.shine

.neon

.earthly

.psychedelic

.infinitile

.swede-split

.brickbuild

This uses the --color1 and --color2 color variables.

.lcd-trip

.dotgrid-throb

Or, just .dotgrid to disable the animation.

Rumbler

Let's get ready to rumble!

REQUIRES:
core/jab/jquery.3.js
core/jab/plugins/rumbler.js

Brutalize any element by making it rumble! Simply apply the following classes to any element.

Stop Constant Rumble
By applying these classes together, users can stop a constantly rumbling element:
.rumble.strumble - rumble constantly, stop upon click
.rumble.sthrumble - rumble constantly, stop upon hover

Classes

.rumble
Constant rumbling!

.prumble
Pulse rumble, constantly

.drunk
Aggressive constant rumble

.hyper
Extra aggressive constant rumble

.trumble
Triggered rumble on click for only 1.5 sec

.hrumble
Rumble upon hover

.mdrumble
Rumble on mousedown

.caffeinated
Aggressive rumble on hover

Blenders

Blenders allow text or any other element to blend with its background.

NOTE: Apply only one class per element. Combining multple classes together isn't possible (except unblend).

Classes
.lighten-blend
.darken-blend
.hue-blend
.sat-blend
(saturation)
.lum-blend (luminosity)
.color-blend
.dodge-blend
.burn-blend
.diff-blend
(difference)
.exc-blend (exclusion)
.soft-blend (soft light)
.hard-blend (hard light)
.overlay-blend (inverted hard light)
.multi-blend (darkens element)
.screen-blend (lightens element)
.unblend (removes blend from current element)

In the example below, we use a blue box with white text and apply different blender classes to each.

.color-blend
Color Blend

 

.diff-blend
Difference Blend

 

.dodge-blend
Dodge Blend

 

.multi-blend
Multi-Blend

 

.exc-blend
Exclusion Blend

 

.screen-blend
Screen (Standard) Blend