top

download
Brutalist Framework

BFX

Brutal Effects

Brutalize elements with some CSS and javascript-based effects.

bos/core/css/bfx.css
$bfx_css

Text Effects

BAFFLE Text

REQUIRES:
bos/core/jab/bfx/baffle.js
$baffle_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:
bos/core/jab/jquery.3.js
$jquery3
bos/core/jab/plugins/tumbletext.js

$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:
bos/core/jab/bfx/choptext.js
$choptext_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.

Divisive Text

REQUIRES:
bos/core/jab/jquery.3.js
$jquery3
bos/core/jab/plugins/divisive-text.js
$divisive_text_js

Divide text elements in half, such as paragraphs and headings. Using the br tag, lines of text can alternate between two columns. This is a unique text layout effect for creating a distinctive typography block.

By default, the division gap is set in the middle of the parent element, so that each column is 50% wide. Division minority makes the first column 25% wide, and the second 75% wide. Division majority switches these values. The division gap has a default of 20px wide, which can be expanded to 96px (1 inch).

Classes

.divisive-text
.divisive-text-minority
.divisive-text-majority
.divisive-text-gap
.divisive-text-gap-minority
.divisive-text-gap-majority

Markup

<p class="divisive-text">Line 1<br />Line 2<br />Line 3</p>

The above markup will output:

Line 1
Line 2
Line 3

Divisive Text works with any text element, such as blockquotes, paragraphs, and h tags.


Styling

Divisive Text divides up text into div elements. Below is an example of custom CSS for the rendered element:

.divisive_right .divisive_line {
  background: #0000ff; color: #fff;
}
.divisive_left .divisive_line {
  background: #ff0000; color: #fff;
  border-right: 4px solid #8000ff;
}

In the following examples, we'll use the above custom CSS. We'll also apply various other classes to demonstrate some options.

.divisive-text

Divisive Text is a brutal way to
cause chaos and confusion
and bring disharmony to the republic

.divisive-text-minority

The minority
will never be supported nor accepted by the majority!!

.divisive-text-majority

The majority rules are often rejected by
the minority!!
REVOLUTION!

.divisive-text-gap

Divisiveness only causes hatred and disunity
which creates an ever-growing
G A P

.divisive-text-gap-minority

Minorities
are perceived as inappropriate by the majority.

.divisive-text-gap-majority

The majority will always cancel and reject
the minority.

FITTEXT

REQUIRES:
bos/core/jab/bfx/fittext.js
$fittext_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:
bos/core/jab/jquery.3.js
$jquery3
bos/core/jab/plugins/curvetext.js

$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:
bos/core/jab/jquery.3.js
bos/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:
bos/core/jab/jquery.3.js
bos/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