Brutalist Framework

An open source framework for the brutalist web design trend.

STATIC BUILD | version  2.5.5 

DOWNLOAD About Get Started

CORE Components

Core CSS library & javascript plugin components for constructing client-side user experiences & interfaces.

Grids

BUTCH

Base Utility &
Typography Class Helpers
General typography and content classes library.

Butcher »

BUIX

Brutal User Interface
& Experience
Interactions, modals, tabs & more.

Experience »

BFX

Brutal Effects
Element animations & other effects.

Animate »

FUX

Form User eXperience
User input & form components.

Formulate »

ReBAR

Responsive Breakpoint
Assistance Reference
Library for improving responsive behavior.

Reinforce »

Flavors

Color Classes Library
Gradient backgrounds & general color classes.

Taste »

bIcons

Brutal Icons
Native UTF-8 symbols in the form of icon classes.

Symbolize »

BUFF

Blend Utility for Filters
CSS blends and preset filters.

Buff Up »

Get Started

Components

There are three main components to BF:

  • APP - Application files
  • CORE - Core CSS and javascript files

Structure

The file structure looks like this:

  • /app
    • /files
    • /theme
  • /core
    • /css
    • /jab
    • /files
    • /data

The /app directory contains custom data and theme files, which may be frequently updated. The /core directory contains all core component CSS libraries, javascriipt plugins, and other files that are static and less likely to be regularly modified.

Begin With a Boilerplate

As an ideal starting point, use the included boilerplate template.

The boilerplate template includes all core CSS files, and an example javascript-based modal example.

Core Style Sheets

All CSS files are found in the core/css/ directory, which can be used individually. However, the only CSS file you'll need is:

core/css/construct.css

This will import all the necessary CSS files, including Blueprint Grid.

The variables.css file is imported into various other core CSS files, and is used to specify CSS variable values, which are used for some components.

Javascript Application Base (JAB)

All javascript files are found in the core/jab/ directory. Some are vanilla javascript, while others are jQuery plugins. Certain BFX, BUIX, and FUX elements require javascript files.

If you are using jQuery, BF includes all 3 versions of jQuery in the core/jab/ directory:

  • core/jab/jquery.1.js
  • core/jab/jquery.2.js
  • core/jab/jquery.3.js

It's advised to use jQuery 3, as versions 1 and 2 are no longer supported. Certain core BF elements don't work with jQuery 1 and 2.

What's New in 2.5.5?

GENERAL:
+ Rearrangement and segregation of various CSS components into separate CSS files

BUFF:
+ Added ability to apply Fancy Filters upon hover

BUIX:
+ Added new "list-grid-view" interaction

BUTCH:
+ Segregated Flexbox layout into a separate CSS file
+ Introduced border-block-end/start classes to Boundaries

FLAVORS:
+ New "Shades of Teal" flavors: aquamarine, baja-blast, dep-teal, egyptian-teal, olo, tropical
+ Other flavors added: chipotle, cosmic-latte, melon, rouge, tea-rose

The following bonus templates are included:

×