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

Blocked Button Glitched Button


Stickies

Make any element fixed positioned. Apply these classes:

.sticky - Makes any element fixed positioned.
.sticky-bottom-right - Fixes element to bottom right corner of display
.sticky-bottom-left - Fixes element to bottom left corner of display
.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)

SECRET - only visible upon hover!


Simple Menu

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

Download

Version 1.1