Add alternative CSS frameworks for Docusaurus

[pmeaney]

I am running into the problem with Docusaurus of:

1. Docs & Blog pages are not in /src/pages directory. Yet, to create a new custom page, Docusaurus places them there. OK Docusaurus Devs, why not follow your own convention and place the Docs & Blogs pages there as well, so I can edit them?

2. Why do I want to edit them? So I can remove everything InfimaCSS (https://github.com/facebookincubator/infima) from the project. Why would I use Infima? In fact, why would the Docusaurus team choose Infima-- a CSS framework which barely anyone uses or knows?

It's a contrived attempt to get a bit of market share towards InfimaCSS-- a Meta-created CSS Framework. Perhaps provide it as an option-- for example, when a NextJS project is created via CLI, we are prompted with "Use TailwindCSS? Y/N".

Docusaurus could similarly ask: "Pick your default CSS Framework. Tailwind / Bulma / Bootstrap / Infima".

Github Stars (as of Jan 15, 2024)

Tailwind: 75,300+

Bulma: 47,800+

Bootstrap5: 166,000+

....Infima: 387 <-- you stuck us with that?!

WHAT?! Docusaurus designers/devs have chosen to stick us with an unknown, unpopular CSS Framework, by default?! Seriously?

And to make it even worse, they've made it difficult to access Docs & Blogs pages?!

Wow, those are two horrible system design choices:

1. src/page does not contain Blogs.js nor Docs.js
2. Since I can't access those two pages, I can't change their divs' classes! Making it difficult to use a non-Infima CSS Framework across my entire Docusaurus site.

[slorber]

Your PR or money is welcome

I'm not going to answer that considering your aggressive tone, lack of nuance, and misunderstanding of how open source works.

Please refrain from opening other similar issues. If you don't like Docusaurus you are free to use another tool.

[pmeaney]

Sure thing! Thanks for your time & response.

I appreciate your work on Docusaurus, but I personally would not approve all of the design choices and choices regarding user/developer experience. But hey! That's ok. It's an awesome tool none-the-less.

I think tonality can be difficult to discern when it's in text e.g. "why + question mark + explanation mark" .

And the term "Contrived" I intend to merely mean... placing users in the position of adopting something they did not choose, nor which is popular or necessary.

I think "you stuck us with Infima?!" Is a legitimate concern:

Infima:

• has less than 1% the adoption of mainstream frameworks
• it offers very little if any differentiation in terms of functionality & user interface improvement.
• Its claims of being different on its introduction page may need to be updated as they're currently not really true in the context of "the main difference between Infima and existing CSS frameworks " when compared to mainstream alternatives: https://infima.dev/docs/getting-started/introduction/

The main difference between Infima and existing CSS frameworks (e.g. Bootstrap, Bulma) is that it's built with a modern theming approach (CSS variables), modern tooling and has dark mode support out of the box, which makes it perfect for building content-driven websites such as documentation websites. [source: Infima introduction page]

"built with a modern theming approach (CSS variables)"

• Bootstrap CSS variables: https://getbootstrap.com/docs/5.0/customize/css-variables/
• Bulma CSS variables: https://bulma.io/documentation/customize/variables/

"dark mode support out of the box"

• "Bootstrap now supports color modes, starting with dark mode! With v5.3.0 you can implement your own color mode toggler (see below for an example from Bootstrap’s docs) and apply the different color modes as you see fit"
• "Tailwind includes a dark variant that lets you style your site differently when dark mode is enabled"
• Bulma 2019 blog post: "Scheme variables for "Dark mode"# There are 6 new $scheme derived variables: ... This makes it easy to create a “Dark mode” simply by swapping the values:"

"modern tooling"

That's a vague claim.

"100% Responsive: Works on all devices and viewport widths" source: infima.dev front page

It doesn't seem responsive in my experience, with regard to a hero background image, for example. But I am not a great Frontend Developer, so take that with a grain of salt.

Apologies for the other issues/discussion items I opened.. Feel free to delete or close them of course.

I am choosing not to use Infima. It doesn't feel worth the time compared to the ease of alternatives