Brutalist Framework

BUIX

Brutal User Interface Experience

Elelments for a brutal user interface and experience.

Buttons

To create a button, simply use the button tag, or apply .btn or .button class.



Yellow Button with Blue Flow Text

Yellow Button with Blue Text Inverted upon hover

Advanced Examples

Blocked ButtonGlitched Button

Throbbing Kiwi Button with Black Cherry Text


Stickies

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

Stacks

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.

.stack-auto
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.


Sticky


Tags

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

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!

I'm a SECRET!

SECRET - only visible upon hover!


Simple Menu

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


Thumbnails

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

.thumbs-tiny

.thumbs-small

.thumbs-medium

.thumbs-large

.thumbs-xlarge

Markup

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

 


Single Image Thumbnails

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

.tiny-thumb
.small-thumb
.medium-thumb
.large-thumb
.xlarge-thumb


Modals

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

Example 1

Basic modal with plain text.

Launch Modal

Example 2

Modal with lemon-flavored overlay and thumbnail images.

Launch Modal

Example 3

Modal with chocolate-flavored semi-transparent overlay.

Launch Modal

Markup

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

Launch a Modal

Simply link to the modal unique ID.

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

Download

Version 1.4