Brutalist Framework


Brutal User Interface & Experience

Elelments for a brutal user interface and experience.


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

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.

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

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 vanilla

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.

fieldset id="copyFrom"
fieldset id="pasteTo"

Checkbox input with

Use this method to copy inputs to hidden fields!

Billing Address
Shipping Address

Date / Time Pickers vanilla

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

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:

Credit Card Input vanilla

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
3400 0000 0000 009
6011 0000 0000 0004
5500 0000 0000 0004
4111 1111 1111 1111

Card Number:

Create Account Form vanilla

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.

Below are the conditions that must be met.

At least 4 characters

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







    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:


    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

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


    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.

    Apply this class to automatically increment the z-index value - starting at 0 - for every element that uses this class.

    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 jquery

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

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


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


    We've successfully completed the demo.


    Reveal css


    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 toggles content upon clicking on a label.

    Draggable jquery

    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:

    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
    Brick #2:
    Drag me!
    Top Brick

    Cursors & Resizeable Elements css

    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.

    Resize Elements

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

    Resize the element both vertically and horizontally.
    Resize the element horizontally only.
    Resize the element vertically only.

    Preview Hover vanilla

    Add hoverable video and image previews to any element.


    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


    Blinker Fluid

    CDP: Content Display Picker jquery

    Display content when an option is selected.

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

      <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>
    Win a trip to Ireland!
    Win a trip to Sweden!
    Win a Beer Party!

    B-Loader jquery

    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


    Simple Menu CSS

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

    Default View


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

    Tree List vanilla

    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)


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

    Pagination jquery

    Create a list of items within a pagination interface. Show 5, 10, 15, 20, or 25 items per page. Wrap the pagination interface within container with class .paginate-X, where X is either 5, 10, 15, 20, or 25.

    Default View

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Item 7
    Item 8
    Item 9
    Item 10
    Item 11
    Item 13
    Item 14
    Item 15


    <div class="paginate-X">
      <div class="items">
        <div>item 1</div>
        <div>item 2</div>...
      <div class="pager">
        <div class="firstPage">first</div>
        <div class="previousPage">prev</div>
        <div class="pageNumbers"></div>
        <div class="nextPage">next</div>
        <div class="lastPage">last</div>

    Thumbnails css

    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:








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


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


    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:

    Modals vanilla

    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;">



    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>

    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>


    + 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 css

    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 class="modal-footer"><a href="#" class="btn">CLOSE</a></div>
      <div class="overlay"></div>

    Launch Modal

    Just link to the corresponding unique ID!

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

    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.

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

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

    Tabs css

    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


    <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">
    /* Tab 2 */
       <input type="radio" name="tabs" id="tab2" checked="checked">
       <label for="tab2" class="">Tab One</label>
       <div class="tab">

    Scrolling Content css

    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.


    I'm a scrolling text box!

    Create as many scrolling content items as you want!

    I scroll to the left...




    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.


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

    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 vanilla

    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.


    Wrap loop-item elements within a loopscroll wrapper.

    <div class="loopscroll">
      <div class="loop-item">

    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.


    version 2.4