Introduction
Custom Brics require a specific directory structure in order to work and compile correctly.
The Bric Builder has the ability to create new custom Brics from boiler plate examples, using these ensures all relevant files and directories are named correctly and present.
Directories
Within a custom Bric there should be 4 directories.
assets – The assets directory is used to store the Bric library and drop cursor artwork files for a custom Bric. The Bric library icon artwork should be named icon.png (retina – icon@2x.png) and the cursor artwork should be named cursor.png (retina – cursor@2x.png).
includes – When a custom Bric is added to a page, any CSS and JS files located within this directory will be automatically added as page or project attachments, depending on the Bric insert location (Global / Dynamic Area). Upon export CSS resources will be placed before the closing head tag and JS resources will be placed before the closing body tag. You can also add image assets into the includes directory, these will be automatically added to the img directory upon export.
js – All of a custom Brics editing logic that is used within the Blocs design environment should be placed in this directory, this code is NOT exported with a project.
templates – All of a custom Brics template files should be placed in this directory. These files are used in conjunction with the storeCustomBricTemplateVal API call and are included in the final export of a project if required.
resources – All files placed within this directory can be accessed using the resource API call or within a Brics HTML content with the short code *resource-path.
Files
Within a custom Bric there should be the following files.
index.html – This file provides a basic work area that is used when DOM (Document Object Model) editing takes place on a custom Brics HTML content. The head can contain various JS resources that can be loaded into the editing environment, the body should only contain the edit area tag.
Example:
<body><editarea></editarea></body>
bric.css – This file should contain all of the styling required for a custom Bric. When a custom Bric is added to a page, the styling rules in this file are automatically added to the Blocs design environment and included in the style.css file when a project is exported. Please keep the CSS used by a custom Bric isolated to the custom Brics HTML content only, do not use styling that could effect DOM objects outside of a custom Brics content, such as the body or heading tags.
data.bric – This is a plist file that contains various information about a custom Bric, including its initial HTML state and the sidebar user interface.