BELL
Brutal Extension Element Library
Enhance user experience with additional modules.
Enhance user experience with additional modules.
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
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)
A simple plugin that allows the user to play / pause an animated GIF upon click or hover.
Apply class .gifplay directly to img tag.
Apply class .gifplay-h directly to img tag.
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
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.
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.
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.
Footer print test
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 »
Create a responsive vertical timeline. Ideal for showing a simple process flow chart or event timeline!
Brutalist Framework was created in early 2017 by Brad Fogelstrom in response to the emerging brutalist web design trend.
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>
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
Add a little Flavor simply by applying classes! Be as creative and colorful as you want!
A brutal image caption.
Presenter is a touch-enabled, swipe-friendly content slider! Ideal for displaying presentational content.
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.
Investments, stocks, bonds
FREE EVENT!
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.
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.
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."
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.
