CSS/JS Framework

If you want to make a (responsive) concrete5 theme, concerte5 supports the following framework

Bootstrap

Foundation

960Grid

If you are not sure which framework to use, we highly recommend to use Bootsrap. In concrete5.7.x., most of the basic blocks and page are built with Bootstrap. So you may be able to reduce the number of hours.

However, concrete5 use different version of Bootstrap. Be careful.

When using Foundation, you may need to be careful. But you don't get affected by the Bootstrap version.

Z-index (Required)

Don't do anything to depends on file upload location (Required)

Don't code anything that rely on uploading the images to the same directory where a concrete5 editor can freely edit and change.

In concrete5, images and other assets are uploaded onto the directory which are randomly generated.

For example, you won't be able to execute auto mouse over image effects by adding _over postfix to the file name. (unless the image assets are stored in theme folder and the image filename are hard-coded.)

Coding Requirement

Provide ALL patterns of blocks

Based on the spec and design data, provide all design patterns of coding.

Example: Left aligned, center, and right aligned image.

Provide the patterns when the text, image and/or data is empty

Consider the coding when elements are empty.

Example: When thumbnail image of Page List is not present, the position, margin and padding of page title won't be messed up and etc.

Consider the Pattern of Repeated Elements

When showing the repeating elements, don't break the design layout by increasing and decreasing the number of elements.

When showing the grid style elements, don't messed up the layout by increasing and decreasing the number of elements.

When showing the grid style coding, don't wrap the elements by each row but entire section of the block.

Make sure to provide coding with repeating elements of various patterns.

If necessary, provide the coding when elements are empty or 1 entries when multiple entries are expected.

Example: When there is no result in Page List block, do you want to show other stuff or simply blank?

Example: When a slideshow block only has one image, do you still want to display pagination interface or transition effects?

Consider the Size of Repeated Elements

When coding grid content and must match the height of each elements, provide JavaScript to adjust the height of each element

If JavaScript option is not available, consider to create a block that has one (1) row. And if you want to have multiple rows, add more blocks.

Exmaple: There is a grid design Page List with thumbnail, date and page title elements. When the length of page title differ, the height of each block differs and messes up the layout.

Consider the Volume of Text

Consider the patterns when text is shorter and longer than expected.

Example: When you have a aligned image + text block without proper clearfix, the layout could messed up when you have shorter text.

Exmaple: There is a Page List block with thumbnail, date and title. If the page title become two-lines, it could messed up the layout.

Consider Edit Bar on top when you have fixed navigation or anchor link

When a user with edit permission comes to concrete5 site, concrete5 will place 49px height edit bar on top. This may cause some inconvenience to the editor. She or he may not be able to see the global navigation or the anchor link will be right behind the edit bar.

Therefore, you may want to prepare the special CSS and JS code that will ONLY be inserted when the user see the edit bar.

Coding Recommendation

Try to make the block coding as generic as possible so that it can be used for other pages

Blocks can be placed anywhere in the area (unless you resrtict via permission settings)

Try to avoid the coding that can only be used at certain area. For example, the certain area is wrapped with certain div. The block is inheriting the CSS from it. (There may be some exception such as header, footer or the area with different background color)

BEM (Block Elements Modifier)

We recommend to embrace BEM method.

https://en.bem.info/

Use of LESS

From concrete5.7.x, it equipped with LESS compiler.
Except when previewing HTML template, there is no need to compile LESS.

We recommend to use LESS, But not necessary as long as you can provide compiled CSS file.

Coding Guideline for Each Block

Content

Content block uses Redactor JS library, and print out the following coding. It print out the code without class and ID. You may want to adjust your CSS by the following two patterns.

Default

Content block won't wrap any div.

You may want to wrap the certain div in Area.

Recommended

Make each Content block wrap with <div class="wysiwyg"></div>. In this case, you must override Content Block.

You should try to avoid the situation that a concrete5 user has to manually type CSS class or ID by going into code view of Content Block. If there is a certain pattern such as adding additional <span> tag to H tags, consider making a custom JS.

The following is the sample HTML coding of Content Block.

You should make CSS based on the following sample. Or we recommend to create the sample pattern by yourself by making a actual content block in concrete5, and provide those coding to the coder to adjust CSS>

Related Document of customizing Pagination

Image Slider

You can apply the similar coding to the page list block.
If you want to use any particular slideshow JS library, make sure it won't cause any conflict against concrete5's JS and other theme's JS.

If you want to create a image slideshow that has a thumbnail navigation, you must print out all thumbnail images in HTML, then use JS to create thumbnail navigation.
Example: http://memocarilog.info/memocarilog-demo/galleriffic-demo/