Brutalist Framework

An open source framework for the brutalist web design trend.

Built with brutality
  • HTML5
  • CSS3
  • javascript

version 2.1 


There are three main components to BF:

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


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?

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

+ 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

+ 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

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

+ 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

+ 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

+ Added stretch class for blocks
+ Other minor updates

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

+ Added support for devices with widths of 360px

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


version 2.1