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

Closed
carltongibson opened this issue Apr 28, 2023 · 11 comments · Fixed by #72
Closed

Show example templates using another CSS framework #9

carltongibson opened this issue Apr 28, 2023 · 11 comments · Fixed by #72

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
@abe-101
Copy link
Contributor

abe-101 commented Nov 19, 2024

Is it the goal of this project to support other css framework aside from tailwind?

My project uses bootstrap so I over-road the templates with bootstrap ones
I'd be happy to open a PR with the bootrap templates - just where would they go? and perhaps there should be a setting variable where user can choose the framework

(I also used crispy-forms)

@carltongibson
Copy link
Owner Author

Hi @abe-101 — I think an example project overriding the core templates is what's needed, so a bootstrap_templates app in the examples folder would be perfect.

I expect folks to copy/paste the templates into their own project rather than adding complex settings tweaks. In general I expect folks to override the templates on a per project, or per-model even, basis, rather than using the provided ones for very long. Some docs explaining this approach are probably needed here too. (Happy to help with those.)

@abe-101
Copy link
Contributor

abe-101 commented Nov 19, 2024

@carltongibson An example project sounds good
Where should the examples folder go?

@carltongibson
Copy link
Owner Author

Just at the project root.

@abe-101
Copy link
Contributor

abe-101 commented Nov 23, 2024

PR #72 adds a bootstrap example

@carltongibson carltongibson mentioned this issue Dec 5, 2024
Merged
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

Successfully merging a pull request may close this issue.

add bootstrap example abe-101/neapolitan
4 participants
@carltongibson @dertuxmalwieder @gelie @abe-101