Documentation

 

Filter Base Stack

The Filter Base Stack is where all your Filter Items will reside. Use the circle + button to add the style of Item you want to add to your "list".

Filter Items come in 3 different flavors, Open, FAQ and Catalog.

Open Item

Open Items are completely "open" to whatever you would like to use as a list item. This is the most flexible item available.

FAQ Item

FAQ Items allow you to insert a Question and Answer style setup. The top stack-dropzone is used for the "Title" ( or question ). This item is always displayed. It is a click-trigger to reveal the contents of the bottom stack-dropzone ( the "Content" ).

Catalog Item

Catalog items allow for an Image and Content. This item is specially designed so that the image will display correctly when the layout is switched between Grid to List. This item is great for Catalogs, Online Stores and any situation where an image and content is needed.

  1. Default Layout: The Layout Filter, Grid or List, will use by default when the page loads.
  2. Grid - Equal Heights: When the grid layout is displayed all the cells will display with the same height.
  3. Wait for Images to Load: Filter will wait until all images are loaded before calculating the layout. This is generally a good idea, especially when using grid style layout.
  4. Default Filter: Value to filter on when page loads. Leave blank to show all items.
  5. Combo Filter: When enabled, the user will be able to select multiple category buttons to focus down to the exact match they want.
  6. Combo Type: The type of combo filter that is applied. AND will filter and show items that are " Red AND round AND smooth". OR will filter items that are "Red OR blue OR gold". AND is the more focused combo filter type.
  7. Transition Speed: The speed in which the items are animated. 1 is fasted, 0 is no transition at all.
  8. Grid Width: The percentage width for columns in the grid layout. An example would be 5 columns = 20%, 4 columns = 25%, 3 columns = 33%, etc...
  9. Grid Gutter: The amount of space in pixels placed between grid cells.
  10. Padding: Padding in pixels inside of each item container, grid and list style.
  11. Grid Text Align: The text alignment used on items when in grid style layout.
  12. List Text Align: The text alignment used on items when in list style layout.
  13. Border Color: The color used for the border on items. Grid uses all sides while List only has a bottom border.
  14. Background Color:The color used as the background for each item.
  15. Border Width: Width in pixels of item border.
  16. Border Radius: How much of a curved edge on the item borders.

Filter - Controls

The Filter - Controls stack allows you to add elements that will control your list of Filter items. The choices are Search or Buttons. The Search Controls will give you a search input field , as well as, optional Layout and/or Sort buttons. The Buttons Controls will dynamically build a list of buttons from the Category Tags assigned to all items on the page.

Filter - Controls (Search)

  1. Type: The type of Controls desired, Search or Buttons.
  2. Placeholder: The text to use as a placeholder in the Search field.
  3. Placeholder: Color to use on the placeholder text in Search field.
  4. Show Layout Buttons: Enable if you want to include the Layout ( Grid/List ) toggle buttons with Search field.
  5. Show Sort Buttons: Enable if you want to include the Sort ( Ascending/Descending ) buttons with the Search field.
  6. Background: Assign the colors to use on Background of the Search field, as well as, all buttons. 
  7. Text: Assign the colors to use on Text of the Search field, as well as, all buttons. 
  8. Border: Assign the colors to use on Border of the Search field, as well as, all buttons. 
  9. Border Width: Width in pixels used on all Search elements.
  10. Border Radius: The Radius on Search field and Buttons.

 

Filter - Controls (Buttons)

 

  1. Type: The type of Controls desired, Search or Buttons.
  2. Show All Label: Text Used on the "Show All" button.
  3. Alignment: The alignment ( left,center or right ) to display the generated Category Tag buttons.
  4. Font: Font family to be used on the Category Tag buttons.
  5. Button Padding: The padding values to be used on generated Category Tag buttons.
  6. Background: Assign the colors to use on Background of the generated Category buttons.
  7. Text: Assign the colors to use on Text of the generated Category buttons.
  8. Border: Assign the colors to use on Border of the generated Category buttons.
  9. Border Width: Width of border surrounding buttons.
  10. Button Radius: Control the roundness of each corner of your buttons.
  11. Inline Buttons: When enabled buttons will float left-to-right next to each other. When disabled the buttons will have full 100% width and be positioned top to bottom.

Filter - Item (Open, FAQ and Catalog)

Filter Item stacks all have the same settings, Category Tag(s).

 

  1. Category Tag(s): Comma separated list of Tags assigned to this item.
  2. Image Title*: Title of image used in lightbox display.
  3. Image Lightbox Effect*: Add lightbox effect to Image with nice hover effect.

* Only available on Catalog Items

 

 

 

Last Update: 2016-01-26T20:10:45Z