A framework for the brutalist web design trend.
Brutalist Framework is a free and open source collection of PHP & HTML templates, CSS libraries, and javascript resources specifically for the brutalist web design style.
Features:
- Flat-file (no database needed)
- Lightweight & portable
- No third-party dependencies
- Open source under MIT license
Ideal for:
- Beginner & novice web designers and developers
- Building lightweight and portable applications or small websites
- Brutalizing your web presence
Technologies Used:
- HTML5 / CSS3
- Vanilla javascript & jquery
- PHP
- CSV, XML
Although much of BF uses PHP, this isn't mandatory. You can use just the HTML, CSS, and javascript components if you're developing a static HTML page.
Otherwise, if you plan to utilize PHP, you'll need to use a server. If developing on a local machine, a WAMP, LAMP, or MAMP server will need to be used (depending on what operating system you're using).
If you plan to develop your project in a specific folder (directory), you'll need to specify the folder name ($basedir variable) in the core/bekah.php script (ex: 'sub-dir'). Otherwise, it's best to build in either a root domain or subdomain folder.
There are two primary folders: /app and /core. The app directory is for files and folders that you plan to regularly modify, whereas the core directory is for the static (unchanging) files and folders.
For your convenience, more detailed documentation and examples are provided in the root directory. These include both HTML and PHP pages.
The /app directory is ideal for storing application content files, data, and media. Out-of-the-box, it includes some example files that are used throughout BF.
The /core directory contains CSS libraries, javascript plugins, PHP scripts, and data files that can be used across your whole application.
The core contains additional (optional) resources called MOLDS which provide additional functionality for your app.
MOLDS (Makeable Object Layout & Design Source) resources (CSS only) are automatically loaded in the header, but these can be enabled / disabled via the /core/molds/config.php file. See molds.php for full documentation.
There are three types of MOLDS:
- Tiles
- Boards
- Panels
Tiles are HTML components that use only CSS and javascript, so they are ideal for static HTML projects.
Boards use PHP and CSV or XML data to create groups of content. Data files for Boards should be stored in the /app/data directory.
Panels will be available in 3.1+, and will also use PHP and CSV or XML data. These are more complex than Boards in that they use more complex PHP and their integration may require additional steps.
Core CSS libraries are found in the /core/css directory. By default, all libraries are imported into the /core/css/construct.css file, so only this file is needed. However, you may wish to load CSS libraries independently (ideal for development).
JAB (Javascript Application Base) contains all the javascript files for all CORE components. Both vanilla javascript and jQuery plugins are included in the /core/jab directory.
Javascript files found in the /core/jab directory are vanilla javascript (no dependencies), as well as jQuery libraries are found here. All javascript found in the core/jab/plugins directories are jQuery plugins, and require a jQuery library to be loaded before them.
Core data files are found in the /core/data directory. These data files are used to prepopulate various input compontents (such as dropdown selectors).
In the /core directory, you'll find a family of PHP scripts: kat.php, bekah.php, brad.php, and core.php.
KAT script is used to define arrays that are used by the core.php script to construct variables.
BEKAH is KAT's sister script. She is helpful.
BRAD works core data to construct variables that render prepopulated form inputs (selectors) and other elements.
The core.php script includes KAT, BEKAH, and BRAD, as well as the /core/molds/config.php file. The core script is the only required script that needs to be included in your page header.
For SEO purposes, you may wish to have "clean URLs" for your web application pages (ex: yourwebsite.com/clean-url). There is an example htaccess code included as a TXT file. Simply rename this to .htaccess on a live site. NOTE: this may not work on all servers, as some may be configured differently, in which case you'll need to consult your web host provider on this.
Additionally, there is also an example 404 (NOT FOUND) HTML template included, as well as a static HTML countdown template (useful for a "coming soon" landing page).
/// BUILD BRUTALITY ///