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.
- Front End Development
- CMS Implementation
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;
This established a de facto masonry grid. However, there was an unintended consequence where child elements were getting cut-off.
To remedy this, I added the following declaration to the child elements:
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.
To accomplish this, I used the
only-child pseudo class on the child elements with the following declaration:
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;
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.