djangocms-frontend Add support for Fomantic UI elements

Proposed by @maclake.

May 16 '23 17:05 fsbraun

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

Feb 21 '24 10:02 baravkareknath

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?

Feb 22 '24 05:02 baravkareknath

@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.

Feb 22 '24 06:02 fsbraun

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 2. Link Fomantic UI files in django project: e.g.template.html

{% load cms_tags staticfiles %}

<!doctype html>
<html>
<head>
    {% block head %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- Include Fomantic UI CSS -->    
    <link rel="stylesheet" type="text/css" href="{% static 'fomantic-ui/dist/semantic.min.css' %}">
    
    {% block extra_head %}
    {% endblock %}
    {% endblock %}
</head>

<body>
    {% cms_toolbar %}
    {% block content %}
    {% endblock %}
    
    <!-- Include Fomantic UI JS -->
    <script src="{% static 'fomantic-ui/dist/semantic.min.js' %}"></script>
</body>
</html>

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

{% extends 'template.html' %}
{% block content %}
    <div class="ui container">
    <button class="ui button">Click `me</button>
    </div>            
{% 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.

Mar 27 '24 08:03 baravkareknath

@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?

Mar 27 '24 08:03 fsbraun

djangocms-frontend djangocms-frontend copied to clipboard

Add support for Fomantic UI elements

djangocms-frontend
djangocms-frontend copied to clipboard