Brutalist Framework

An open source framework for the brutalist web design trend.

Built with brutality
  • HTML5
  • CSS3
  • javascript

version 2.1 

Components

There are three main components to BF:

  • CORE - Primary CSS and javascript libraries
  • BELL - Extension Library (optional)
  • Boilerplates - Starting point templates

Structure

The file structure looks like this:

  • /core
    • /css
    • /js
    • /bell
    • /files
  • /theme
    • /default
  • /bp

Loading BF

You'll need to load:

  • /core/css/brutalist.min.css - OR - /core/css/dev/core.css
  • /core/js/brutalist.js
  • /core/js/start.brutalizing.js

The brutalist.min.css file is a minified CSS file that contains all core components found in /core/css/dev directory.

The brutalist.js javascript file contains all functionality needed for core elements. Some variables can be customized in the start.brutalizing.js initialization script.

You'll also need to include jQuery. BF includes all 3 versions of jQuery in the /core/js directory:

  • /core/js/jquery.1.js
  • /core/js/jquery.2.js
  • /core/js/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.1?

General:
+ Introducing BELL (formerly Plugins): Brutal Extension Element Library
+ New Boilerplates (formerly "Starting Points")
+ Upgrade to jquery 3
+ Various bug fixes

BELL:
+ Introducing "BISCUIT" components: PageLock, Age Verify, and Cookie Consent
+ New Audio, GIF, and Video players
+ New Timeline, Presenter, and PISS content elements
+ Behavior improvements made to Megamenu
+ Printer iframe bug fixes
+ New "Exit Intent" element

Flavors:
+ 11 new flavors: sand, seaweed, pickle, caramel, beer, ash, smoke, azure, mustard, mauve, cider
+ Renamed various classes
+ 8 new gradients: halloween, octoberfest, caramel-apple, ireland, autumn, winter, spring, summer
+ Shortened text-shadow, outline, and border class names
+ All classes with -text, -text-shadow, -outline, and -border are now considered deprecated

BFX:
+ New "Spotlight" cursor effect
+ New "Blenders" classes
+ New "infinitile" animated background class
+ Updated Fittext classes
+ Restored CurveText to BFX as a text effect

BUIX:
+ Updated button classes
+ Added new Cursor and Resizeable element classes
+ Added new image and video preview hover class
+ Added new "b-loader" (BETA)
+ Added new "CDP" (content display picker)
+ Complete re-work of thumbnails

BUTCH
+ Updated text layout and some other typography classes with shorter names (former class names still supported)
+ New section headings counter
+ Shortened border class names (old ones now deprecated)
+ Added 9 new gradient borders

Grid:
+ Added stretch class for blocks
+ Other minor updates

bIcons:
+ Added 10 new icons: islam, umbrella, weather, fountain, sailboat, ferry, heat, medical, hash, flower

ReBAR:
+ Added support for devices with widths of 360px

Boilerplates:
+ New templates: Vaporwave, Rated X, Horror, Social, Commerce Catalog, and Media Gallery
+ Updated Leads template
+ Updated Email template

 

Built with Brutalism

Examples of websites built with Brutalist Framework.

 

Download
version 2.1