Brutalist Framework
DOWNLOAD v.2.2 Github Twitter

An open source framework for the brutalist web design trend.

Built with

brutality
  • HTML5
  • CSS3
  • javascript

About Press Boilerplates

CORE Elements

Boilerplates

version
 2.2 

BF is a FREE HTML template that can be used for rapid prototyping of responsive web designs and native app UI/UX.

Get Started

BUTCH

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

Butcher »

BUIX

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

Experience »

BFX

Brutal Effects
Extender
CSS and javascript-based effects.

Start.Brutalizing »

Grids

B3Grid &
Flexbox Grids
Responsive layout frameworks.

Create Layouts »

ReBAR

Responsive Breakpoint
Assistance Reference
Library for improving responsive behavior.

Reinforce »

Flavors

Color Classes
Library
Gradient backgrounds and general color classes.

Taste »

bIcons

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

Symbolize »

BELL

Brutal Extension
Element Library
Additional modules for enhancing user experience.

Extend »

Boilerplates

Starting Point Templates
Basic examples of starter projects

Boil Things »
About
BF
Press
Releases
Github
Twitter

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

General:
+ Reduced size of some images to reduce package size

BELL:
+ (no changes)

Flavors:
+ Flavors: cinnamon, cranberry, scarlet, rose, sapphire, taffy, yam
+ Combos: plush, mono-inv, pb-pickle, navy-fire
+ Added ability to change flavor background color upon hover

BFX:
+ Reworked Fittext - removed jQuery dependency and added new classes
+ Updated Blink effect - removed jQuery dependency (purely CSS now) and added "strobe"
+ New "throb-throw" animation
+ Updated spin animations

BUIX:
+ New "highlight" class
+ Updated B-Loader
+ Added "LoopScroll"
+ New date/time picker for form input
+ Form fieldset duplicator
+ Credit card input with validation
+ Account creation form with validation

BUTCH
+ Updated box shadows
+ Updated ul classes
+ Updated Filters and Opacity
+ Updated spacing classes
+ Added fluid-text class

Grid:
+ New basic width and height classes
+ Improved responsive behavior
+ Various other improvements

bIcons:
+ New icon sizes!
+ 8 new icons: fill, grid, pinwheel, sparkle, core, lozenge, above, below

ReBAR:
+ New device type visibility classes

Boilerplates:
+ (no changes)

 

Built with Brutalism

Examples of websites built with Brutalist Framework.

MonSuperKilometre.com
Mon Super Kilometre

ZarmaStudio.com
Zarma Studio

 

Download
version 2.2
×