Make Views:Services grid default settings 4 columns

[stpaultim]

Issue raised by @izmeez

The Views:Services grid settings default to 3 columns which is the same as the Backdrop default cards view and a common trend these days.

However, I would like to suggest using a default of four. A default of 4 allows for a greater variety of useful appearances on devices from narrow/phone = single column, landscape/tablet portrait = two columns and wide/tablet landscape = four columns. And is a common application of 12-column grid templates and can be extended in multiples of even numbers.

It will require expanding the default component block display to four from three.

[stpaultim]

@izmeez

Thanks for this suggestion. I decided to base this theme on an existing Wordpress theme, to leverage an existing design that feels good and useful and to save us the time of creating an entirely new design. In the Wordpress theme we are using, they use 3 columns as the default for the services section, so I start there.

However, I do not want to lock us into adhering to the Wordpress design precisely and am open to making changes where it makes sense.

I think the risk of going to 4 columns is that you need 4 or 8 or 12 items to get multiple even rows. With three columns - 3, 6, 9, or 12 all result in even rows. So three columns seems more versital to start with.

We could make sure that the theme supports both 3 and 4 columns and even provide some instructions to make it easy for someone to switch between 3 and 4 columns. I'm not wed to 3 columns and will see if anyone else has an opinion on this.

I may even go so far as to try 4 columns and provide a screenshot for folks to respond to.

[stpaultim]

I have made some tweaks to the CSS provided by the Digial Agency Recipe Package that will ensure that if one simply changes the view for this feature to 2, 4, 5, or 6 columns, the grid should still look good and be responsive.

[izmeez]

I may not be testing this properly.

1. Created a backdrop sandbox at http://backdropcms.org/demo
2. Login to demo sandbox.
3. Go to https://github.com/backdrop-contrib/services_recipe and right click download link to save link address.
4. In demo sandbox install new module manually and paste link address, https://github.com/backdrop-contrib/services_recipe/archive/refs/heads/1.x-1.x.zip
5. Enable newly added modules, search for "Services" and enable both the services_recipe and services_sample_content modules.
6. Go to home page to view Services.
7. Does to appear to be responsive with default 3.
8. Use contextual filter to configure view. Change grid settings to 4. Needs extra content.
9. Still not responsive.

I may be missing a step or two. May be this issue needs to be with the services_recipe code repo?

[stpaultim]

@izmeez - Good point that I may not have explained enough.

I don't know of any way to make it responsive with configuration alone. If anyone can suggest a possibility, I can modify the recipe to make it responsive. We are still struggling a bit with definitions. Currently, I working with two types of recipes:

Config recipes - recipes that can be turned off without loosing any of the config. Recipe packages (or bundles) - the name for these is still under development. But, these recipe/modules bundle recipes together and potentially and potentially provide glue code or CSS that requires they stay enabled.

The Digital Agency recipe package (can not be disabled) contains the following recipes that can be disabled without loosing anything.

• Services Recipe
• FAQ Recipe
• Testimonial Recipe
• Portfolio Projects Recipe
• Contact Us Webform Recipe

The Digital Agency recipe includes some CSS to fix things and make some of the other recipes responsive. The Digital Services recipe can not be disabled without loosing these features.

So the Services Recipe will only be responsive when use with a Recipe Package such as Digital Services or another theme that supports it.

I think that is the best we can do for now. Unless we make changes to Basis, which has proven very problematic.