search

twostraws / Ignite

A static site generator for Swift developers.
MIT License
1.52k stars 72 forks source link

Question: supporting alternative css frameworks, such as tailwindcss #87

Open electricsidecar-dev opened 3 days ago

electricsidecar-dev commented 3 days ago

Love the principles behind Ignite and excited to start using + hopefully contributing to it in some form.

My existing site is built using tailwindcss, which I've been really enjoying as an alternative to bootstrap for its point-of-use simplicity. In some ways I feel it's similar to SwiftUI, in that you're encouraged to attach styles to elements inline rather than building a centralized stylesheet.

The reason I want to start using Ignite is that I have a lot of content that I'd like to share between my application and my website, e.g. the app's Shorcuts documentation, and I'd love for my site to build in the same toolchain as my app so that I can be sure that my site's documentation always reflects the latest app state.

Before I dive too deep into the rabbit hole though, I wanted to pose the question here in case there's some guidance I can follow for exploring use of tailwindcss with Ignite? Am I holding the tool wrong to think that I should try to incorporate tailwindcss or ideas from it?

electricsidecar-dev commented 3 days ago

Thinking aloud, I'm considering whether it makes sense to add tailwindcss' css builder as a post-build step to the Ignite site generator.

My current workflow is:

  1. Start npx tailwindcss -i ./.src/main.css -o ./css/main.css --watch to watch for local changes.
  2. Edit static .html files, adding inline class annotations as needed to style the site. The site's main.css file is recompiled automatically with each change.
  3. Once I've finished my edits, I stop the tailwindcss daemon and run npx tailwindcss -i ./.src/main.css -o ./css/main.css --minify and then push the generated content to my main branch on GitHub, which auto-deploys to GitHub Pages.

This new workflow would be basically the same, but in step 2 I'd use Ignite to edit and generate the static .html files.

twostraws commented 2 days ago

I'm afraid this isn't something I'm familiar with, so I can't really help. Although I know Tailwind is very popular, Bootstrap was chosen because of the range of complex controls it comes with, and also the excellent support for accessibility through things such as VoiceOver. If there are ways to make Tailwind support easier, a PR would be welcomed.