Brutalist Framework

BELL

Brutal Extension Element Library


Enhance user experience with additional modules.

Getting Started

BELL is an extension element library for the purpose of adding optional functionality to your brutalist website!

There are three types of elements: media, interface, and content. These all require the following files to be loaded:

/core/bell/css/bell.css

/core/bell/js/bell.js

Media Elements

Audio Player

A brutally simple responsive audio player.

Markup

<audio class="baudio" data-title="" data-artist="">
  <source src="" type="audio/ogg">
  <source src="" type="audio/mpeg">
</audio>

Customize Colors
In your theme CSS file, refer to these classes to override default colors:
.baudio-wrap (background color)
.baudio-progress (background color)
.baudio-title (text color)
.baudio-artist (text color)


Gif Player

A simple plugin that allows the user to play / pause an animated GIF upon click or hover.

Play Upon Click

Apply class .gifplay directly to img tag.

Glitch KAT
Play Upon Hover

Apply class .gifplay-h directly to img tag.

Glitchy Kitty


Video Player

A brutally simple video player for self-hosted videos, with fullscreen viewer.

Markup

<video src="" poster=""
  data-title=""
  data-skin="default"
  data-overlay="1"
  data-color="#ff0000">
</video>

Data Variable Options
src - path to video file
poster - (optional) path to placeholder image
data-title - (optional) title of video
data-skin - choose from: default, minimal, or compact.
data-overlay - (optional) values: 1 or 2
data-color - (optional) custom hex color for controls


Interface Elements

Megamenu

The menu used across this site is a megamenu interface element. It supports multiple child pages, and is compatible with most standard dropdown menus.

Markup
Simply take a look at the source code on this page, because we're too lazy to write it out here.


Printer

The printer plugin makes a specific element easily printable, with a custom header and footer.

Classes

.printer - wrap content to be printed within this class

.headprint - (optional) content to displayed as header

.footprint - (optional) content to displayed as footer

button onclick="printer();" - button to launch printer interface.


PUC (Print Utility Classes)
.print-only - content is only displayed when being printed, but is hidden on screens

.screen-only - content is hidden from being printed, and is only visible on screens

.print-monochrome - applied only to print view, all text is black, and images are rendered in grayscale

Example: Hit the "Print Now" button to print this section.

Text To Print

Aliquam faucibus luctus quam a placerat. Donec sit amet cursus ante. Nunc volutpat hendrerit orci non viverra. Nam iaculis vitae risus vel interdum. Phasellus tempus odio ac lectus efficitur, in porta ante vulputate. Suspendisse lobortis sem ligula, non pulvinar lectus dictum ut. Ut eu mi vitae felis semper placerat. Proin eget ante facilisis, faucibus ipsum mattis, volutpat libero. Curabitur tincidunt ex sit amet tellus tincidunt interdum a eget ipsum.

This text will NOT be printed.

Sed volutpat volutpat ligula at placerat. Integer ut hendrerit arcu. Praesent id massa et turpis laoreet dictum a laoreet justo. Donec semper magna nec sapien lobortis, tincidunt auctor nunc efficitur. Nullam in massa dictum, hendrerit sem et, lacinia odio.


Exit Intent

Users may choose to leave your page without taking any action (such as clicking on something, viewing a video, or filling out a form). You may wish to make a last-ditch effort to get your visitors to interact with your page and become a potential lead or even a conversion. Visitors may try to "exit" the page by closing the tab or browser.

Exit Intent displays a popup with content when the user moves their mouse out of the window. This can be your last-chance effort to get them to take some sort of action.

Markup

<div id="unique-id" class="ei-popup" style="display: none;">
  <div class="ei-close" onclick="$.stick_close()">X</div>
  <div class="ei-content">
...content...
  </div>
</div>

Initialize

<script>
 $(document).ready(function(){
  $.stickToMe({
   layer: '#unique-id'
 });
});
</script>
Live Example »


Content Elements

Timeline

Create a responsive vertical timeline. Ideal for showing a simple process flow chart or event timeline!

Brutalist Framework is Born

Brutalist Framework was created in early 2017 by Brad Fogelstrom in response to the emerging brutalist web design trend.

Markup

Very simple markup. You can put any type of content within each content item. The data-tldate attribute is optional.

<div class="timeline">
   <div data-tldate="whatever">
      ...content...
   </div>
</div>
Options

Timeline classes:
.timeline - default view.
.timeline-r - first item aligned on the right
.timeline-na - no alternation (all items on same side)
.timeline-san - default view with slide-in animation upon scrolling
.timeline-r-san - right-align with slide-in

Customize

Add a little Flavor simply by applying classes! Be as creative and colorful as you want!

BF version 69 Released

Future 2049
A brutal image caption.


Presenter

Presenter is a touch-enabled, swipe-friendly content slider! Ideal for displaying presentational content.

«
MONEY!

You'll get super-duper stupid rich from all the fucking brutal websites you'll build with BF.

hottie
Fasionable!

Get a cynical look with our latest avant-garde designs!

Shop Now »

Defaults

Code

Code markup is pretty straight forward:

<div class="presenter-wrap">
   <a href="#" class="slide-prev">«</a>
   <div class="presenter">
      <div class="pslide">...content...</div>
   </div>
   <a href="#" class="slide-next">»</a>
</div>
Vampire
Vampires

They're everywhere, they are amongst us, and they're offering immortality.

Get Turned Today!

Beauty
Beauty Club

Save BILLIONS on beauty products by joining our exclusive club!

Join Now

»


PISS

Paginated Inline Synchronous Search

Sometimes when you have many content items in a very long list, you just need to PISS on it and make it into a searchable paginated interface!

Markup

<div class="piss-grid" id="unique-id">
  <div class="piss-item">..content 1..</div>
  <div class="piss-item">..content 2..</div>
  ...
</div>

Initialize

<script>
$(document).ready(function () {
  $(".piss-grid").hip({
   itemsPerPage:12,
   itemsPerRow:3,
   itemGaps:'20px',
   filter:true,
   filterPos:'center',
   paginationPos:'center'
  });
});
</script>

TIPS
+ Images can be searchable by applying the alt attribute.
+ Numbers and any text are findable
+ Items have a minimum height of 120px

DEMO
In the search field below, start typing and see what results come up! For example, try searching "models". At least 2 items should be displayed.

Sweden
Win a trip to Stockholm!
Ireland
Land of the redheads!
Models
Gelora
Finances

Investments, stocks, bonds

Vampires
vampire
are everywhere!
Models
Ice Cream Flavors!
READY!
9th block is ready to customize.
BBQ Bonfire!
Content 11
Content 12
Content 13
Content 14
Content 15
Content 16
Fashion Model
Beauty Model
Content 19
Twenty Items
Content 21
Content 22
Content 23
Content 24
Content 25
Content 26
Content 27
Content 28
Content 29
Content 30


BISCUIT

Brutally Integrated Security & Consent User Interface Tool

BISCUIT is an additional BELL component that is intended to help create a layer of security for your projects.

Age Verify

Some users may be too young to view brutally mature content, so age verification may be necessary. Age Verify displays a popup that requires the user to enter their birth date. If the user is old enough, they are permitted to view the page (or redirected to another). If they are too young, they are blocked from viewing the page, or are redirected to another page.

Step 1: Load Scripts

/core/bell/css/bell-biscuit.css

/core/bell/js/biscuit/age.js

Step 2: Initialize

<script>
 $(document).ready(function(){
  $.ageCheck({
    minAge: 18,
    title: 'Age Verify',
    copy:'Must be 18 or older',
    redirectTo:'',
    redirectOnFail:'',
    underAgeMsg:'Not old enough!'
 });
});
</script>

VARIABLES
minAge - numeric age value user must be
title - text string for popup title
copy - text string for popup message
redirectTo - (optional) URL to re-direct to if old enough
redirectOnFail - (optional) URL to redirect to if too young
underAgeMsg - Text to display if too young.

Live Example »


Cookie Consent

Due to GDPR compliance requirements, cookie consent bars are a necessity on many websites.

Simply load the following:

/core/bell/css/bell-biscuit.css

/core/bell/js/biscuit/cookie.js

Markup

<div class="cookie-consent">
  <p>...text...</p>
  <span class="cookie-btn">ACCEPT</span>
</div>

EXAMPLE TEXT:
"We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you accept and understand our Privacy Policy, and our Terms of Service."

Live Example »


PageLock

Some users may try to download images or other media on your page by right-clicking on elements. Hackers may also use right-click to view the page source code, and therefore could potentially exploit the code for malicious purposes. PageLock is a simple script you can load that prevents the ability to right-click. Simply load the following script to activate PageLock:

/core/bell/js/biscuit/pagelock.js

NOTE: Even with PageLock enabled, it is still possible for hackers to use developer browser consoles to exploit code. If you wish to only protect images from being downloaded, the core includes a .guard class that can be applied to images. This will "protect" them from being downloaded via right-click.

BELL
Back to Top ↑
Brutal Blast /////

Subscribe to our e-newsletter. »

A Pine Creative Labs production

Developer: Brad Fogelstrom

Brutalist Framework © 2020

Download
version 2.1