Improve docs homepage about styled-components-website

[mxstbr]

Love it! Let's get rid of the "choose your path" sentence and this looks perfect 👌

I don't mind the multiple colors, we can tinker around with that in the future as we add more sections.

[morajabi]

@philpl Thanks!

I think for the first 3 it'd be fine. Because I think these 3 are the main sections, If we want to add more for example, "Animations" or "With React Native", I think we should use smaller cards (4 in a row) with one single colour for all of them (All primary colour or secondary one because we have an h1 heading here: Documentation)

[kitten]

@mxstbr I agree, I think we should have a generic starting point for all the pages, that "hand holds the user" like @SaraVieira but not duplicate / change the structure.

What about putting a quick start guide there instead? Can probably just be "Installation" + "Getting started" so that folks can jump right in?

I think that will just end up bloating it. Like the homepage already has a small guide to get started. We should be careful not to "litter" content everywhere, but to keep them contained. Otherwise you give the user what he might not have wanted, e.g. "I want to find something in the documentation" => "Here is how to get started"; That might be a good way to anticipate first-timers, but it won't deliver a good overview (What the "Basics" page does) and it won't be good for everyone.

I propose that we rely on the sidebar for extended navigation: Let the sidebar take care of listing all links, sections, pages, etc.

And instead have cards here, that only have the basic pages. A card might contain a title, for instance "Basics", and an explanation: "This section will walk you through everything you need to know to use styled-components. It will teach you all of our concepts and get you started".

This separates the starting point into a really easy "decision tree" like what Sara does: Basics, Advanced, ...; But also doesn't go overboard and changes the current structure.

[morajabi]

@philpl @mxstbr I think we need to define some basic rules for the designs so they'll have a consistent feel and look no matter who designs them. For example, let's define some of these:

• Do we like gradients or flat colors? #83
• Do we have shadows or not?
• What are our main colors here?

Not a big deal but a good thing to do :)

Besides, I can design something for the cards section.

[morajabi]

Thanks, I will start and when done, I'll share them here for your comments.

[atmasark]

Joining the party a few years late, but this issue caught my eye. Is there still need for implementing the card design made by @morajabi ? The content isn't technically duplicated anymore as the content is hidden in the sidebar on docs homepage nowadays, but the card design hasn't yet been implemented and that seemed like a neat idea.

[kitten]

@morajabi That's amazing! Exactly what I had in mind ❤️

I'm wondering whether we should just use a single colour for their heading? It might be unnecessary "beautifying" to use multiple ones and will look weirder as we add more sections, I believe

[wking-io]

The design look slick @morajabi! I have one note revolving around the title hierarchy:

Ideally in the code the heading 'Documentation' is an h1, but the other headings will be h2s (I assume) so, we would want it to either be a different font weight, color, or font size to show the heading hierarchy.

Since it was decided the colors can stay for iteration one, maybe we can change the font-size to denote that these are not the same importance as the h1 'Documentation. Thoughts?

Just played around with the figma file and I like the look of 28px for the section card title:

maybe even font-weight: 600?

[morajabi]

@philpl Done!

[SaraVieira]

@mxstbr Maybe add "questions" instead, something like:

Want to do you want to do with styled components?

I want to learn styled-components

This would link to getting started

I want to animate my components

Link to animations

Can I use this in react native ?

Link to react native

You get the idea :p

Watchu think ?

[mxstbr]

Hmm, I feel like that just duplicates the content we have anyway. I feel like we have that page and we're not really doing anything useful with it.

What about putting a quick start guide there instead? Can probably just be "Installation" + "Getting started" so that folks can jump right in?

[kitten]

@morajabi I can answer the questions based on what I've done with the current site. And @mxstbr can probably add some comments to changes he'd like. Then we can create some variations and get some feedback via Twitter etc.

Do we like gradients or flat colors?

There's only a single gradient which is used for a single background per page. This is the "brand" gradient. The other two main colours (which also are part of the gradient) are a "gold" (rgb(243,182,97), used for h1), and sth similar to palevioletred (rgb(219,112,147), used for the footer, links, notes and accents in general)

Do we have shadows or not?

The current design doesn't use shadows with the exception of "card-like" components. Currently we only have a single "card-like" component, which are the codeblocks / live edit components.

What are our main colors here?

See above

Edit: Here's the gradient btw linear-gradient(20deg,rgb(219,112,147),#daa357); Notice the 20deg angle, which is crucial to not make it look dull and "compete" with the horizontal text, or vertical layout.

[morajabi]

Thanks for answers. So, tell me a bit more about how you want the card grid to look like, so I can design it the right way.

[kitten]

@morajabi I'm not really sure what we should go for. I'd have to try out some variations myself 😉

Maybe you'd like to just adhere to some general patterns we're already using? I'll paste the CodeBlock styles here, which should be the basis. We can try different colours and styles for the background etc.

  border-radius: ${rem(3)};
  box-shadow: 1px 1px 20px rgba(20, 20, 20, 0.27);
  margin: ${rem(35)} 0;

(The rem utility just converts the px number to rem btw)

[morajabi]

Hey @mxstbr and @philpl, What do you think about this? Open to comments :) Also I didn't know if you wanted to add more cards, but if you want to add more we can tweak this a bit.
https://www.figma.com/file/ZZHoPeTYKNtNqcLYnRsQSVxR/Styled-Components?node-id=6%3A0

[morajabi]

@mxstbr I was just kidding about that sentence :))

P.S: It's fun to design this fast! I didn't know it's still fun without wireframes, sketches, etc. 💯

[morajabi]

I added some more cards if you want to take a look.

[morajabi]

@wking-io Thanks! You're right, I decreased the font-size to 28. But I didn't want to change the weight because it's a part of design language. We can change it later anyway.

[kitten]

@morajabi Optimally we'd want to use our current h2 styling which is:

• font-weight: 500
• font-size: ${rem(32)}; (32px)

Btw our line-height is 1.6 consistently, but most headers have some kind of margin.

[mckernanin]

@morajabi need any help here?

[morajabi]

@mckernanin I think so! It is just a design currently. @kitten Do we still want this?

[kitten]

@mckernanin @morajabi Yea, we definitely still want this ❤️

[Zhoha28]

IMO, the card layout looked super awesome, I see that it has not been implemented yet, but as @atmasark said, it seems like a neat idea to implement the card layout. Is it still needed, if yes, I would definitely like to work on it

[ItzaMi]

Is it me or does it seems like this issue is no longer valid?
Seems that the chosen solution was to remove the secondary categories from the navbar until a primary one from the nav / secondary one from the page was selected