SuperFlexi Flip Box

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

10/30/2017 12:30:15 PM
Total Posts 22

SuperFlexi Flip Box

I'm being a bit lazy posting this, but does anyone know of any easy way to use the SuperFlexi Icon Blocks to make a nice flip effect like this: ?  I think it would be a really good use for icon blocks if they could flip and contain more detailed information on the "back" side of the block.



10/30/2017 3:00:59 PM
Total Posts 181
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: SuperFlexi Flip Box

Hi Rob,

This shouldn't be too difficult - you can even use the CSS from the codepen you linked to if you'd like. SuperFlexi is fully documented, I'd recommend you read through the docs before attempting this. Here are most of the key steps you'll need to follow, without getting into the exact details of the HTML & CSS side:

  1. Include the CSS for the flip boxes in your skin just as you would any other CSS.
  2. Duplicate the Icon Blocks solution in /data/SuperFlexi/Solutions and rename it (maybe call it "Flip Blocks").
  3. Rename the "icon-blocks.sfFields" and "icon-blocks.sfMarkup" files (for example to "flip-blocks.sfFields" and "flip-blocks.sfMarkup").
  4. Generate a new GUID and update the fieldDefinitionGUID at the top of both files.
  5. In your Markup Definition, change the "name" attribute near the top to "Flip Blocks" - then do a find for "icon-blocks" and replace it with "flip-blocks" (or whatever else you want to use for your CSS classes)
  6. In your Field Definition, change the "name" attribute near the top to match the one you put in the Markup Definition.
  7. In your Markup Definition, change the content of your <ItemMarkup /> element to be pretty much like the HTML from the codepen you linked to, but only add a single instance of the div with the class "hover panel" and its children. (if you want gridding, and you're using a Framework skin, you'll need to leave the wrapping div with the grid class, but replace their "col_third" with our "col-md-4" - you can also leave the flexbox classes if you want but I can't promise they won't mess up the flipbox effect.
  8. Also inside the <ItemMarkup /> element, replace the actual content with the appropriate tokens. For instance, <p>Front Side</p> might become something like this:
    <div class="flip-block__icon">
    	<i class="$icon$"></i>
    <h3 class="flip-block__title">$title$</h3>
    and <p>Back Side</p> might become something like this:
    <div class="flip-block__body">
  9. Lastly, either comment out the <style> element altogether, or change it's name away from "iconBlockBaseCSS" and change the referenced file name as well.

If you set this up and run into any trouble I'll be happy to troubleshoot it with you.

Hope this helps!

10/31/2017 7:13:49 AM
Total Posts 22

Re: SuperFlexi Flip Box

Thanks for the detailed response Isaac.  I appreciate the direction.

11/3/2017 9:23:48 AM
Total Posts 17

Re: SuperFlexi Flip Box


I would be most interested in this - maybe include in 2.6.1 ?

Lets Hope!