Brutalist Framework || BUIX

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

Layer 2

z-index = 2

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

Reveal

Reveal.hover

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!

I'm a SECRET!

SECRET - only visible upon hover!

Reveal.toggle

Reveal.toggle toggles content upon clicking on a label.

Toggle Me!

You will need a unique ID for each reveal toggle element. Clicking on the label either opens or closes the toggled content. Use the markup as follows:


											<div class="reveal toggle">

											<input id="unique-id-1" class="toggle" type="checkbox">

											<label for="unique-id-1" class="label-toggle">

											 <div class="toggle-content">

											  <div class="content-inner">

											  ...content...
  </div>

											 </div>
</div>

Simple Menu

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

Default View

Add Some Flavors!

Markup


								<ul class="simple-nav">

								   <li><a href="#">List Item

								   <span>Description text</span></a>

								   </li>

								</ul>

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!

Welcome

Hot Tab!

This tab has a hot animated background.

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.

Custom Layout

Watery Tab with Custom Layout

This tab has a nested 3-column grid layout!

Column 1

Column 2

Column 3

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

This is a mixed content scroller with paragraphs and images.

This could be used as a news feed!

Scroll Down

This is the first paragraph of text.

I'm blinking to get your attention!

Flow-text paragraph because I'm more important

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.

BUIX

Brutal User Interface Experience

Buttons

Examples

Forms

Stickies

Stacks

Base Layer

Layer 1

Layer 2

Sticky Stack Example

Tags

Reveal

Reveal.hover

Reveal.toggle

Simple Menu

Default View

Add Some Flavors!

Markup

Thumbnails

.thumbs-tiny

.thumbs-small

.thumbs-medium

.thumbs-large

.thumbs-xlarge

Markup

Single Image Thumbnails

Modals

Simple Modal

Draggable Modal

Iframe Modal

Markup

Simple Modal

Draggable Modal

Modal with Iframe

Tabs

Hot Tab!

Watery Tab with Custom Layout

Column 1

Column 2

Column 3

Markup

Scrolling Content

Markup

Draggable

Example: Draggable Bricks

Example: Stacked Draggable Bricks