Brutalist Framework


Base User Interface & Experience

Elements for a brutal user interface and experience.



Basic forms are supported. It is possible to apply classes from other components, such as Flavors and BUTCH classes.

You could use Blueprint Grid to create a custom layout for your form. This can be done within the form tag, and it is possible to nest layouts.

Use this class to add vertical spacing above and below a group of form elements.

An input or entire form can be "highlighted" when the user focuses on (interacts with) an input. Simply apply the .highlight class to the area that is to be highlighted.

Duplicate Fieldset Input


Copy all input fields (including select options) from one fieldset to another when a checkbox is checked.

NOTE: This feature uses unique IDs, so it can only be used once per page.

fieldset id="copyFrom"
fieldset id="pasteTo"

Checkbox input with

Use this method to copy inputs to hidden fields!

Billing Address
Shipping Address

Date / Time Picker


A date / time picker can be added simply by applying a class to a text input field!

Add a text input and apply any of these classes:
.datepick - m/d/y
.datetime - m/d/y h:m am/pm
.datepick-euro - d-m-y
.datetime-euro - d-m-y h:m am/pm
.datepick-full - Day, Month XX, YYYY
.datetime-full - Day, Month XX, YYYY h:m am/pm

Inline Picker
To display the picker inline (beneath the text input), simply apply the following data-attribute to the text input tag:


To create a button, simply use the button tag, or apply .btn class to a link. Buttons are displayed as an inline block, by default.



To make a button take up the full width of a container, apply this class:

Simple Menu

A pure CSS menu that displays an optional description upon hover over each item.


<ul class="simple-nav">
   <li><a href="#">List Item
   <span class="desc">Description text</span></a>

Tree List


Create a nested tree list menu for unordered lists. Child items can be toggled. Each parent item will need to be wrapped in a span with class of parent. Unlimited child levels are supported.


<ul class="tree-list">
  <li><span class="parent">Parent Item</span>
    <li>child item</li>

Tree List Demo

  • Category 1
    • Child 1
    • Child 2
    • Child 3
      • Grandchild 1
      • Grandchild 2
      • Grandchild 3
        • Descendant 1
        • Descendant 2
        • Descendant 3
  • Category 2
    • Sub-Category 1
    • Sub-Category 2
  • Category 3 (no children)



Create a list of items within a pagination interface. Show 5, 10, 15, 20, or 25 items per page. Wrap the pagination interface within container with class .paginate-X, where X is either 5, 10, 15, 20, or 25.


<div class="paginate-X">
  <div class="items">
    <div>item 1</div>
    <div>item 2</div>...
  <div class="pager">
    <div class="firstPage">first</div>
    <div class="previousPage">prev</div>
    <div class="pageNumbers"></div>
    <div class="nextPage">next</div>
    <div class="lastPage">last</div>

Default View

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 13
Item 14
Item 15

Sticky Stacks

Sticky Stacks are elements that use fixed positioning (sticky) and are set to a z-index (stacks).

Sticky elements are used to fixed position an element:
.glued [sticky positions element at top of container]
.sticky [fixed positions an element]
.sticky-b [fixed position at bottom]
.sticky-b-r [fixed position at bottom-right]
.sticky-b-l [fixed position at bottom-left]
.sticky-t [fixed position at top]
.sticky-t-r [fixed position at top-right]
.sticky-t-l [fixed position at top-left]

Stacks set an element to a z-index layer. Use any of these classes:
.stack-b [lowest z-index using --base variable]
.stack-l [low z-index using --low variable]
.stack-m [middle z-index using --mid variable]
.stack-h [high z-index using --high variable]


Thumbnails allow you to display a list of images at a reduced size. Useful for galleries. Wrap img tags within a container with any of these classes:








TIP: These classes can also be applied directly to the img or picture tags.


<div class="size-thumb">
   <img src="URL" /> 
   <img src="URL" /> ...

Cropped Thumbnails

Make all thumbnails into a square (regardless of their original dimensions) by applying the .crop class in conjunction with any of the thumbnail classes!

Circle Thumbnails

Make all thumbnails into a circle! Apply the .circle class in conjunction with .crop and any thumbnail size class:


Interactions are elements that enhance user experience.

Cursors & Resizeable Elements

Make any element have a specific cursor type, or make any element rezizeable by the user!

Cursor Classes

Apply these classes to any element. Hover for preview.

Resize Elements

Apply these classes to make any element resizeable by the user.

Resize the element both vertically and horizontally.
Resize the element horizontally only.
Resize the element vertically only.

Preview Hover


Add hoverable video and image previews to any element.


Markup is simple! Simply apply the class .ph and a data-src attribute, like so:

<element class="ph" data-src="./file-url"></element>

Supported File Types: .jpg, .jpeg, .png, .ico, .gif, .svg, .bmp, .webp, .mp4, .webm

Demo: Hover over each of the elements below.

   Blinker Fluid



Reveal.hover reveals hidden content upon hovering over an element!

The reveal container starts at a maximum width of 50% of the container it is wrapped within, and enlarges to 100% width upon hover while also revealing a caption.

.reveal (wrap content within this class)
   .secret (hidden content to be revealed upon hover)

Hover Over Me!


SECRET - only visible upon hover!


Reveal.toggle toggles content upon clicking on a label.

Draggable Elements


Make any element draggable! Simply apply the class .draggable to any element.

Draggable Modals
Make a modal draggable just by adding the class draggable to the modal inner wrapper:

DEMO: Draggable Bricks

In the example below, we have two draggable brick elements, which can be dragged anywhere, including outside of the bricks container.

Drag Me

move me

CDP: Content Display Picker


Display content when an option is selected.

<div class="cdp-wrap" id="unique-id">
  <select class="cdp_select">
    <option value="0">Content 1</option>
    <option value="1">Content 2</option>
    <option value="2">Content 3</option>...

  <div class="content">
    <div class="cdp-element" data-option="0">
...Option 1 Content...</div>
    <div class="cdp-element" data-option="1">
...Option 2 Content...</div>
    <div class="cdp-element" data-option="2">
...Option 3 Content...</div>
Win a trip to Ireland!
Win a trip to Sweden!
Win a Beer Party!



Load more list items upon button press!

Simply create a list of div, p, li or article elements, wrapped within a .b-loader class container!

By default, b-loader displays 5 items at a time. This can be modified in the start.brutalizing.js initialization script.

To hide the counter within the "load more" button, add the class no-counter to the b-loader wrapper.

List Item 1
List Item 2
List Item 3
List Item 4

List Item 5 (Paragraph)

List Item 6
List Item 7
List Item 8
List Item 9

List Item 10 (Paragraph)

List Item 11
List Item 12
List Item 13
List Item 14
List Item 15
List Item 16
List Item 17
List Item 18
List Item 19

List Item 20 (Paragraph)

List Item 21
List Item 22
List Item 23
List Item 24
List Item 25
List Item 26
LAST List Item 27


Modals are popup boxes that open when a user clicks on a link. There are two types of Modals: Vanilla and Lite.

Vanilla Modals


Vanilla modals use plain vanilla javascript (no dependencies). Display a modal with any type of content. Users can close the modal either by clicking anywhere outside of it, or the X in the top right corner. There are three components that are needed.

STEP 1: Create Modal Content

Wrap your content within this markup. This is what will be displayed within the modal. NOTE: Content will need to be set to a max-width.

<div id="unique-modal-id" style="display: none;">



STEP 2: Initiate Modal Box

This only needs to be included ONCE on the page. It loads the modal content within it. Place this after the main body content, but before any script tags.

<div class="modal">
 <div class="modal-inner">
  <span data-modal-close>×</span>
  <div class="modal-content"></div>

STEP 3: Launch Modal

Simply create a link with a unique ID and data-modal-open attribute to launch the modal.

<a href="unique-modal-id" data-modal-open>Open Modal</a>

Lite Modals

Pure CSS modals for simple and lightweight content!

Create Modal Content

Wrap your content within this markup.

<div id="unique-id" class="modal-lite">
  <a href="javascript:history.go(-1)" class="close">&#10006;</a>
  <div class="modal-content">
    <div class="header">..heading..</div>
    <div class="body">
    ..body content..
    <div class="footer">..footer..</div>

Launch Modal

Just link to the corresponding unique ID!

<a href="#unique-id">Launch Modal</a>


Lite Modal Fullscreen Lite Modal

By default, no backgrounds or other colors are applied. Apply any flavors classes as necessary to any of the modal elements.

Closing Modals
Optionally link the modal footer button to a unique ID within the page, so the user is returned to a specific point on the page.

To create a fullscreen modal, apply the class .full to the .modal-content container.

Ideal for fullscreen modals, make the modal body content vertically scrollable by applying the class .scroll-y to the .modal-content .body container.


Pure CSS Tabs!

Comprehend Brutalism These tabs are purely CSS-based, and use variables to control the default colors.

Multiple groups of tabs can be placed on the same page.

Tab with Custom Layout

This tab has a 2-column layout using the flexbox.

Column 2


<div class="tabs"> /* outer wrapper */
/* Tab 1 */
   <input type="radio" name="tabgroup1" id="tab1" checked="checked">
   <label for="tab1" class="">Tab One</label>
   <div class="tab">
/* Tab 2 */
   <input type="radio" name="tabgroup1" id="tab2" checked="checked">
   <label for="tab2" class="">Tab One</label>
   <div class="tab">

Tab Group #2

This is the 2nd set of tabs on this page. Below is a 2-column justified paragraph:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Customized Tabs

When applying custom CSS to a specific group of tabs, specify styles according to their group name:

/* tabs */
.tabs input[name="groupname"] + label {}
/* selected tab */
.tabs input[name="groupname"]:checked + label {}
/* tab content */
.tabs input[name="groupname"]:checked + label + .tab {}