Best practise to convert an existing template to DjangoCMS

I just start to develop a website in DjangoCMS.

To make my life a little easier, I bought a commercial bootstrap theme (already with bootstrap 5).

The theme I bought features multiple example sites each of which is structures in tags.

So in terms of Atomic Web Design (I learned this term when I watched Jacob Rief’s talk earlier today), my theme already features molecules and organisms, I would like to reassemble to new templates and pages.

Now, my question is what would be the best way to translate the different molecules and organisms to DjangoCMS plugins that my editors can later use in DjangoCMS’ admin menu?

Do I need to create a full blown plugin for each of the molecules/organisms?
Would DjangoCMS Cascade help me and if yes, can it cope with bootstrap 5 already?

I think I would just need a few hints that get me started…

Now, my question is what would be the best way to translate the different molecules and organisms to DjangoCMS plugins that my editors can later use in DjangoCMS’ admin menu?

Bootstrap gives you some HTML snippets for all components they offer. I would use their HTML as Django template for your components (= CMS plugins). Then ask yourself which attributes of those components must be parametrized. Create a Django Form field for each of them.

Do I need to create a full blown plugin for each of the molecules/organisms?

No, start with the given components from djangocms-cascade and replace them whenever they don’t meet your requirements. We at the University of Innsbruck have a mixture of Cascade components and our own implementation.

Would DjangoCMS Cascade help me?

I would believe so, it’s a really powerful framework on top of django-CMS.

Can it cope with bootstrap 5 already?

Not yet, but the difference between BS4 and BS5 is not that big. You could easily adopt it. I will probably do that in 2022/Q1, because we will migrate our own platform to BS5 as well. Funding this kind of work, will speed up things.

Often I made bad experience with commercial BS themes. If they just adopt the variables.scss, then it’s OK. But often those themes change components and styles and disregard the BS mindset. Then it becomes difficult. So I have to say: It depends.

We made good experience with Patternlab and adopting everything ourselves.

1 Like

Thank you @jrief for your helping comments!
It’s very pleasant to see your work on so many Django packages. Not only because they seem very complete but also because it is good to know I am not the only person in Austria how is tinkering around DjangoCMS (although I am not nearly on the same level).

Getting up early today and looking out of the window to see how bad the weather in Vienna is today, I was very tempted to try out DjangoCMS Cascade.

However, I failed with the installation, following this guide: https://djangocms-cascade.readthedocs.io/en/latest/installation.html.

Installing djangocms-cascade via pip worked fine.

Running ./manage.py migrate cmsplugin_cascade (step 3.2 in the documentation) didn’t do anything. I guess this is because I didn’t add cmsplugin_cascade to the installed apps in my settings.py. However, the installation instruction does not mentions that before step 3.4.1.

Anyway, I then added cmsplugin_cascade to my installed apps in settings.py and ran python manage.py migrate cmsplugin_cascade again. However, the migration failed, as django_select2 is not installed.

So I informed myself that select2 is a jquery replacement for select boxes. I have to admit, that my knowledge about website development as well as DjangoCMS is limited. However, as far as I understand, one of the biggest steps that Bootstrap 5 did was to get rid of jquery. Therefore I hesitate to install a package that requires jquery again. Or do I get it wrong?

Maybe I better first start with “regular” plugins and try out DjangoCMS Cascade when you switched to Bootstrap 5? Also I am sorry I currently cannot provide any funding as I develop our website for my non profit association.

We try to use https://around.createx.studio/. I think this theme relies largely on bootstrap although the developed some eye candy and addons.

Also thank you for your hint with Patternlab!

1 Like

So I informed myself that select2 is a jquery replacement for select boxes. I have to admit, that my knowledge about website development as well as DjangoCMS is limited. However, as far as I understand, one of the biggest steps that Bootstrap 5 did was to get rid of jquery. Therefore I hesitate to install a package that requires jquery again. Or do I get it wrong?

If you encountered problems with imprecise installation documentation, please feel free to fix that in the documentation and create a pull request.

About jQuery: Fortunately the Bootstrap team kicked out jQuery in version 5. We currently are using BS4 without jQuery (using bootstrap-native). This works pretty fine. jQuery is required by the django-admin and only the backend part of djangocms-cascade requires jQuery. The frontend is independent. If you use special plugins such as Carousel or Accordion, then you might need jQuery, but as I said, you can also proceed with bootstrap-native here.

1 Like