The core of BF is composed of CSS, javascript, data files, and PHP scripts that can be used to construct and render elements on an HTML page or application.
There are two primary directories that make up the framework structure: app and bos. The app directory is for files that will be frequently modified, whereas bos is for files that are static and unchanging. Below is an overview of the file structure.
The app directory contains theme files, custom data, additional files, and PHP content to be included on pages. Some example files are included as part of the downloaded package.
Data Folder
Contains data files (ex. CSV, XML, etc), to be used throughout app.
Files Folder
Miscellaneous files (images, audio, video, documents, etc.).
Inc Folder
PHP-based content (pages and UI components) and custom PHP function files to be included on main pages or for use within an AJAX interface.
Themes Folder
Any custom CSS, javascript, and other media files.
It is up to you how you organize the app directory. The idea is to store files here that will likely be frequently changed or updated.
The bos directory contains all core CSS, javascript, files, data, and PHP scripts. Files in this directory are for static (unchanging) reference. More details are provided in the following sections.
Core CSS components make up the bulk of BF. The included CSS files are uncompressed (unminified), and are located in the bos/core/css folder.
All CSS files can be loaded independently, or you could use bos/core/css/construct.css to import all CSS files and load them via this one file all at once.
CSS variables are used to configure some of the core components. This allows for some flexibility in customizing global core classes. To modify the values, edit the bos/core/css/variables.css file.
Font Sizes
--fontsize
--heading1
--heading2
--heading3
--heading4
--heading5
--heading6
Color Scheme
--primary
--secondary
--tertiary
--accent
--auxiliary
--other
Misc. Colors
--color1
--color2
--color3
--color4
--color5
--color6
Text Shadow Behavior
--tsb
Character & Word Spacing
--charspace
--wordspace
Padding & Spacing
--padding
--margins
--pushpad
--pullpad
--pushmargin
--pullmargin
--spacer
Border & Outline
--thin
--thick
bIcon Sizes
--bi2x
--bi3x
--bi4x
--bi5x
--bi6x
Z-Index (stacking)
--base
--low
--mid
--high
Transformations
--origin
--perspective
--scalex
--scaley
--scalez
--rotatex
--rotatey
--rotatez
--skewx
--skewy
Animation Speeds
--slowest
--slower
--slow
--speed
--fast
--faster
--fastest
CAVEAT:
One drawback to using @import within construct.css is that the page load time can be affected. Although the increase in load time is negligible, it could potentially affect your SEO rankings. To improve this, consider minifying all CSS files for a live site / application.
Sometimes, Google Fonts may not have a specific font, so you may need to create and host your own custom font. Custom font packages are in the bos/core/css/fonts directory. Within this directory is a construct-fonts.css file, which imports all font.css files from their respective directories. The construct-fonts file is imported into the core construct.css file.
Explore the bos/core/css/fonts directory to see how it's all set up. There are six custom font styles included as examples.
To create a custom font package, you'll need to first convert them into a webfont. The Font Squirrel Webfont Generator is an ideal tool for this.
.bitstream
.communist
.depixel
.monolisk
.vcr-mono
.writer-duospace
Additional CSS files for multimedia, shapes, and other UI/UX elements are found in the bos/core/css/molds directory. All CSS files within this directory are also imported into the bos/core/css/construct.css file.
These files are needed as they are part of the CORE components (mostly BUIX). They are primarily to be used on the front-end.
Javascript Application Base
BF uses both vanilla javascript and jQuery plugins for various components. BFX, BUIX, FUX and Grids use JAB.
Vanilla (plain) javascript means no dependencies on jQuery or other third party libraries. The following included files are vanilla javascript:
bos/core/jab/bfx/ (all files)
bos/core/jab/buix/ (all files)
bos/core/jab/fux/ (all files)
bos/core/jab/bento-grid.js
bos/core/jab/chaos-grid.js
bos/core/jab/pagelock.js
TIP: Load vanilla javascript before any jQuery files. This will reduce the risk of any potential conflicts.
Various components use jQuery plugins. To use them, you'll need to load jQuery in the footer, before whatever plugins you plan to use. BF includes 3 versions of jquery:
bos/core/jab/jquery.1.js
bos/core/jab/jquery.2.js
bos/core/jab/jquery.3.js
It's recommended to use jQuery 3. The plugins are found in the bos/core/jab/plugins/ directory.
Load a jQuery plugin like so:
<script src="bos/core/jab/plugins/plugin-name.js"></script>
Various CORE components require javascript to function properly, so loading a JAB javascript file may be required. You may see a box that looks like this:
REQUIRES:
bos/core/jab/folder/file.js
$filename_js
The Required box shows what file(s) are needed for that particular component.
Load Javascript via PHP Variables.
The purple tag within the Required box are PHP variables that can be used to echo a script tag that loads the appropriate javascript file. For example, echoing the variable $jquery3 will output:
<script src="bos/core/jab/jquery.3.js"></script>
The BF CORE contains data files that can be used for various purposes.
There are four types of data stored in their respective directories:
bos/core/data/csv/ (CSV files)
bos/core/data/json/ (JSON files)
bos/core/data/sql/ (SQL files)
bos/core/data/xml/ (XML files)
The included data files are used in conjunction with PHP constructors to create prepopulated dropdown selectors, such as a country selector. The following data is included:
PHP elements are written in plain, basic PHP.
Using PHP is purely optional.
minimum requirement:
PHP 7.0
If using PHP, you'll only need to load the following file at the beginning of any page:
bos/build/construct.php
This script includes all other necessary PHP functions, constructors, and helpers that will be needed to help you build and construct a dynamic page.
If you plan to run the PHP version of BF in a subdirectory (ex: brutalistframework.com/sub-directory), you will need to specify the directory in the following file:
/bos/build/sysconfig.php
The line with BASE_DIR should have an empty value. Enter the name of the folder that BF will run in, like so:
define('BASE_DIR', 'sub-directory');
How does the PHP build constructor all fit together? The diagram below illustrates the overall structure.
The PHP core build constructor includes helpers and constructors, which contains needed scripts from their respective directories.
The constructor consolidates both helpers and constructors into a single source file that is to be loaded on an application page.
Helpers are scripts that contain PHP functions and static variables that get information about either client- or server-side environments and other variables. Constructors assemble renderable elements or variables that can be used to render elements or echo content. Helpers are background functions, while Constructors are more visual.
Helpers get information about:
Constructors build:
Below are helper variables that can be used for getting client or server information.
$phpversion server PHP version
$http HTTPS status
$server_ip server IP address
$get_cur_user current owner username
$get_my_uid current owner user ID
$protocol server protocol
$session_dur session duration
$environemnt print server info
$user_ip [get user IP address]
$user_country [get user country name]
$user_cc [get user country code]
$user_region [get user region]
$user_rc [get user region code]
$user_city [get user city]
$user_lat [get user latitude]
$user_long [get user longitude]
$user_tz [get user timezone]
$user_curc [get user currency code]
$user_curs [get user currency symbol]
$user_environment [print user (client) info]
$browser_lang [browser language (en)]
$cdir [current directory name]
$cwdir [current working directory path]
$droot [document root]
$cfile [current file name]
$pdir [parent directory (up 2 levels)]
$gdir [grandparent directory (up 3 levels)]
$ggdir [great-grandparent directory (up 4 levels)]
$https [get status of HTTPS (on or off?)]
$host [returns host(domain name, ip)]
$burl [base URL (combines $https and $host)]
$rurl [requested resource URL]
$url [standard URL (combines $burl and $rurl)]
$furl [full URL ($https + $url)]
$bdir [base directory URL ($burl + '/')]
Date Formatting
$day [day name (Friday)]
$daya [day, 3 letters(Fri)]
$month [month name (July)]
$mon [month, 3 letters (Jul)]
$mo [month, 2-digit (7)]
$mot [number of days in month (31)]
$year [year, 4-digit (2024)]
$yr [year, 2-digit (24)]
$dom [day of month (26)]
$dow [day of week (5)]
$doy [day of year (207)]
$week [week number of year (30)]
$nday [nth day (26th)]
$hms [hours minutes seconds (23:25:51)]
$datetime [MySQL datetime format (2024-07-26 23:25:51)]
$get_tz [get timezone (America/New_York)]
$tz [timezone (EDT)]
$dmy [DD.MM.YY (26.07.24)]
$ymd [YY.MM.DD (24.07.26)]
$mdy [MM.DD.YY (07.26.24)]
$mdyt [July 26, 2024, 11:25 pm]
$mdytz [July 26, 2024, 11:25 pm EDT]
$tomorrow [tomorrow day (Saturday)]
$yesterday [yesterday day (Thursday)]
$lastmonth [last month (June)]
$nextmonth [next month (August)]
$nextyear [next year (2025)]
$lastyear [last year (2023)]
$nextweek [next week (31)]
$lastweek [last week (29)]
$leapyear [leapyear: true]
$lastmod [file last modified: 05/02/2024 04:07:46pm]
Heading Tags
$faviconlist
renders favicon meta data (place in page header)
$global_meta_header
renders necessary meta tags (place in page header)
The only variable needed for loading CSS is:
$core_css [loads bos/core/css/construct.css]
This CSS file imports all needed CSS files. Alternatively, all CSS files can be loaded separately by using the variable:
$deconstruct_css
There are several form select (dropdown) inputs available that all use CSV data to prepopulate them. The CSV data files are located in the /bos/core/data/csv/ directory. Within your form, simply echo any of the below PHP variables to render it.
$country_select
country selector
$country_select_cur
country selector with currency code as the option value
$country_select_code
country selector with alpha2 code as the option value
$country_select_uncode
country selector with UN code as the option value
$state_select
US state selector with abbreviations as the option value
$province_select
Canadian province / territory selector with abbreviations as the option value
$timezone_select
timezone selector
$timezone_select_offset
timezone selector with UTC offset as the option value
$language_select
language selector with alpha2 code as the option value
Additionally, the following data tables can be rendered:
$countries_table
table of countries, and their alpha 2 codes, currencies, and UN codes
$states_table
table of states and their abbreviations
$provinces_table
table of Canadian provinces / territories, and their alpha codes, geo codes, and regions
$timzezone_table
table of timezones and their UTC offsets and names
$language_table
table of languages with their alpha codes
Constructing a PHP page is very basic. The code below is the barebones anatomy of a PHP page:
<?php require_once 'bos/build/constructor.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<?php echo $global_meta_header;?>
<title>Page Title</title>
<?php echo $core_css; ?>
</head>
<body>
...body content...
<?php echo $jquery3; ?>
</body>
</html>
The BF package includes a php_boilerplate.php file. Use this as a starting point for constructing something solid.
PHP Boilerplate »