Typography

[jjagielka]

How to manage the project typography?

1. Use classes manually each time
2. Use components with predefined styles
3. Use project wide css file

Unfortunately flowbite.com uses all the above approaches and what is more it uses them inconsistently.

• All flowbite.com examples show manually set classes (approach 1).
• Typography section like Headings introduces styles definitions as kind of the guideline (approach 2), but if we apply those rules to components they will change their look
• Finally flowbite.com introduces typography plugin - css file with styles for headings, paragraphs (approach 3)

The other problem is lack of consistency in using styles. For example, inconsistency in usage of h3:

• Alert <h3 class="text-lg font-medium text-blue-900">This is a info alert</h3>
• Modal <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Terms of Service</h3>
• Typography <h3 class="text-3xl font-bold dark:text-white">Heading 3</h3>

Or h5

• Card <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
• Typography <h5 class="text-xl font-bold dark:text-white">Heading 5</h5>
• flowbite-typography - h5 not defined at all

So what's the best approach to use in the flowbite-svelte framework?

[shinokada]

I can't say for Flowbite.com, since I don't work for them.
But this is what I think.
A heading tag depends on the position. For example, in Alert, it can be h3 if it is after h2 tag. Or it can be h4 if it positioned after h5.

I created Heading component that can take h1 to h6 tags and customSize.

So what I'm saying is that in our document if we are using a Card component after h2 tag, we can use h3 and adjust the size, color, and class.