Brutalist Framework


Brutal User Interface Experience

Elelments for a brutal user interface and experience.


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

Special Button Classes

To add weight and sizing to a button, apply these classes.

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


To remove the rounded corners from a button, apply this class:



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

In this example, we apply some Flavors to the email input, and have made the text larger by applying the class .bigger.

You can use the 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.


Make any element fixed positioned. Apply these classes:

.sticky - Makes any element fixed positioned.
.sticky-bottom - Fixes element at bottom
.sticky-bottom-right - Fixes element to bottom right corner of display
.sticky-bottom-left - Fixes element to bottom left corner of display
.sticky-top - Fixes element at top
.sticky-top-right - Fixes element to top right corner of display
.sticky-top-left - Fixes element to top left corner of display


Stack an element behind or on top of others. Apply these classes:

.stack-base - Forces layer to 0.
.stack1 - Layer 1.
.stack2 - Layer 2.
.stack3 - Layer 3.
.stack4 - Layer 4.
.stack5 - Layer 5.
.stack6 - Layer 6.
.stack7 - Layer 7.
.stack8 - Layer 8.
.stack9 - Layer 9.
.stack-middle - Layer 29.
.stack-high - Layer 49.
.stack-top - Layer 99.

Apply this class to automatically increment the z-index value - starting at 0 - for every element that uses this class. Requires start.brutalizing.js.

EXAMPLE: This examples shows a 2-layer box, using nested divs. The outermost div acts as the base layer, as the z-index is at 0.

Base Layer

z-index = 0

Layer 1

z-index = 1

Sticky Stack Example

In the top right corner of this page, you should see a skewed circle image inside an orange-cream box. It should always be visible and overlapping all content as you scroll down the page.



To create a list of tags, simply apply the class .tags to an unordered list.

  • Brutalist
  • Architecture
  • Framework

Tag list with links, with additional classes applied to each tag.


Revelations is a hover effect, for revealing hidden content!

The revelation 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.

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

Hover Over Me!


SECRET - only visible upon hover!

Simple Menu

Simple Menu is a pure CSS menu that displays a description upon hover over each item.


Thumbnails allow you to display a list of images at a reduced size. Useful for galleries.







<ul class="thumbs-size">
   <li><img src="URL" />   </li>
   <li><img src="URL" />   </li>
   <li><img src="URL" />   </li>


Single Image Thumbnails

Apply these classes directly to the img tag for single images. Their sizes correspond to the above examples.



Modals are hidden content boxes that can be made visible upon clicking a link or button. Entirely CSS-based - NO javascript needed!

Basic modal with plain text.

Launch Modal

Modal with lemon-flavored overlay and thumbnail images.

Launch Modal

Modal with chocolate-flavored semi-transparent overlay.

Launch Modal


<div id="unique-modal-id" class="modal">
   <div class="modal-content">
      <div class="modal-head">
         <h3>Modal Header</h3>
      <div class="modal-content">
         <p>Modal Content</p>
      <div class="modal-footer">
         <a href="#" class="btn">CLOSE</a>

Launch a Modal

Simply link to the modal unique ID.

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

Close a Modal

When the modal closes, you will want to return to the location on the page where the modal was opened from. To do this, simply link the Close button to a unique ID (anchor link).


Tables can be made responsive simply by applying the class .responsive directly to the table tag. On devices under 600px wide, each table row is displayed as a record. Re-size your browser window to see it in action.

Client Due Date Amount Status
Ma Pa Shop 08/20/2017 $1,165 Paid
Creative Studio 02/01/2015 $2,167 Collections
Food Bistro 04/30/2020 $978 Good Standing
Repair Shop 02/15/2019 $15,500 Unpaid

Scrolling Content

Create an infinitely scrolling content area. It is pure CSS, so no javascript is needed. There are four directions that content can be scrolled: left, right, up, and down. Hover over the scroller to pause it.

Scroll Left

I'm a scrolling text box!

Create as many scrolling content items as you want!

I scroll to the left...

Scroll Right

Scroll Up

Scroll Down

Define the Height

The height of the scroller will need to be defined. When using a horizontal (left or right) scroller, the wrapped content will also need to have the same height. A vertical scroller (up or down) only needs the height defined for the wrapper.


This is the markup for creating a scroller. Note that the scroller-wrap needs a specific height defined.

<div class="scroller-wrap" style="height: 200px;" >
   <div class="scroll-direction">
      <div class="scroll-item">
      <div class="scroll-item">

Changing the Speed

By default, the scroller takes 10 seconds to scroll all the content. The wider or taller the area is, the faster it will appear to scroll. The shorter or narrower, the movement appears slower.

To change the speed, you will need to modify the scroll direction classes in the buix.css file.

  • .scroll-left
  • .scroll-right
  • .scroll-up
  • .scroll-down


Version 1.5