Add support for Fomantic UI elements

fsbraun commented 1 year ago

Proposed by @maclake.

baravkareknath commented 4 months ago

Hi fsbraun, please give me little bit idea about of this issue i want to know about it.

baravkareknath commented 4 months ago

I think we have to added/install support of Fomantic-UI CSS/JS inside "djangocms-frontend/djangocms_frontend/static/djangocms_frontend" like CSS and JS file. And after that used that CSS/JS file path inside test_setting.py Is it correct path to resolve it?

fsbraun commented 4 months ago

@baravkareknath Thanks for picking this up!

Usually projects define their own css/js static files based on Bootstrap or Fomantic. djangocms only provides a starter template that loads a version from a CDN for pure convenience.

The real work is to go into all the contrib packages and add "fomantic.py" to each framework folder. Its task is to provide the right context for rendering, i.e. translating the plugin properties into the correct classes etc. These need to be processed by the framework-specific template in the template folder.

In total, that's quite a bit of work. You would likely have some detailed knowledge about Fomantic and know how to create the templates and how to translate the plugin settings into the relevant context. A practical start would be to address one plugin first and see how it goes.

With respect to testing, it more than getting the sittings updated. You would need to test for some Fomantic-specific markup for each plugin. Also, you will have to test the plugins by hand quite a lot, I assume.

baravkareknath commented 3 months ago

Hi fsbraun, I just want to discuss some points with you related to this issue. I am just make single page template and test Fomantic-UI in django. as below procedure-

1.First install fomantic UI

Link Fomantic UI files in django project: e.g.template.html
```
{% load cms_tags staticfiles %}
```

<!doctype html>

{% block head %} {% block extra_head %} {% endblock %} {% endblock %} {% cms_toolbar %} {% block content %} {% endblock %}


3. create cms template (cms_template.html) with fomantic UI element
e.g-

{% extends 'template.html' %} {% block content %}

{% endblock %}


Is it correct way?
Instead of changes in project Can I add this documentation as example for Add support for Fomantic UI elements.
I will rephrase all steps again after your suggestion.

fsbraun commented 3 months ago

@baravkareknath

You will need to use djangocms-frontend's template structure:

djangocms_frontend/templates/fomantic/base.html: This will be the main template. It extends the common djangocms_frontend.html template. You can have a look at its bootstrap cousin to see how to load fomantic assets from a CDN. (Hence no need for installing fomantic ui.) In the same folder, the menu templates reside. They need to be changed, too.
Create templates and framework files for the components. I'd advise doing this by component. Look at djangocms_frontend/contrib/<component>/frameworks and djangocms_frontend/contrib/<component>/template directories. Again, take the bootstrap examples as an example.

Attention: You will have to also take into account the fields and values of the component's form. Some fields take values that rely on bootstrap-specific conventions. You will have to think about how to translate them to fomantic syntax.

I hope this helps.

Maybe you can start with creating the base and menu templates and then create a draft PR. This way I can give feedback. In a second step, start with some component - perhaps an easy one like an alert. From there, work your way up to more complex ones like the grid components. What do you think?

django-cms / djangocms-frontend

Add support for Fomantic UI elements #129