CheckMate uses a modern CSS-based flexbox system to align checkboxes and their associated labels. Items are arranged top to bottom and left to right using optional CSS columns. The end result is a robust and highly-flexible layout that'll work almost anywhere.
Another good feature is that you have lots of control over the size and colour of the checkboxes, letting you customise their style to match your existing theme. If required, the checkboxes can be appended to another part of the page, like a theme sidebar or ExtraContent container.
Content items purposefully don't receive any styling of their own, like borders, backgrounds or shadows. This gives you complete freedom to use other stacks (like 1-column stacks or Shady) to apply desired styling.
Another good feature is that you have lots of control over the size and colour of the checkboxes, letting you customise their style to match your existing theme. If required, the checkboxes can be appended to another part of the page, like a theme sidebar or ExtraContent container.
Content items purposefully don't receive any styling of their own, like borders, backgrounds or shadows. This gives you complete freedom to use other stacks (like 1-column stacks or Shady) to apply desired styling.
Example
This is a real working example of CheckMate. Use the checkboxes to hide or show t-shirt designs, based on colour. Of note, items that have been allocated more than one category can also be filtered.
In the real world, you could easily include text against each item, links or 'add to cart' buttons. Each CheckMate item can comprise of any basic stacks; including text, Markdown, HTML, images, buttons, audio and video.
Tags are basically class selector names. Most commonly, you would use single words to 'tag' items and checkboxes. Giving an item a tag of 'apple' and then setting up a checkbox to toggle items tagged 'apple' would mean the checkbox would control the display of all items tagged 'apple'. It is possible to allocate multiple tags to items - just separate them with spaces.
Four item arrangement settings are available in the stack settings. Which ones you choose to use is a decision based on the type of content you want to display within CheckMate:
Setup
Follow these quick-start instructions for using CheckMate in your own RapidWeaver websites:- Install the stack in the normal way. Open your Stacks Library. Search for 'checkmate'. Drag and drop a copy of the stack into your page.
- Press the uppermost button in edit mode to add checkboxes. Each checkbox comprises of a tag or category name and the label text to show next to the checkbox.
- Press the lowermost button to add content items to your CheckMate stack. Assign one or more tags to each item, to correspond with checkbox items.
Tags are basically class selector names. Most commonly, you would use single words to 'tag' items and checkboxes. Giving an item a tag of 'apple' and then setting up a checkbox to toggle items tagged 'apple' would mean the checkbox would control the display of all items tagged 'apple'. It is possible to allocate multiple tags to items - just separate them with spaces.
Four item arrangement settings are available in the stack settings. Which ones you choose to use is a decision based on the type of content you want to display within CheckMate:
- CSS Columns Better to use for items of different sizes (like blocks of written text). Items are tiled top to bottom, and then left to right, like newspaper columns. The end result resembles a Pinterest-style masonry grid.
- CSS Flexbox Good to use for items of roughly the same equal size (like thumbnail images). Items are tiled from left to right and down the page.
- Table A more rigid framework. Items have fixed widths and heights and are tiled from left to right and down the page.
- Vertical List Items are stacked vertically in a single list, much the same as you see them presented in Stacks Edit Mode. No columns or grids are applied. Printed CheckBox stacks use this same layout too.
Accessibility
It is vitally important that all users to your website can fully navigate the page content. With this in mind, CheckMate supports selection of checkboxes using the keyboard tab key, and spacebar to select or deselect a checkbox. Screenreader software will read aloud the label of each checkbox. This ensures CheckMate can be used without aid of a mouse or touchpad. CheckMate is a particularly good stack to use in accessible websites and webapps.Privacy Settings
You are welcome to change your privacy preferences here.
By using this website, you agree to the privacy policy
