The Small Business Anti-Displacement Network seeks to provide small business leaders with the tools and capacity to combat the conditions that make disadvantaged businesses in gentrifying neighborhoods vulnerable to displacement.

Visit Website

Services

  • Front End Development
  • CMS Implementation

The Toolkit

The key to the Toolkit is to take in a variety of inputs and give the user the tools, strategies, and examples most relevant to the user’s unique situation. This involved carefully architecting two custom post types and eight taxonomies. Then, using the tried and true combination of SearchWP and FacetWP. SearchWP allows for the creation of supplemental search engines that override the WordPress built-in search. Specifically, SearchWP allows users to search against taxonomies. FacetWP provides the UI elements, specifically the multi-select dropdowns, checkboxes, and search field. It also allows for advanced templating of the search results using WordPress’s standard loop structure.

Kudos to the team at Drio for designing a beautiful, intuitive interface that distills a tremendous amount of data into actionable search results.

Lightweight Masonry Grid

All CSS. Using CSS columns, I defined 2 columns with an ideal width of 300px and a 2em column gap with the following:

columns: 2 300px;
column-gap: 2em;

This established a de facto masonry grid. However, there was an unintended consequence where child elements were getting cut-off.

Screenshot of the Toolkit showing content of child element in the first column column cut-off and continued into the second column.

To remedy this, I added the following declaration to the child elements:

.child{
break-inside: avoid;
}

Finally, since their was filtering, there would be conditions where only one result would be returned and I wanted that one result to be full width instead of 300px.

Screenshot showing a full width child element as the only result from the filtering of the Toolkit.

To accomplish this, I used the only-child pseudo class on the child elements with the following declaration:

.child:only-child{
column-span: all;
}

Submenu Styling

Screenshot showing two pixel gap between submenus.

That little gap between submenus is trickier than it looks. Setting a two pixel left margin breaks the hover state of the submenu. To get the gap to display properly, I used the following declaration:

border-left: solid 2px transparent;
background-clip: content-box;

So, that’s actually a transparent border that is visible because the submenu background color is painted within (clipped to) the content box.

Bmore Creative, Inc. partnered with Drio for the websites.