feature/issue 23 Styleguide and Design System #36

Auhseh · 2024-04-12T22:17:28Z

Related Issue

resolves #23

Summary of Changes

Introduce Geist font family to project theme
Add Storybook docs for Tech Stack, Documentation, and Styleguide

TODO

Apply PR Feedback - feature/issue 23 Styleguide and Design System #36 (review)
Need to pull in support bundling of url properties (like for @font-face + src) during CSS file optimization greenwood#1199 (or track unpatching it) - @thescientist13 - upstream feature / fixes tracking #37

netlify · 2024-04-12T22:18:21Z

✅ Deploy Preview for super-tapioca-5987ce ready!

Name	Link
🔨 Latest commit	`d8f9b73`
🔍 Latest deploy log	https://app.netlify.com/sites/super-tapioca-5987ce/deploys/662bc7183826eb0008cbe87d
😎 Deploy Preview	https://deploy-preview-36--super-tapioca-5987ce.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

thescientist13

This is a good start, thanks!

I took the opportunity to source the fonts from npm and can confirm it is working both for development and Storybook preview. Formatted the PR description a bit.

I left some feedback to consider but let me know if you need any help on it, I can help with some of them if unclear:

Limit the design tokens / CSS variables to just the most common / global ones we'll need for now
Just need a little formatting and links for the Documentation page
For the Styleguide docs, we'll need to curate the design tokens list and then show examples (like you can see in the reference example)
For the tech stack docs, just take what you see from the reference link and just remove the Tailwind / Linting mentions (and the part about EventBrite and Netlify Forms since they don't apply to this project)

Will mark this PR as a draft as we get through the feedback items.

thescientist13 · 2024-04-13T22:21:30Z

src/stories/documentation.mdx

+## GreenwoodJS Website Documentation
+
+
+We use a combination of technologies to build the GreenwoodJS website


Looks like the formatting is a bit off here and there aren't any links, so let's make sure to get those in

You can check the source from the linked reference for an example
https://raw.githubusercontent.com/AnalogStudiosRI/www.blissfestri.com/main/src/stories/Documentation.stories.mdx

Also, I think if we can have these side links uppercased (I think we just need to rename the files to Documentation etc, that would be ideal.

thescientist13 · 2024-04-13T22:24:25Z

src/stories/styleguide.mdx

+
+
+## Colors
+The following theme colors available are:


We'll definitely want to flesh this section out with examples like in the reference storybook
https://raw.githubusercontent.com/AnalogStudiosRI/www.blissfestri.com/main/src/stories/Styleguide.stories.mdx

thescientist13 · 2024-04-13T22:26:22Z

src/stories/styleguide.mdx

+## Typography
+The whole website uses Vercel's **Geist** font in the following sizes:
+
+`--hero-big`


For the design system tokens, I don't think the goal is to try and capture every token used throughout all pages like these --hero specific ones, but rather just the ones all other tokens should build / compose off of.

I think just the main colors, fonts, sizes, etc should be good to start out with. We don't need to predict every token right now, and this can totally evolve and grow as we build out the rest of the pages. 🏃‍♂️

thescientist13 · 2024-04-13T22:27:02Z

src/stories/styleguide.mdx

+
+
+## Spacing
+The whole website is built on an 8pt Grid, and spacing is always in multiples of 8px


If we have any tokens for this, it would be good to document them here.

thescientist13 · 2024-04-13T22:28:22Z

src/styles/theme.css

+  --color-white: #FFFFFF;
+  --font-primary: 'Geist', 'sans-serif';
+  --font-size-base: 16px;
+  --container-radius: 6rem;


similar to my comments above, we don't have to capture page / component specific tokens for the design system, we can start with just the ones that apply to broadest parts of the design that should be used everywhere, like colors and fonts. This can always grow as the site grows.

thescientist13

@Auhseh
It would be good if we get as many of the images we think we'll need in now if we're planning on committing a bunch of them. I think at least for the header we would need

Discord
X / Twitter
"App Launcher" (or whatever we call the icon we show when the header navigation is in mobile view)

Auhseh · 2024-04-19T08:10:19Z

@Auhseh It would be good if we get as many of the images we think we'll need in now if we're planning on committing a bunch of them. I think at least for the header we would need

Discord

X / Twitter

"App Launcher" (or whatever we call the icon we show when the header navigation is in mobile view)

Added the other assets and also added a short ReadMe with a guide on how to use the assets in code.

Auhseh · 2024-04-19T08:18:18Z

Thanks @Auhseh for all this , looking good pretty good!

I just made some updates to get the colors and fonts showing in Storybook

Left some comments in-line for and this one: what is the Grid_wh.svg for?

(also, I renamed the assets to be consistent casing and using - for the space, just a bit easier to have all the files named the same way)

Thanks, it's the Grid background, Renamed it and added context in the ReadMe

Auhseh · 2024-04-19T08:22:00Z

I think everything's pretty much ready, last thing would be to adding Description icons in the "Why Greenwood" section, pending when we articulate the copy.

thescientist13 · 2024-04-19T14:09:54Z

Thanks, let me review.

Let's try and keep the filename consistent as I had updated them to be something like some-name.png on the last change. I will fix the new ones added but just so we can keep the convention the same for everyone contributing to the project. 👍

Renamed it and added context in the ReadMe

Thanks, but I'm going to remove / clean this up since I was just asking as part of this conversation here in GitHub, I don't want to start documenting every single asset, ideally when we start using them their purpose will be clear, or even better we can use a more descriptive name.

Same goes for color variables, let me just move any relevant info into the storybook instead and / or apply a name change.

I also deleted the Menu.svg since I don't think that actually needs to be an image, just some text and CSS should do fine for that, and I assumed it might be flexible as a general "badge" like component.

thescientist13 · 2024-04-19T14:15:24Z

Thanks, it's the Grid background, Renamed it and added context in the ReadMe

Ok, I was hoping maybe we could handle all those with CSS, but maybe we will need these as SVGs?

thescientist13

This looks good! Going to leave it open a couple more days for a final review, then will merge. 🚀

thescientist13

As a side note, if anyone feels comfortable setting up build tools it might be a good time to start contributing on #24 as we start ramping up contributions. Feel free to reach out in that issue if you have any questions about getting started with that task. 🙏

thescientist13 · 2024-04-24T23:49:53Z

src/stories/Styleguide.mdx

+
+## Spacing
+
+The whole website is built on an 8pt Grid, and spacing is always in multiples of 8px


Or maybe we can just delegate to Open Props
https://open-props.style/#sizes

Will delegate to this higher level conversation, this is a good start for getting things up and running for contributions - #7 (comment)

thescientist13 · 2024-04-24T23:53:43Z

src/styles/theme.css

+
+* {
+  font-family: var(--font-primary);
+  font-size: var(--font-size-base);


Perhaps we should also add box-sizing too?
https://css-tricks.com/almanac/properties/b/box-sizing/

thescientist13

This is great! I'll plan on following up with Linting / Formatting / Contribution Guidelines next and then at least that should allow to make an initial start on our Development Roadmap.

I'll also make sure to get a basic strategy documented around a more formal CSS Strategy as well.

Add files via upload

abe5642

Auhseh and others added 7 commits April 12, 2024 23:28

Add files via upload

46c7d16

Update styleguide.mdx

9a0e1b7

Update styleguide.mdx

91f4cd9

Add files via upload

710018c

Update theme.css

3b2e9e3

install geist font from npm

d29c81a

patch CSS url bundling from Greenwood

27911c7

thescientist13 added docs Greenwood specific content like docs and guides enhancement New feature or request labels Apr 13, 2024

thescientist13 changed the title ~~fonts~~ feature/issue 23 Styleguide and Design System Apr 13, 2024

thescientist13 reviewed Apr 13, 2024

View reviewed changes

thescientist13 marked this pull request as draft April 13, 2024 22:34

Auhseh added 16 commits April 15, 2024 18:15

Update documentation.mdx

915fea7

Update documentation.mdx

0554044

Update documentation.mdx

9358f53

Rename documentation.mdx to Documentation.mdx

8c0ac1c

Update and rename techstack.mdx to Techstack.mdx

b377879

Update Techstack.mdx

309e81f

Update Documentation.mdx

9491079

Update theme.css

2393125

Update styleguide.mdx

67ba0ba

Update Documentation.mdx

2dcfa53

Update and rename styleguide.mdx to Styleguide.mdx

efa6881

Update Styleguide.mdx

f703b8a

Update Styleguide.mdx

da0bb55

Update Styleguide.mdx

7073e75

Update Styleguide.mdx

92f5a6f

Update Styleguide.mdx

cda893e

thescientist13 reviewed Apr 18, 2024

View reviewed changes

This was referenced Apr 18, 2024

Header Component #26

Closed

Footer Component #27

Closed

Auhseh added 11 commits April 19, 2024 08:28

Create readme.md

572e6e6

Update readme.md

eea7c3f

Update readme.md

603248b

Update readme.md

4c8696e

Update readme.md

6864906

Delete src/assets/emphasis_splash.svg

63aa30e

Delete src/assets/Grid wh.svg

544eea9

Delete src/assets/github-logo.svg

fadeff8

Add files via upload

f17bd98

Add files via upload

0cc9f80

Add files via upload

7c99eca

Rename Emphasis_splash.svg to Emphasis-splash.svg

406c583

Update readme.md

4bba42d

misc file renaming and final styleguide docs tweaks

c56aafe

thescientist13 approved these changes Apr 19, 2024

View reviewed changes

thescientist13 reviewed Apr 19, 2024

View reviewed changes

thescientist13 reviewed Apr 24, 2024

View reviewed changes

add border box default

d8f9b73

thescientist13 approved these changes Apr 26, 2024

View reviewed changes

thescientist13 merged commit 2cf45b3 into main Apr 26, 2024
5 checks passed

thescientist13 deleted the Auhseh-patch-1 branch April 26, 2024 15:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feature/issue 23 Styleguide and Design System #36

feature/issue 23 Styleguide and Design System #36

Auhseh commented Apr 12, 2024 •

edited by thescientist13

Loading

netlify bot commented Apr 12, 2024 •

edited

Loading

thescientist13 left a comment •

edited

Loading

thescientist13 Apr 13, 2024

thescientist13 Apr 13, 2024

thescientist13 Apr 13, 2024

thescientist13 Apr 13, 2024

thescientist13 Apr 13, 2024

thescientist13 left a comment

Auhseh commented Apr 19, 2024 •

edited

Loading

Auhseh commented Apr 19, 2024

Auhseh commented Apr 19, 2024

thescientist13 commented Apr 19, 2024 •

edited

Loading

thescientist13 commented Apr 19, 2024

thescientist13 left a comment

thescientist13 left a comment •

edited

Loading

thescientist13 Apr 24, 2024

thescientist13 Apr 26, 2024

thescientist13 Apr 24, 2024

thescientist13 Apr 26, 2024

thescientist13 left a comment •

edited

Loading

		## GreenwoodJS Website Documentation


		We use a combination of technologies to build the GreenwoodJS website



		## Spacing
		The whole website is built on an 8pt Grid, and spacing is always in multiples of 8px

feature/issue 23 Styleguide and Design System #36

feature/issue 23 Styleguide and Design System #36

Conversation

Auhseh commented Apr 12, 2024 • edited by thescientist13 Loading

Related Issue

Summary of Changes

TODO

netlify bot commented Apr 12, 2024 • edited Loading

✅ Deploy Preview for super-tapioca-5987ce ready!

thescientist13 left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thescientist13 left a comment

Choose a reason for hiding this comment

Auhseh commented Apr 19, 2024 • edited Loading

Auhseh commented Apr 19, 2024

Auhseh commented Apr 19, 2024

thescientist13 commented Apr 19, 2024 • edited Loading

thescientist13 commented Apr 19, 2024

thescientist13 left a comment

Choose a reason for hiding this comment

thescientist13 left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thescientist13 left a comment • edited Loading

Choose a reason for hiding this comment

Auhseh commented Apr 12, 2024 •

edited by thescientist13

Loading

netlify bot commented Apr 12, 2024 •

edited

Loading

thescientist13 left a comment •

edited

Loading

Auhseh commented Apr 19, 2024 •

edited

Loading

thescientist13 commented Apr 19, 2024 •

edited

Loading

thescientist13 left a comment •

edited

Loading

thescientist13 left a comment •

edited

Loading