How to create New Design Blocks

Structure

The typical structure for a design block is:

<section class="fdb-block">
  <div class="container">
    <!-- Content goes here -->
  </div>
</section>

Where header or footer tags are going to be used instead of section if the design block is a header or a footer.

Content

The Froala Design Blocks are built on Bootstrap 4. The content of a design block can be either some text block or a .row with columns, following the Bootstrap docs.

General rules

• For each individual design block use very few or no custom CSS. Our goal is to create standardized and easy to customize web design, and this can only be achieved with CSS rules that can be made generic and used in all design blocks. In some rare cases, for some specific design blocks, custom CSS will however be required. This can be seen in the teams design blocks category.
• Use Bootstrap utilities classes where needed, instead of writing custom CSS (e.g. spacing).
• Design blocks must be responsive. Not only columns, but also the utilities classes can be used for specific breakpoints.

Froala Design Blocks styling

In the Froala Design Blocks there are some predefined classes for button styles. These classes are .btn, .btn-empty, .btn-black, .btn-white, .btn-shadow, .btn-round. All buttons must have the .btn class. The other classes can be used for styling purposes, either alone or combined. An example with this button styles can be seen in the css.html file.

Need more?

If you think that this guide needs more information or it can be improved, please open an issue with your questions or suggestions.