Design Highlights

Responsive Design

CSS media queries establish breakpoints for altering the layout according to screen width. Through CSS alone the navigation menu can be stacked vertically for very small screens or spread out to a horizontal bar. Some rearranging is done by manipulating widths and display modes.


Pages have breadcrumb navigation as well as links to adjacent content. The navigation menus up top are made by Processwire's versatile MarkupSimpleNavigation module. Current methods for detecting touch screen devices are not 100% reliable so we always show icons you can tap to open submenus. All of these are automatically maintained.

Fluid Grids

There's a two column content area. We're using tiny but powerful PocketGrid CSS. A little Javascript helps manage borders on the side by side content boxes. Unless the responsive breakpoints have reduced the layout to a single column the one side will be wider than the other. In the layout function for catalog pages we compare the relative sizes of the content for those two boxes and if the content for the left is bigger than the content for the right we use alternative CSS which makes the left wider than the right.

Groups + Items = Catalog

Items are individual things in the catalog. Groups are collections of items.

Different kinds of groups and items can be established with different handling and styling.

You can add groups and items one at a time using forms in the admin interface or use the versatile Flexo Sql Import module for importing group and item information in bulk from MySQL database tables.

Other Features

Let us know what you are interested in. 

  • Categories and Tags
  • Site-wide search
  • Items appearing in multiple groups
  • Item to item relationships
  • Group to group relationships
Contact us Flexo Catalog  by SB3D
Powered by ProcessWire Open Source CMS/CMF 0.06s cache