Cotton - a component based design system for Django

I started a Python/Django position a year ago transitioning from PHP/Laravel and a number of frameworks there. I found Laravel’s blade components (and JS framework style frontend composition in general) very powerful and productive concepts for spinning up interfaces.

Fuelled by the lack of such a thing I wanted in the Django eco-system I built cotton alongside a project and now feel like it’s really helping me make light work of building capable and re-usable frontends in Django and would like to share it with the community.

docs site: https://django-cotton.com

repo: https://github.com/wrabit/django-cotton

Any feedback welcome!

3 Likes

This is a cool concept. I’m interested in playing around with it and possibly helping contribute. Nice work, I’m excited to see where this goes.

1 Like

Thanks, I’d like to provide more usecase examples. I noticed you’re familiar with htmx and that could be a good topic to cover. Using the ‘{{ attrs }}’ in a component will allow you create reusable inputs which you can easily pass down htmlx attributes to the base input element.

But my knowledge of htmx is fairly limited. I’d be interested to hear about your experience using cotton. Thanks for the first PR too :ok_hand:

2 Likes

Love the concept :smiling_face: I wonder if you tried some of the similar packages out there, and if so what’s your thoughts on how Cotton differs? See the list of template-related packages on awesome-django.

Personally I have mixed feelings about Cotton components using the same syntax as vanilla HTML custom elements. Feels like it’d make it harder to know what’s what? And could be problematic for any HTML linting.

1 Like

Thank you, I researched a few and tried a couple at the start, from jinjax (requires jijnja templates and I found no documentation for setup with django) also django-components (a bit too heavyweight and I don’t require data component setup, just quick partial creation and reuse with slots and named slots.) I also wanted the ‘{{ attrs }}’ feature which helps a lot designing custom inputs.

About the syntax, I think quite the contrary, you don’t need any specific plugins in your IDE/editor as the tags are already xml-like so you get auto completion in full and self closing tags.

It’s certainly a paradigm shift for some but for those who have already built js frontends ala svelte, vue then it’s already familiar.

So far I’ve only really gone through the quick start so I haven’t tried using it with HTMX yet, but that’s something I’m interested in trying out. I think HTMX, Alpine (which I still need to learn) and Cotton could be a pretty cool combo.

One thing I’d like to try is using Cotton as a dependency in a separate third party application. Cotton has it’s own project level settings/configurations, so I think that would make it a little bit tricky for me to justify using it in my own 3rd party application, but I’ll try it out and see if I could make any suggestions to make that smoother.

I think some additional usecase examples and references would be great. I understand the docs site is brand new though, so no rush.

1 Like

That’s such a cool project! Thanks for contributing.
I would like to have a go locally and also contribute, but haven’t found any instructions on how to “develop locally”.

1 Like

Thanks @leandrodesouzadev, I’ll be adding a contributing doc soon, will ping you when ready :+1: