'Flexcards' theme for Bolt CMS

Using Bootstrap 4

Flexcards is made for the famous Bolt CMS (> 3.0), working with Bootstrap 4 'card' component for a simple, dynamic and flexible grid layout. For developing and extending flexcards you will need to work with .twig-Templating and Bootstrap 4 (see Resources below).

• Theme features
• Installation
• Configuration
• Resources

🔕 Before you start using this experimental work for production you should probably read about what browser versions are supported with Bootstrap 4 alpha. Current 4.0.0beta-Version has no page available for this, but you can have a look here about former alpha version: Browsers supported

Features

Flexcards is using Bootstrap 4 card component for a gallery-like (or 'pinterest-like' you might throw in) solution for blog entries or any other content, ordered in read direction for all devices, using paging if needed. The cards can contain any contenttypes, by default it relies on 'entries' and 'pages' contenttypes.

Since version 0.1.1beta flexcards has responsive image support with common tags and in use of built-in Bolt CMS thumbnail generation without extensions. Flexcards supports proportional image resizing, addressing width and height of the uploaded original image.

####Default structure

Layout with ordered cards

It provides a responsive 4 columns grid based on 12 columns grid of bootstrap. You can extend flexcards to provide fixed positions for a card (see section Configuration).

Note: Flexcards javascript does not make use of jQuery or masonry scripts, and flexcards is shipped with slim version of jQuery and popper.js (because bootstrap 4 needs it). And no, the theme does not cover parallax, lazy loading and other 'hidden content' design.

Installation

Requirements

• New or updated installation of Bolt CMS >= v3.2.0
• All assets are included with distribution

You can also give older Bolt versions ^3.0 a try but, please do not file any issues based on older versions. Current 'Flexcards' development is based on Bolt CMS v3.4.

Install via 'Extend' on Dashboard

You will need to install the famous Bolt CMS on your server, or update your current Bolt install to latest stable release. Flexcards is available in the Bolt extensions store and it is available directly in your bolt dashboard. As administrator of the site navigate to 'Extend' and search for 'flexcards'. Installation is self-explaining, in case you are running into problems read here.

Install manually

In case you will give an older Bolt CMS install a try or unknown restrictions on your server do not allow bolt dashboard installations) you can download flexcards from github and install it directly on your server. Just unzip the flexcards folder into your themes folder and set 'flexcards' as theme in your config.yml.

Configuration

Basic configuration in flexcards/theme.yml

# Content for frontpage
# ---------------------
# Defines the content lookup for the cards on frontpage.
# By default flexcards takes 10 latest records of contenttype 'entries'
contenttypes: entries
orderby: -datepublish
limit: 10
    
# Logo
# ----
# default is 'brand/flexcard.svg'
# set to 'false' to skip logo at all
logo: 'brand/flexcard.svg'
    
# Footer
# ------
# You can bring up your own html here, but
# in case you want to extend your footer with additional content like
# menus or widgets you better have a look to partials/_footer.twig
footerhtml: "<p>Your footer html goes here.</p>"
    
# Pager
# -----
# These are experimental responsive pagers (pagination) for Bolt CMS.
# You can activate this stuff separately, or disable it at all
# with setting it to 'false' and implementing your custom paging system.
    
# Listing pages
# -------------
# Define which contenttypes should show up with date and authors
# on listing pages
showmeta: [ Entries, Showcases ]
# Define count of cards on listing pages separately, affects paging
listing_records: 10 

# Block column in record.twig
# ---------------------------
# Define the blocks that appears in the right column at fixed position.
# Default is appearance in the right column in all contenttypes using
# record.twig as template. Create blocks with unique aliases like shown
# below and edit this lines:
blockcolumn:
   block1: block/about
   block2: block/services
   #block3: block/custom3
   #block4: block/custom4
   #block5: block/custom5
   # ...

Extending: Cards at fixed positions

You can provide custom positions and 'sticking' for the cards without changing Bolt query strings. Card position follows right-to-left, top-to-bottom. For extending with fixed positions will need to add an additional field in your contenttype used for the cards.

Here is an example of adding a position field to 'entries' content in app/config/contenttypes.yml (or via dashboard Configuration->ContentTypes). This example will show a new editable field position on top of entries, after updating your database (Configurarion->Check Database).

entries:
    name: Entries
    singular_name: Entry
    fields:
+       position:
+           label: Grid position
+           type: integer
+           group: content
        title:
            type: text
            class: large
            group: content
            ...

This will show up when you edit 'entries' now (after updating the database):

Resources

All the standard scripts and css are included in the theme (no CDN links). For more information about using this resources for your own work:

• Bolt CMS templating
• bootstrap 4 as component library
• twig 1 & 2 docs used for advanced templating with Bolt CMS
• jQuery 3 watch out for no-jquery solutions or use this slim version at least
• popperjs because bootstrap says it is ultimative for popups