Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add support for Fomantic UI elements #129

Open
fsbraun opened this issue May 16, 2023 · 5 comments
Open

Add support for Fomantic UI elements #129

fsbraun opened this issue May 16, 2023 · 5 comments

Comments

@fsbraun
Copy link
Sponsor Member

fsbraun commented May 16, 2023 •
edited

Proposed by @MacLake.
@baravkareknath
Copy link

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

@baravkareknath
Copy link

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
Copy link
Sponsor Member Author

fsbraun commented Feb 22, 2024

@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
Copy link

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

@fsbraun
Copy link
Sponsor Member Author

fsbraun commented Mar 27, 2024

@baravkareknath

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

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

  2. 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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
No open projects
DjangoCon Europe
Status: Todo
Milestone
No milestone
Development

No branches or pull requests
2 participants
@fsbraun @baravkareknath