Brutalist Framework

BUIX

Brutal User Interface & Experience


Elelments for a brutal user interface and experience.

Forms

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

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.

.highlight
An input or entire form can be "highlighted" when the user focuses on (interacts with) an input. Simply apply the .highlight class to the area that is to be highlighted.





Duplicate Fieldset Input

Copy all input fields (including select options) from one fieldset to another when a checkbox is checked.

NOTE: This feature uses unique IDs, so it can only be used once per page.

Setup:
fieldset id="copyFrom"
fieldset id="pasteTo"


Checkbox input with
id="field-copy"

TIP:
Use this method to copy inputs to hidden fields!

Billing Address
Shipping Address

Date / Time Pickers

A date / time picker can be added simply by applying a class to a text input field!

Classes
Add a text input and apply any of these classes:
.datepick - m/d/y
.datetime - m/d/y h:m am/pm
.datepick-euro - d-m-y
.datetime-euro - d-m-y h:m am/pm
.datepick-full - Day, Month XX, YYYY
.datetime-full - Day, Month XX, YYYY h:m am/pm


Inline Picker
To display the picker inline (beneath the text input), simply apply the following data-attribute to the text input tag:
data-inline="true"

Credit Card Input

The credit card input validates the type of card number the user inputs. AMEX, Discover, MasterCard, and Visa is supported. The expiration date input is automatically formatted.

Card Examples
AMEX
3400 0000 0000 009
Discover
6011 0000 0000 0004
MasterCard
5500 0000 0000 0004
Visa
4111 1111 1111 1111

Card Number:


Create Account Form

The account creation form includes validation for username, password, and email. As the user fills out the form, the results are displayed in the Profile box on the right.

Conditions
Below are the conditions that must be met.

USERNAME:
At least 4 characters

PASSWORD:
  • At least 8 characters
  • At least 1 number
  • At least one of these characters: ! @ $ % * _
  • Passwords must match
EMAIL:
Checks for valid email address

Preferences



Profile

Username


Email


Preferences:


    Buttons

    To create a button, simply use the button tag, or apply .btn 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:


    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

    StackSwitch

    StackSwitch automatically displays a new layer every 3 seconds, on an endless loop.

    Markup
    <div class="stackswitch-wrap" data-switch="container">
      <div class="stackswitch" data-switch="main-layer">
       <div class="layers" data-switch="switch-parent">

        <div>...layer 1...</div>
        <div>...layer 2...</div>
        <div>...layer 3...</div>

       </div>
      </div>
    </div>
    Example

    Prepare Demo...

    Let's put any kind of content in here!

    Demo Ready.

    Could be useful as a slideshow!

    pRogrAm glitCh... we're fucked.

    Program Running

    Everything is all good in the hood.

    We are now on the next-to-last slide!!

    COMPLETED

    We've successfully completed the demo.


    Interactions

    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.

    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 inner wrapper:
    .modal-inner.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

    Cursors & Resizeable Elements

    Make any element have a specific cursor type, or make any element rezizeable by the user!

    Cursor Classes

    Apply these classes to any element. Hover for preview.

    .blocked
    .cell
    .crosshair
    .grab
    .help
    .move
    .pointer
    .wait
    .zoom-in
    .zoom-out
    Resize Elements

    Apply these classes to make any element resizeable by the user.

    .resize-both
    Resize the element both vertically and horizontally.
    .resize-h
    Resize the element horizontally only.
    .resize-v
    Resize the element vertically only.

    Preview Hover

    Add hoverable video and image previews to any element.

    Markup

    Markup is simple! Simply apply the class .ph and a data-src attribute, like so:

    <element class="ph" data-src="./file-url"></element>

    Supported File Types: .jpg, .jpeg, .png, .ico, .gif, .svg, .bmp, .webp, .mp4, .webm

    Demo:

    Blinker Fluid

    CDP: Content Display Picker

    Display content when an option is selected.

    Markup
    <div class="cdp-wrap" id="unique-id">
      <select class="cdp_select">
        <option value="0">Content 1</option>
        <option value="1">Content 2</option>
        <option value="2">Content 3</option>...
      </select>

      <div class="content">
        <div class="cdp-element" data-option="0">
    ...Option 1 Content...</div>
        <div class="cdp-element" data-option="1">
    ...Option 2 Content...</div>
        <div class="cdp-element" data-option="2">
    ...Option 3 Content...</div>
      </div>
    </div>
    Demo:
    Win a trip to Ireland!
    Win a trip to Sweden!
    Win a Beer Party!

    B-Loader

    Load more list items upon button press!

    Simply create a list of div, p, li or article elements, wrapped within a .b-loader class container!

    By default, b-loader displays 5 items at a time. This can be modified in the start.brutalizing.js initialization script.

    To hide the counter within the "load more" button, add the class no-counter to the b-loader wrapper.

    List Item 1
    List Item 2
    List Item 3
    List Item 4

    List Item 5 (Paragraph)

    List Item 6
    List Item 7
    List Item 8
    List Item 9

    List Item 10 (Paragraph)

    List Item 11
    List Item 12
    List Item 13
    List Item 14
    List Item 15
    List Item 16
    List Item 17
    List Item 18
    List Item 19

    List Item 20 (Paragraph)

    List Item 21
    List Item 22
    List Item 23
    List Item 24
    List Item 25
    List Item 26
    LAST List Item 27


    Navigation

    Simple Menu

    A pure CSS menu that displays an optional description upon hover over each item.

    Default View

    Markup

    <ul class="simple-nav">
       <li><a href="#">List Item
       <span class="desc">Description text</span></a>
       </li>
    </ul>

    Tree List

    Create a nested tree list menu for unordered lists. Child items can be toggled. Each parent item will need to be wrapped in a span with class of parent. Unlimited child levels are supported.

    Default View

    • Category 1
      • Child 1
      • Child 2
      • Child 3
        • Grandchild 1
        • Grandchild 2
        • Grandchild 3
          • Descendant 1
          • Descendant 2
          • Descendant 3
    • Category 2
      • Sub-Category 1
      • Sub-Category 2
    • Category 3 (no children)

    Markup

    <ul class="tree-list">
      <li><span class="parent">Parent Item</span>
       <ul>
        <li>child item</li>
       </ul>
      </li>
    </ul>


    Thumbnails

    Thumbnails allow you to display a list of images at a reduced size. Useful for galleries. Wrap img tags within a container with any of these classes:

    .micro-thumb

    .tiny-thumb

    .small-thumb

    .medium-thumb

    .large-thumb

    .xlarge-thumb

    .jumbo-thumb

    TIP: These classes can also be applied directly to the img or picture tags.

    Markup

    <div class="size-thumb">
       <img src="URL" /> 
       <img src="URL" /> ...
    </div>

     

    Cropped Thumbnails

    Make all thumbnails into a square (regardless of their original dimensions) by applying the .crop class in conjunction with any of the thumbnail classes!

     

    Circle Thumbnails

    Make all thumbnails into a circle! Apply the .circle class in conjunction with .crop and any thumbnail size class:
    .size-thumb.crop.circle


    Modals

    Display a modal with any type of content. Users can close the modal either by clicking anywhere outside of it, or the X in the top right corner. There are three components that are needed.

    Create Modal Content

    Wrap your content within this markup. This is what will be displayed within the modal.

    <div id="unique-modal-id" style="display: none;">

     ...content... 

    </div>

    Load Modal Box

    This only needs to be included ONCE on the page. It loads the modal content within it.

    <div class="modal">
     <div class="modal-inner">
      <span data-modal-close>×</span>
      <div class="modal-content"></div>
     </div>
    </div>

    Launch Modal

    Simply create a link with a unique ID and data-modal-open attribute to launch the modal.

    <a href="unique-modal-id" data-modal-open>Open Modal</a>

    Examples

    + Single Image
    + YouTube Video
    + Basic Content
    + StackSwitch Modal

    Draggable Modals

    Modals can be draggable or fixed. Simply apply the class draggable to the modal-inner wrapper to make it draggable.


    Lite Modals

    Pure CSS modals for simple and lightweight content!

    Create Modal Content

    Wrap your content within this markup.

    <div id="unique-id" class="modal-lite">
      <div class="modal-content">
        <div class="modal-head">..heading..</div>
        <div class="modal-content-body">
        ..body content..
        </div>
        <div class="modal-footer"><a href="#" class="btn">CLOSE</a></div>
      </div>
      <div class="overlay"></div>
    </div>

    Launch Modal

    Just link to the corresponding unique ID!

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

    Customize
    By default, no backgrounds or other colors are applied. Apply any flavors classes as necessary to any of the modal elements.

    Closing Modals
    Optionally link the modal footer button to a unique ID within the page, so the user is returned to a specific point on the page.

    Fullscreen
    To create a fullscreen modal, apply the class .fullscreen (.modal-lite.fullscreen).

    Scrollable
    Ideal for fullscreen modals, make the modal body content vertically scrollable by applying the class .scroll-y (.modal-body-content.scroll-y).


    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.

    Comprehend Brutalism

    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.

    LoopScroll

    LoopScroll allows you to create an element with a touch-enabled infinitely looping scroll! Ideal for creative navigation menus or any other type of content! Add as many items as you wish. No scrollbars are displayed by default. Recommended for mobile applications.

    Markup

    Wrap loop-item elements within a loopscroll wrapper.

    <div class="loopscroll">
      <div class="loop-item">
       ...content...
      </div>
    </div>

    Limit Height
    The height of the loopscroll wrapper needs to be specified in some way. For example, to limit the height to one-third of the screen height, apply the grid height class bh33 to the loopscroll wrapper.

    .loopscroll.bh33

    Download
    version 2.3