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 core. The app directory is for files that will be frequently modified, whereas the core 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 core 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 core/css folder.
All CSS files can be loaded independently, or you could use core/css/construct.css to import all CSS files and load them via this one file all at once.
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.
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 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
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 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 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
Javascript Application Base
BF uses both vanilla javascript and jQuery plugins for various components. BFX, BUIX, and some MOLDS compontents use JAB.
Vanilla (plain) javascript means no dependencies on jQuery or other third party libraries. Two core JAB scripts are purely vanilla javascript:
core/jab/bfx.js
core/jab/buix.js
Various MOLDS components use vanilla javascript, which are also located in the core/jab directory.
Various BFX, BUIX, and some MOLDS elements 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:
core/jab/jquery.1.js
core/jab/jquery.2.js
core/jab/jquery.3.js
It's recommended to use jQuery 3. The plugins are found in the core/jab/plugins/ directory.
Load a jQuery plugin like so:
<script src="core/jab/plugins/plugin-name.js"></script>
PHP elements are written in plain, basic PHP. Using PHP is purely optional.
Build with basic PHP functionality
How does the PHP core all fit together? The diagram below illustrates the overall structure.
The KAT and BEKAH scripts deal primarily with defining global variables. KAT defines variable arrays, and BEKAH defines static variables. These "sister" scripts are used in the CORE script to define other variables.
BRAD uses data defined in CSV, JSON, SQL, or XML files to construct variables that are used to render front-end elements (such as form selects). BRAD is optional, and doesn't need to be included in the CORE.
The CORE script requires three scripts: KAT, BEKAH, and BRAD. From these, the CORE script consolidates data, arrays, and variables which can be used throughout your application.
The only script you'll need to include is core.php.
CORE PRINT TEST
Included in the /core directory is a PHP script that can be used to test print all CORE variables. It is located at:
/core/coreprint.php
Construct Object Rendering Engine
core/core.php
Use the following CORE variables to construct your application pages:
$faviconlist
renders favicon meta data (place in page header)
$themestyle
renders inline CSS themes (place in page header)
$themelist
renders unordered list of themes
$global_meta_header
renders necessary meta tags (place in page header)
NOTE: includes $faviconlist
$global_header
renders CSS link tags (place in page header)
NOTE: includes $themestyle
$global_footer
renders javascript tags (place before closing body tag)
NOTE: jQuery plugins are NOT included. They have to be added after $global_footer.
$page_list
renders list of active pages
$page_list_all
renders list of all pages
$block_list
renders list of active blocks
$block_list_all
renders list of all blocks
$block_type_list
renders list of block types
$layout_list
renders list of layouts
$group_type_list
renders list of group types
$group_list
renders list of groups
$content_type_list
renders list of content types
$cat_list
renders list of categories
Let's deconstruct the core scripts in the following sections.
KAT and BEKAH are the two primary "sister" scripts, which support the CORE script. Both scripts are included in the core.php script.
Key Array Templater
core/kat.php
KAT is the key to the future of the happiness of your PHP application, full of care, pure intent, and arrays of data. KAT script is used to define arrays that can be used throughout your application. This is an ideal location to store sitewide global variables that require an array format. These arrays are used within the CORE script to generate template components.
Most KAT arrays are comprised of multidimensional arrays. The KAT script defines all arrays you wish to use globally throughout your application.
This array is a list of all application pages that is used to create a list of linked application pages. Use the following syntax:
$pages = array(
'Page Name'=>array('pf'=>'page_name.php','active'=>true),
);
Where 'pf' is the page file name (string), and 'active' is a boolean true/false value for showing or hiding in the rendered page list.
Render a page list: $page_list
The Themes array is used to define color schemes. This will be used generate inlne CSS themes within the header. Use the following syntax:
$themes = array(
'Theme Name'=>array('active'=>true, 'p'=>'', 's'=>'', 't'=>'', 'a'=>'', 'x'=>'', 'o'=>''),
);
Where 'active' is a boolean true/false value to determine if a theme will be used. The following are string values used to define colors:
'p' (primary)
's' (secondary)
't' (tertiary)
'a' (accent)
'x' (auxiliary)
'o' (other)
This array is used to generate favicon meta tags in the header. Use the following syntax:
$ficons = array(
array('f',16,'ico',true), // favicon
array('s',32,'png',true), // shortcut
array('a',180,'png',true), // Apple touch
);
Where the array values are as follows: icon initial (string), size (number), format (string: 'ico' or 'png'), enabled (boolean true/false)). Additional arrays can be added, but support for them will need to be manually added in the "Construct Favicon List" section of core.php.
This array is used to define layouts based on width, height, columns, and rows. Use the following syntax:
$layouts = array(
'Name'=>array('w'=>'','h'=>'','c'=>1,'r'=>1,'active'=>true),
);
Where 'w' and 'h' are width and height strings, and 'c' and 'r' are numbers of columns and rows.
Render a layout list: $layout_list
There are two block arrays: blocktypes and blocks. The blocktypes array is an indexed array that defines the types of available content blocks. The blocks array is a multidimensional array that defines content blocks. Use the following syntax:
$blocktypes = array('content','nav',);
$blocks = array(
'Block Name'=>array('type'=>'content', 'active'=>true),
);
Where 'type' is a string value that matches any of the blocktypes array values, and 'active' is a boolean value that determines if it will be inlcuded in the block list.
Render a block type list: $block_type_list
Render a list of active blocks: $block_list
Render a list of all blocks: $block_list_all
There are two types of content arrays: contenttypes and categories. The contenttypes array is an indexed array that defines the types of content of your application. The categories array is a multidimensional array that defines content categories, and what content type they ar associated with. Use the following syntax:
$contenttypes = array('blog','ecommerce',);
$categories = array(
'Cat Name'=>array('type'=>'', 'active'=>true),
);
Where 'type' is a string value that matches any of the contenttypes array values, and 'active' is a boolean value that determines if it will included in the category list. These arrays are ideal for working with sorting and filtering content by type and / or category.
Render a content type list: $content_type_list
Render a category list: $cat_list
There are two types of user group arrays: grouptypes and groups. The grouptypes array is an indexed array that defines the types of
$grouptypes = array('admin','editors','guests');
$groups = array(
'Group name'=>array('type'=>'', 'active'=>true),
);
Where 'type' is a string value that matches any of the grouptypes array values, and 'active' is a boolean value that determines if it will included in the group list. These arrays are ideal for working with pages or content that may have different levels of access permissions.
Render a group type list: $group_type_list
Render a group list: $group_list
Base Environment Key Application Helper
core/bekah.php
BEKAH is here to help. She loves you, and will provide a captivating and supportive environment for your application. BEKAH script is used to define static sitewide variables that can be used throughout your application. Modify these as necessary. Below is a reference of all included variables:
These variables are used to configure CORE
$sitename [string: name of application]
$appname [string: alternate to $sitename]
$basdir [string: if running application in a sub-directory (folder), specify the folder location (ex: 'sub-dir')]
$deconstruct [boolean: true/false]
Disable deconstruct to load all core CSS components via /core/css/construct.css.
Enable or disable CORE components.
$butch [boolean: true/false]
$buix [boolean: true/false]
$bfx [boolean: true/false]
$bicons [boolean: true/false]
$flavors [boolean: true/false]
$rebar [boolean: true/false]
Load additional CSS resources via /core/css/construct.css.
$animate [load animate.css (boolean: true/false)]
$filetypes [load filetype icons library (boolean: true/false)]
$fontpacks [load custom font packs (boolean: true/false)]
$default_theme [string: name of theme to be used by default]
$css_themes [boolean: true/false]
Enable to insert custom themes (as specified via the Themes array in KAT) to the header
$tracking [enable tracking codes (boolean: true/false)]
$favicons [add favicon meta data to header (boolean: true/false)]
$tc [enable Twitter card meta data (boolean: true/false)]
$og [enable Open Graph meta data (boolean: true/false)]
$jquery [enable jQuery (boolean: true/false)]
$jqv [jquery version (number: 1,2, or 3)]
$df [string: date format]
$tf [string: time format]
$today [outputs current date]
$time [outputs current time]
$rmin [random number min]
$rmax [random number max]
$rsl [number: random string length]
$rand [outputs random string within range]
$randomString [outputs random string]
These variables return directory path and URL strings.
$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)]
$bdir [base directory URL ($burl + '/')]
$app_files [full URL path to /app/files/ directory]
$app_audio [full URL path to /app/files/audio/ directory]
$app_video [full URL path to /app/files/video/ directory]
$app_imges [full URL path to /app/files/images/ directory]
$app_docs [full URL path to /app/files/docs/ directory]
$app_data [full URL path to /app/data/ directory]
$app_csv [full URL path to /app/data/csv/ directory]
$app_json [full URL path to /app/data/json/ directory]
$app_sql [full URL path to /app/data/sql/ directory]
$app_xml [full URL path to /app/data/xml/ directory]
$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]
Get the number of files in the /app/files/ and /app/data/ folders:
$files_fc /app/files/ file count
$audio_fc /app/files/audio/ file count
$docs_fc /app/files/docs/ file count
$images_fc /app/files/images/ file count
$video_fc /app/files/video/ file count
$files_total total file count for all files directories
$data_fc /app/data/ file count
$csv_fc /app/data/csv/ file count
$json_fc /app/data/json/ file count
$sql_fc /app/data/sql/ file count
$xml_fc /app/data/xml/ file count
$data_total total file count for all data directories
$total_fc total file count for both files and data directories
$browser_lang gets browser language (ex: 'en')
Build Renderable Application Data (BETA)
core/brad.php
BRAD is rad and he's here to provide you with data for your application interface. This core data is static (read-only), and it can / will be used to:
Currently in BETA, there will be four types of data: CSV, XML, JSON, and SQL. At this time, only CSV data is used. All BRAD data is found in the /core/data directory.
There are several form select (dropdown) inputs available that all use CSV data to prepopulate them. The CSV data files are located in the /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
Depending on your current location, all country and timezone selectors should be pre-selected to correspond to your current location. The same applies to state / province selectors if you're in the US or Canada.
America/Chicago
CDT