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

Show example templates using another CSS framework #9

Open
carltongibson opened this issue Apr 28, 2023 · 6 comments
Open

Show example templates using another CSS framework #9

carltongibson opened this issue Apr 28, 2023 · 6 comments

Comments

@carltongibson
Copy link
Owner

The default templates use Tailwind, but it's not compulsory.

An examples/X_css mini-project showing overriding the default would be good to have.

Million dollar question: which framework? 😅
@carltongibson carltongibson pinned this issue Apr 28, 2023
@dertuxmalwieder
Copy link

picocss.

@carltongibson
Copy link
Owner Author

@dertuxmalwieder — that's a speedy answer! Would you fancy submitting?

@dertuxmalwieder
Copy link

Not today - busy over the weekend. Bookmarked…

@carltongibson
Copy link
Owner Author

Good thread on Mastodon points to the survey which has Bootstrap the most used framework by far.

https://fosstodon.org/@carlton/110276421113060175

@gelie
Copy link

gelie commented Oct 17, 2023

Hi @dertuxmalwieder

I just added picocss in my base.html

<!DOCTYPE html>
{% load static %}
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="{% static 'css/pico.min.css' %}" />
    <title>Neapolitan</title>
  </head>
  <body class="container">
    <main>
      {% block content %}
      {% endblock %}
    </main>
  </body>
</html>

To override the neapolitan templates, just create a neapolitan folder inside your django templates folder. Then rewrite the templates that you want to customize. I only rewrote the neapolitan/partial/detail.html as a test:

Screenshot_20231017_171823

{% for field, val in object %}
  <p>
    <strong>{{ field }}&colon;&emsp;&emsp;</strong>{{ val }}
  </p>
{% endfor %}

Hope this helps.

Screenshot 2023-10-17 at 17-03-28 Neapolitan
Screenshot 2023-10-17 at 17-03-46 Neapolitan
Screenshot 2023-10-17 at 17-04-41 Neapolitan
Screenshot 2023-10-17 at 17-30-21 Neapolitan
Screenshot 2023-10-17 at 17-05-15 Neapolitan
Screenshot 2023-10-17 at 17-29-05 Neapolitan

@carltongibson
Copy link
Owner Author

@gelie would you like to add that as a sub folder in a examples/ dir?

@carltongibson carltongibson unpinned this issue Nov 15, 2023
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
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@carltongibson @dertuxmalwieder @gelie