Introduction
Custom Brics require a specific directory structure in order to work and compile correctly.
Please note, the Bric Builder that comes with Blocs 2.5+ 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 files located within this directory will be automatically added to the target page header attachments for use after 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.
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 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.