[docs][guides] Other CSS Frameworks and Libraries page

[marcysutton]

Summary

Add a new Reference Guide to the CSS Libraries and Frameworks section for "Other Libraries" and mention Bootstrap, Material UI, Reach UI, Grommet, etc. We do NOT want to list every UI library, as that would be impossible to maintain.

Here are the criteria for what should be listed on this page:

• Works with React and Gatsby
• Impacts styling of a Gatsby site (to fit in the parent section)
• Commonly requested or searched in the Gatsby docs (the Gatsby team has the most insight into this part)
• Considers accessibility and does not promote UI anti-patterns

This initial list includes:

• Grommet
• Chakra UI
• Material UI
• Bootstrap (including how to use the optional JS code which includes jQuery)

This could possibly include Reach UI, but that project intentionally leaves styling out of the framework so it might not fit in this section.

Motivation

As part of #21278, we want to add a page to the docs that provides a short and curated list of CSS/UI libraries. We don't want to maintain individual pages for all libraries, so this is a bit of a catch-all page where we can list libraries with a link and a short paragraph about each one.

Draft the doc

• Write the doc, following the format listed in these resources:
  • Overview on contributing to documentation
  • Docs Templates
• Add the article to the docs sidebar under the Styling Your Site > CSS Libraries and Frameworks section.

Open a pull request

• Open a pull request with your work including the words "closes [docs][guides] Other CSS Frameworks and Libraries page #21541" in the pull request description

[wardpeet]

I'm mostly wondering why the provided list? Is this somehow we feel the community is using the most? It's a good list, just wondering :)

[marcysutton]

Hey @wardpeet, just seeing your comment now. This is mostly in response to common Algolia searches without results, and other discovery around the web. A curated page like this will allow us to add content about commonly searched terms without dedicating entire pages to them.

[meganesu]

Hi there @marcysutton, I'd like to give this one a go, if that's alright?

One clarifying question before I get started: could you give some more context on what this bullet point means? Wait never mind, I get it now!

Impacts styling of a Gatsby site (to fit in the parent section)

Thanks!