What is InstaFilter
InstaFilter is a project file, but you can think of it as a special kind of stack designed to filter content on a webpage. It is built exclusively with Foundation 6 stacks, which are beloved by many ❤️, and enables content filtering without requiring any user interaction with JavaScript. The code integrates seamlessly into the page, allowing you to forget it's even there and focus solely on design.
The InstaFilter project file is configured to work perfectly with Block Grid, Columns Pro, and Container stacks for grid creation. It also includes a variety of example pages that utilize the Bento, Feeds, Total CMS and Photo Pro stacks.
However, there's no need to worry if you don't have these specific stacks; InstaFilter ensures accessibility for all Foundation 6 users with pages that rely solely on F6 stacks.
How InstaFilter works
InstaFilter searches through the text within each grid item. If it detects a match for at least one word (or even part of a word), the grid item is returned as a result.
Entering two or more words in the search field will return all items containing at least one of those words.
By enabling the Exact words feature (accessible via an icon on the right side of the search field), the search will only return items that contain all the entered words, exactly in the order they were input.
The filter also searches for hidden content not visible to the user. For example, if a grid item includes hidden text with the word rapidweaver, and a user searches for rapidweaver, that item will be included in the search results. This feature allows for the inclusion of data to filter grid elements without displaying them to the users.
Stack integrations
InstaFilter is set up to work with native Foundation 6 stacks:
F6 Block Grid
F6 Columns Pro
F6 Container
InstaFilter is set up to work these third-party stacks:
Feeds
Bento
Total CMS
Photo Pro
and Photo stack
Customize styles and layouts to suit your preferences!
InstaFilter is not designed to be a collection of layout templates for the search function.
However, it does provide numerous example pages, including those with non-F6 stacks, serving as a starting point for you
to customize the styles and layouts to your preference using F6 swatches.
How you can display content
By enabling the appropriate Pen stack, which contains the JavaScript code,
the grid containing content to be searched or filtered can be organized in three main ways:
Visible Grid
In this configuration, the grid containing content to be searched or filtered is visible on page load.
Hidden Grid
In this configuration, the grid containing content to be searched or filtered is hidden on page load; the contents are only displayed when a search is initiated.
Overrlapping Grid
Similar to Hidden Grid (in fact it uses the same JS code), but it presents content in a unique way: through a drop-down container that overlaps the page content.
Features
Built with Foundation 6
Standard F6 stacks like Block Grid, Columns Pro, and Container are perfect for creating the content grid, but InstaFilter is also fully compatible with Bento, TCMS Blog List and Photo Pro. And when used in combination with Feeds or TCMS Total Loop it will give you superpowers!
Plus, if you're looking to incorporate other stacks or third-party stacks as grid items, you can easily do so by assigning the instaFilter-item class to each grid item.
Live in-page filter
You can search for any words, or for an exact match, simply click on the corresponding icon to enable the exact words functionality.
Button filters
You can effortlessly create filter links using the F6 Button stacks by simply entering the desired filter text into the button label.
Select Box filters
You can effortlessly create filter dropdown lists using the F6 Select Box stacks, by simply entering the text you wish to filter into the select option.
'More Filters' area
It is a hidden section where you can insert all the filters you need in order to always maintain a clean layout, which the user can view with a simple click.
Data List
You can also use the Datalist stack with the Text Input stack to display a list of suggested words when the user clicks on the search field.
'No results found' content
You can set the content to be shown when no results were found.
Hidden from view, not from action
Content set as hidden can still be subjected to filtering. This offers a practical solution for situations where you prefer not to display specific content, yet wish to retain the ability to filter through it.
InstaFilter works with content already loaded on the page and only with one instance per page.