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

Remove the rounded corners from a button:

Examples

Blocked Button - apply class .blocked to any button or link
Glitched Button

Small Throbbing Alert Button!


Forms

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.

Layouts
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.

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




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

.glued
Apply this class to make an element stay visible while scrolling. Best used within a sidebar.

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: 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 a success 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.


Reveal

Reveal is a hover effect, for revealing hidden content!

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!

I'm a SECRET!

SECRET - only visible upon hover!



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!

Basic modal with plain text.

Launch Modal

Draggable modal with lemon-flavored overlay and thumbnail images.

Launch Modal

Iframe 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>

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).


Tabs

Tabs are purely CSS, so no javascript is required! Apply flavor classes to add color. You can add any type of content within a tab!

Hot Tab!

This tab has a hot animated background.

Capsule Tower

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, 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.

Watery Tab with Custom Layout

This tab has a nested 3-column grid layout!

Column 2

Markup

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


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.

Markup

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>
      <div class="scroll-item">
         ...
      </div>
   </div>
</div>

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.

Directions

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


Draggable

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

Example: Draggable Bricks

Bricks are ideal as draggable elements. Simply apply class draggable to bricks: .brick.draggable.

Drag Me
PSSHH... I'm such a drag queen
Drag me through the mud

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

Example: Stacked Draggable Bricks

We could stack our bricks on top of each other using stack-auto, and make them draggable: .brick.stack-auto.draggable.

Draggable area!
This whole container
can also be dragged!
I'm on the
bottom
Brick #2:
Drag me!
Top Brick

Download

Version 1.7