top

download
Brutalist Framework

Groundwork

Getting Started With Brutalist Framework

Laying the Groundwork

Preliminary planning and preparation work is necessary for project propulsion. Let's lay the "groundwork" by looking at what is needed before you build your next Brutalist Framework project.

Tour Quickie

Let's first take a quick 'n raw look at BF...

«
Overview

Brutalist Framework is a free and open source collection of CSS, javascript, and PHP scripts that can be used to construct a solid static website or dynamic application.

Static Projects

Using CSS utility classes, vanilla javascript, and / or jQuery plugins, static web pages can be built and prototyped rapidly.

Dynamic Projects

Using PHP, simple applications can be built, with content rendered based on CSV and XML data files. Ideal for projects with frequently changing content.

CORE Components

The CORE of BF contains both static and dynamic components. It includes:

  • CSS libraries
  • Javascript plugins
  • Data files (CSV and XML)
  • PHP scripts

Static CORE Components

There are 9 components within the CORE that use CSS and javascript, which are for the front-end design and interface of your project.

BFX

Brutal Effects
CSS and javascript animation, text, and other types of effects that can be applied to various elements.

effects »
bIcons

Brutal Icons
Library of native UTF-8 symbols in the form of CSS classes.

symbolize »
BUFF

Blend Utility for Filters
A CSS library of blends and filter properties to apply preset filters to elements.

buff up »
BUIX

Base User Interface & Experience
UI/UX elements built with CSS and javascript.

interface »
BUTCH

Base Utility & Typography Class Helpers
General-use CSS classes for typography, layout, and other basic page elements.

butcher »
Flavors

Color Classes Library
Background color, text color, gradients, and more.

taste »
FUX

Form User Experience
Javascript plugins for enhancing form user experiences.

formulate »
Grids

Multiple Layout Methods
Create responsive layouts from multiple grids.

lay grids »
ReBAR

Responsive Breakpoint Assistance Reference
Show or hide elements at various screen sizes.

reinforce »
»

A Dualistic APProach

Brutalist Framework was built with an application-first design approach. As the web experience has become primarily mobile, it makes sense to design websites to look and feel more like a mobile application. The design approach process is dualistic: it is both deconstructive and constructive.

Deconstruct

▚\◡\◢\◭\╔\◪\◧\◝\▗

Break down overall concepts and ideas into dislocated, raw elements and components.

  • Analyze project needs & concepts
  • Break down into basic components
  • Compartmentalize content

The idea is to challenge the current or conventional design (if one exists), and explore the possibilities of what it could become.

Construct

class="flow-text lemon-t">▗▚╔◝◡◢◪__◭__◧

Assemble, consolidate, and build components into a creative end product that we're happy with.

  • Design & construct prototype(s)
  • Implement content
  • Publish changes

The goal is to actively build a solution that progresses a concept to evolve based on pre-esisting data or experiences.

NOTE: An e-book is coming soon, which will explain this in greater detail.

Plan

Planning your next website or application project will involve various aspects. Thorough project planning should include:

  • Understanding your audience & target market
  • SEO & marketing strategy
  • UI/UX, theme, layout design, & visuals
  • Content planning

Consider these free e-books to help you get started:

FREE E-BOOKS

brut111 brut121 brut202

Build

If you have opted to use BF to build your next project, consider whether it will be static or dynamic:

  • Static
    Plain HTML-only pages. Only CORE CSS and javascript resources will be needed. Ideal for basic landing pages with content that never or rarely changes.
  • Dynamic
    PHP-based, allowing for more dynamic and modular content and functionality. Ideal for small business and sites / apps with complex content that regularly changes.

Get Started with a Boilerplate

Depending on whether you're building a static or dynamic page, a couple boilerplate files are included in the root directory of BF as starting points for your next project.

Use the boilerplate.html template for static projects, or use the php_boilerplate.php template for dynamic ones.

Launch

Once your website or app has been built, a few things will need to be taken into consideration post-launch:

  • Make sure pages have proper meta tags
  • Proofread content
  • Test for errors and performance issues

Updating BF

To leverage new features in future versions of BF, keeping the CORE files up-to-date will be necessary. To update, simply replace all files within the /bos directory with those found in the latest version. Eventually, there will be an upgrade script that will automate this process.