top

download
Brutalist Framework

Tiles

Tiny templates for various element types

Tile MOLDS are tiny element templates using javascript and CSS, which are less commonly used than the standard core elements. In addition to the standard CORE elements, Tiles further extend your UI/UX with more complex elements.

Shapes

Shapes are simple CSS classes that can be applied to any element to make it into a shape. When floated left or right, a shape element can have content wrap around it.

REQUIRES:
core/molds/tiles/shapes.css

Multimedia

Multimedia tiles are used for displaying individual self-hosted audio, video, and GIF files. All multimedia Tiles require:

core/molds/tiles/multimedia.css
core/jab/jquery.3.js

Audio Player

A brutally simple responsive audio player.

REQUIRES:
core/jab/plugins/audio-player.js

Audio players use data attributes to specify a title and artist:
data-title: name of file
data-artist: name of artist / source

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

Video Player

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

REQUIRES:
core/jab/plugins/video-player.js

Video players use data attributes to customize their appearance:
data-skin: default, minimal or compact.
data-color(optional): custom hex color
data-title(optional): title of video
data-overlay: use value 1 or 2

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

GIF Player

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

REQUIRES:
core/jab/plugins/gif-player.js

Apply either of these classes to an img tag:
.gifplay: play upon click
.gifplay-h: play upon hover

Play Upon Click
Glitch KAT
Play Upon Hover
Glitchy Kitty

Navigation tiles are used for displaying navigation menus or link lists.

Megamenu

Megamenu is a responsive dropdown navigation menu template, ideal for larger websites with many pages. Unordered lists are used to create dropdowns. Lists with grandchildren will display a multi-column dropdown on screens larger than 943px.

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

DEMO

In the example below, the Categories dropdown should display a multi-column layout on larger screens, and a toggle single-column menu on smaller screens.

Markup

<div class="menu-container"><div class="menu">
 <ul>
  <li><a href="">Single Page</a></li>
  <li><a href="">Parent Page</a>
    <ul>
      <li><a href="">Child Page</a></li>
    </ul>
  </li>
  <li><a href="">Categories</a>
    <ul>
      <li><a href="">Category</a>
        <ul>
          <li><a href="">Sub-Category</a></li>
        </ul>
      </li>
    </ul>
  </li>
 </ul>
</div></div>

UI/UX

Below are some additional UI/UX plugins. All require the following:

core/molds/tiles/uiux.css
core/jab/jquery.3.js

Printer

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

REQUIRES:
core/jab/plugins/printer.js

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

Markup
<div class="printer">
  content...
</div>
<button onclick="printer();">Print</button>
<div class="headprint print-only"><h1>Header</h1></div>
<div class="footprint print-only"><p>Footer</p></div>

DEMO: 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.

Timeline

Timeline tiles are for displaying content in a timeline format (or as a process).

REQUIRES:
core/jab/plugins/timeline.js

Markup

Use the following markup to display a timeline:

<div class="timeline">
  <div data-tldate="Date Label" class="">
   ...content...
  </div>
</div>

NOTE: The data-tldate attribute can be any text and numeric string.

Additional classes can be applied to each Timeline item, for added / custom styling.

Options

These classes can be applied to the Timeline wrapper:

.timeline [default view]
.timeline-r [items start on the right]
.timeline-na [default view, no alternation]
.timeline-san [default view, items slide into view upon scroll down]
.timeline-r-san [items start on right, with slide animation]

Customize

To further customize the appearance, refer to these CSS classes:

.timeline-block [wrapper for Timeline items]
.timeline-date [span class for Timeline items]

Presenter

«
Presenter
pain

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

Presenter is fluid-width, so it will fit within any area. You can add as many slides as you want. By default, Presenter loops back to the beginning / end.

REQUIRES:
core/jab/plugins/presenter.js

NOTE: You'll need to make sure jQuery is loaded.

Code

Code markup is pretty straight forward:

<div class="presenter">
   <a href="#" class="slide-prev">«</a>
   <div class="slides">
      <div class="slide">...content...</div>
   </div>
   <a href="#" class="slide-next">»</a>
</div>
Specify Height

The presenter height needs to be specified. Use inline style to specify a height on the presenter element wrapper. Alternatively, you can apply any of these classes to the presenter outer wrapper:

.third-screen (33% height of screen)
.half-screen (50% height of screen)
.full-screen (100% height of screen)

Disable Auto-Loop

To disable the auto-loop, simply append -noloop to the outer wrapper, so that:

presenter-noloop

AutoPlay

To enable autoplay so that slides automatically advance to the next (every 5 seconds), simply append -autoplay to the outer wrapper, so that:

presenter-autoplay

Vertical Options

Slides can transition vertically. Use any of these classes as the outer wrapper:

.presenter-vertical
.presenter-vertical-noloop
.presenter-vertical-autoplay

»

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.

REQUIRES:
core/jab/plugins/exit-intent.js

DEMO

An Exit Intent popup should appear on this page when you move your cursor above the TOP of your browser window.

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>

Age Restrict

Some users may be too young to view brutally mature content, so age verification may be necessary. Age Restrict 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.

REQUIRES:
core/jab/plugins/age-restrict.js

View Demo »

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.

Cookie Consent

Due to GDPR compliance requirements, cookie consent bars are a necessity on many websites. Cookies are used to track user activity on a page. If cookies are "accepted" by a user, they are consenting to sharing data that may be collected by you or a third party. If a user does NOT click the "Accept" button in the Cookie Consent bar, cookies will NOT be enabled, preventing any session data from being collected.

REQUIRES:
core/jab/plugins/cookie-consent.js

DEMO

A cookie consent bar should appear at the bottom of only this page. As long as the the "Accept" button is NOT selected, the bar should remain visible, even if you leave and come back to it. If the cookies are accepted, the bar will disappear and remain hidden during each session.

Markup

Place the following before the closing body tag:

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

Initialize

Before the closing body tag, but after the required cookie-consent script is loaded:

<script>
  $(document).ready(function(){
    $(".cookie-consent").grtCookie({
     textcolor: "#333",
     background: "#FFCD69",
     buttonbackground: "#c40b14",
     buttontextcolor: "#fff",
     duration: 365,
    });
  });
</script>

NOTE: The duration is how long - in days - before the cookie expires.