Customizing Flow classes

[mwentz]

I was hoping to use Flow to create a Bootstrap grid, but a number of issues have come up.

First of all, I was hoping to create page layers by using a Container widget. I was able to create a widget to contain other widgets but I am running into two issues:

• I want to be able to add custom classes to each container. I added a field called "classes" but that just shows up on the page. I have tried creating templates, but can't for the life of me figure out how to apply that field as the classes, then show the rest of the content.
• Each widget is surrounded by a section tag with a class 'flow', so I am ending up with a bunch of extra markup. I tried creating a Widget.Wrapper.cshtml file which is what I thought could manage this, but it isn't changing anything.

Second, I'm hoping to use the Bootstrap grid column classes (such as 'col-md-6') instead of the 'widget-size-50'. I guess I could extend bootstrap in the sass, but that wouldn't allow me to use 'col-sm-6' in one place and 'col-md-6' in another. Is there any way to extend the flow sizing functionality to work with Bootstrap grid or any other kind of grid?

The only way I can figure out to get around this is to use a single HTML field for each section containing all the container tags and classes, but that isn't very friendly to content editors.

I'd love to hear if there are ways to do this that I haven't figured out or come across yet. Thanks!

[ns8482e]

Flow uses percent based column(25%, 33%, 50%, 66%, 75% 100%). Each Flow widget has following predefined classes for which you can write css rules

• widget: applies to all widgets
• widget-{ContentType}: applies to specific content type widget. eg widget-paragraph for Paragraph widget
• widget-align-{Alignment}: for selected alignment
• widget-size-{Size}: for selected size %.

Using scss/sass you can define/override any of above css classes without modifying template.

FlowPart template adds a section tag with class flow. If you don't need section tag you can override FlowPart.cshtml.

Another option is to ignore block rendering of section tag by setting display to content for flow class as below.

.flow
{
  display:content
}

Sometime back I have written some tips on flow can be found here https://github.com/surevelox/OrchardCore-Power-Tips/blob/master/Flows.md

[mwentz]

Thanks, this was very helpful. I ended up having to build on quite a bit more by creating multiple containers to hold my content as well (Container and Row) and adding "class" fields to each one so that I could fully customize rows and containers. Works very well, though I am probably going to need to do some CSS customizations in the admin to help an editor see and understand the containers.