Brutalist Framework

An open source static HTML, CSS, & javascript framework for the brutalist web design trend.

STATIC CORE | version  2.7 

DOWNLOAD Get Started

CORE Components

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

Get Started

Components

There are two main directories in the BF package:

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

Structure

The file structure looks like this:

  • /app
    • /files
    • /theme
  • /core
    • /bad-assets
    • /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. There are also additional boilerplates to help you get started:
View All Boilerplates

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 4 versions of jQuery in the core/jab/ directory:

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

NOTE: Certain core elements don't work with jQuery 1 and 2, so version 3 is the recommended version to use. Version 4 has NOT been tested.

What's New in 2.7?

GENERAL:
+ Added jQuery 4.0.0 to JAB
+ animated-backgrounds.css added to core/css/bfx directory
+ Updated top-corner navigation menu panel
+ Re-introduction of Boilerplates

BFX:
+ New "color-shift" animated background
+ New "spazz" animation glitch effect

BICONS:
+ 6 new currency icons: austral, euro-currency, franc, naira, nordic-mark, rupee

BUFF:
+ 4 new basic filters: deep-sea, dreamy, vibrant, vintage

BUIX:
+ Re-added Megamenu
+ Added new "Instant Search"

BUTCH:
+ 4 new custom fonts: biorhyme, lewatur, mupen, riosark
+ Added Bar Graphs under 'Tables & Media'

FLAVORS:
+ 5 new gradients: agent, crystal-ice, goldenrod, lemon-mint, spring-meadow

×