Hi everyone,

I am fairly new to Backdrop but already like it a lot; coming from Drupal I specially love how well curated the core module selection is, I like the quasi-paragraphs-style layout approach and the overall "cleanliness" of the structure; I hope I can use it to make powerfull small-to-mid sized Websites without getting into the "dependency hell" sometimes created by the modular approach of Drupal - almost everything I need is already in core. Thank you for that!

That being said I have a question about Themes, Layouts and specially the flexible layout builder.

Now I am familiar with D7 Theming conventions, Templates/Overrides, Subtheming, Preprocessing/Hooks etc. and I understand the concept of Layouts. But I've got a few assumptions (please tell me if I am right or wrong) and questions:

  • Backdrops Basis seems to use a grid system similar to bootstrap (container/rows/cols), but is not exactyl using BS, right?
  • If I'd like to use a different grid system: In order to make the layout drag/drop functionality work flawlessly in the backend the admin theme would have to use the same grid system?!
  • The output code for the flexible layout builder is provided by core/modules/layout/layout.flexible.inc; is there an easy way to "override" this to provide different layout row html? (the default column options would be sufficient)

tl;dr: I would like to make a minimalistic starter theme for my projects, maybe based on pico and flexboxgrid. a) (more important) is there a way to avoid to create a separate admin theme in order to work with the layout builder? And b) is there a way to override the row html output for the flexible layout builder?

Thank you in advance everyone,

Stefan

Edit: Now I've understood that the Bootstrap-like classes are coming from the core/moduls/layout/css/grid-flexbox.css and grid-float.css files which are also loaded in the admin theme/layout manager. That explains the blocks appear in the same layout on the admin theme as on the "frontend" theme.

So far, so good. So no need to use an external flexbox grid library since this approach seems to be quite lightweight already.

But my follow up question would be: what's the point of contrib themes such as bootstrap lite and zurb foundation? What would be the point if there's still the backdrop grid system "superimposed"? (this seems to be the case, right? I loaded the Zurb Foundation 6 Theme and the layout classes were still the backdrop ones and the layout still worked). You'd have the additional zurb layout classes working, but they wouldn't be working in the drag/drop layout manager, right?

Now I could see usecases where I'd base myself on say Foundation or any other framework "as is" and not using the drag/drop block arrangement functionality at all, but that would mean to give away one of the main benefits of backdrop, right?

tl;dr2: a theme independent grid framework seems to be loaded on top of both frontend and backend themes; its classes (container, row, col) seem to work regardless the loaded theme; so: what's the point of themes based on frameworks which provide their own grids such as bootstrap or zurb foundation?

Sorry for the wall of text, I don't want to be annoying, I am just trying to understand the philosophy behind the theming approach in backdrop.

Comments

Olafski's picture

Hi Stefan, welcome to Backdrop! It's great to hear your positive feedback and to read your interesting questions about Backdrop's layout system and  its relation to themes.

I guess I can't give detailed answers regarding the use case of themes like Bootstrap Lite. (I use mainly the Basis theme.) That said, I think those themes provide more than a grid system, e.g. Navbar settings, icons, and more.

In theory, a theme can also provide own layouts and/or override the core layouts.

Finally, your question made me curious about the relation between layout templates and the drag and drop interface to rearrange blocks in a layout.

So, I've copied one of the core layouts and renamed the folder and its files to change the name of the layout template. Then I removed some regions like the sidebar from the .info file and disabled the grid library in the same file. Finally, I adapted the template file to remove the  same regions as in the .info file and uploaded the custom layout template to the layouts folder of my site.

In Backdrop, I enabled the custom template for one of the layouts. As a result, my layout template was reflected in a quite realistic way in the interface to rearrange the blocks. Also, drag and drop was still working.

Conclusion: The page to rearrange blocks reflects the layout template file, but the drag and drop behavior doesn't depend on the grid system.

Hi Olafski,

ty so much; yes, I see, Bootstrap et al provide additional tools (Dropdowns, Overlays, Sliders etc.). I've tried to make a template from scratch using just the BS5 CDN Files (for sciences sake) and got to say it works very well...

Your observation regarding the block rearrangement site is interresting, I will look further into that.