Comments (24)
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.
from styled-components-website.
@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)
from styled-components-website.
@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.
from styled-components-website.
@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.
from styled-components-website.
Thanks, I will start and when done, I'll share them here for your comments.
from styled-components-website.
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.
from styled-components-website.
@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
from styled-components-website.
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?from styled-components-website.
@philpl Done!
from styled-components-website.
@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 ?
from styled-components-website.
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?
from styled-components-website.
@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.
from styled-components-website.
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.
from styled-components-website.
@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)
from styled-components-website.
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
from styled-components-website.
@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. 💯
from styled-components-website.
I added some more cards if you want to take a look.
from styled-components-website.
@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.
from styled-components-website.
@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.
from styled-components-website.
@morajabi need any help here?
from styled-components-website.
@mckernanin I think so! It is just a design currently. @kitten Do we still want this?
from styled-components-website.
@mckernanin @morajabi Yea, we definitely still want this ❤️
from styled-components-website.
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
from styled-components-website.
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
from styled-components-website.
Related Issues (20)
- Add FAQ on NextJS 13 usage HOT 2
- Add [project] by [company] to showcase HOT 1
- Need a FAQ page added for this HOT 3
- Add [project] by [company] to showcase
- Add [project] by [company] to showcase
- Wrong Link in the docs for v6 migration
- Add [project] by [company] to showcase
- Add [project] by [company] to showcase
- Add [project] by [company] to showcase
- Add [project] by [company] to showcase
- Add [project] by [company] to showcase
- Add [project] by [company] to showcase
- On the homepage live edit example, the cursor is off by 1 character HOT 1
- Add [project] by [company] to showcase
- Add [project] by [company] to showcase
- Add [project] by [company] to showcase ok
- Inaccurate `shouldForwardProp` description
- Add dark theme to documentation HOT 2
- Add [https://themeselection.com/] by [Clevision] to showcase
- Add [https://themeselection.com/] by [Clevision] to showcase HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from styled-components-website.