Design Guidelines

Add & Edit Dialogs

Concrete5's edit interface makes heavy use of the Bootstrap 3 user interface toolkit. This special build of Bootstrap namespaces its CSS classes within the "ccm-ui" class, but block developers don't have to worry about including this class in their HTML. This is automatically included in the dialog window. Bootstrap isn't required – any markup will likely work in a block dialog, but it does create nice looking forms. The Hello World Block uses some basic Bootstrap styling.

Inline Blocks

Inline blocks that include their own toolbars should use the "ccm-inline-toolbar" on a UL element to create this toolbar. This will ensure that the toolbar affixes to the top of the browser window.

View Layers

Nothing special is necessary to style a block's view.php. To repeat: nothing special is necessary! In general, a best practice is to use classes that begin with "ccm-block" and then use the block's handle. For example "ccm-block-page-list-title" and "ccm-block-topic-list-wrapper." This isn't required.

Loading Conversation