Design ticket triage (focusing on WP/meta): Monday 16:30 UTC in #design Design ticket triage (focusing on Gutenberg): Tuesday 16:00 UTC in #design Design weekly meeting: Wednesday 18:00 UTC in #design
At the moment, the style guides within the Design Guidelines are a little bare. Specifically, there are things we can add to improve the experience in interacting with these docs. A great example would be this online tool Material UI Colors, which copies the colour’s hex code to your clipboard when you click it.
In the latest Design Meeting, I suggested that it might be helpful to improve the WordPress style guide by building resources in a new open documentation site, one with features like instant copy/paste and code snippets where applicable. This site could showcase the content that already exists – specifically colours, typography, and iconography.
It would not necessarily designed to replace the existing make guidelines, but compliment it as an external resource. Similar to how the existing colour page links to an external codepen.
It would be particularly cool to have this available for people before WordCamp US so that everyone participating on Contributor Day could use it and potentially get onboarded faster.
The site would be open source from the beginning, with the code available on a Github repository. It would have automated workflows that’ll make it much easier to contribute to (and play around with). Anyone would be able to add issues and submit pull requests. I’ve built several doc sites and style guides in the past, so it’ll be something I can do relatively quickly.
If so, I can go ahead and create it and ask for some feedback next week. Perhaps around Oct 8th, a little bit before the next Design Meeting. If we like the end result, the site could expand to include content for identity, core, templates, and other content from WP style guide.
Share your thoughts about this idea in a comment on this post! I can’t wait to know what you think.
Yes please! Something like this will go a long way to helping contributors, showcasing purposeful design decisions, and connecting both design and code together.
Will the content of this site be completely driven by the Component Documentation, or will there be content added. I’m wondering if the process to update a page would be just updating the documentation?
Keep us posted on the direction. I’d love to help contribute to the code/building of this site.
At this VERY moment in time (12:02PM EST, Oct 3, 2019), still setting things up – specifically local dev things. Automated linting + code fixing. Tid-bits like that.
Also, starting to work out the data for the colours 😀
I think I’ve got a better understanding of this. Seeing as this project pertains primarily to the Design Handbook…
It would not necessarily designed to replace the existing make guidelines,
Why not? Maybe this can be a long term goal?
but compliment it as an external resource.
If this is the case, I’m concerned this becomes another place that needs to be maintained when changes happen. Who will monitor and make these changes? How do they get communicated?
What is the plan for relating the two sites? Will the handbook have a link to this in some form, or maybe an entire page talking about it?
Gathering all the design elements into a single beautiful site with code snippets etc. is amazing! I’m looking forward to how this is received in hopes that it might be able to replace the design handbook entirely and live on .org.
> Why not? Maybe this can be a long term goal?
I guess it can! I wasn’t too sure of the process and how folks felt about that. That’s why I was on more of the conservative side.
If this is the case, I’m concerned this becomes another place that needs to be maintained when changes happen. Who will monitor and make these changes? How do they get communicated?
To start, it’ll be under my personal Github + Netlify account.
If we want to make it official, it can totally be transferred under the `wordpress` Github repo, and a Netlify account be setup under WordPress (or whatever build/hosting service you think is best. I recommend Netlify since it’s so seamless and simple).
What is the plan for relating the two sites? Will the handbook have a link to this in some form, or maybe an entire page talking about it?
We can do that to start. Just like how the current handbook links to the color
Codepen.
Gathering all the design elements into a single beautiful site with code snippets etc. is amazing! I’m looking forward to how this is received in hopes that it might be able to replace the design handbook entirely and live on .org.
I am so excited about this @itsjonq. Right now we use Codepen and outside resources, so having one place to collate those is already a gain. Might this replace everything? Maybe, but for me it’s about seeing what this grows into and then we can take it from there. I am personally open to whatever that will be, just glad it’s happening and being explored.
This will make contribution days so much easier and daily improve the life of anyone working in WordPress that goes near design, also enabling non-designers. Thanks for taking the leap of experimentation and whatever support you need let me know.
I suggested that it might be helpful to improve the WordPress style guide by building resources in a new open documentation site, one with features like instant copy/paste and code snippets where applicable. This site could showcase the content that already exists – specifically colours, typography, and iconography.
Nice. Making the documentation closer to design and development work is a worthy goal. Thanks for kicking this off! 🙂
It would be particularly cool to have this available for people before WordCamp US so that everyone participating on Contributor Day could use it and potentially get onboarded faster.
Yessss 💕
Note that at the same time there’s Contributor Day at WordCamp Tokyo, so it’s a double win. 😀
Share your thoughts about this idea in a comment on this post!
I think you’ve already covered all the bases in terms of open collaboration and open source project needs.
I’d just add that using GitHub and PRs for documentation too will create imho a better process in the long term, so totally worth looking into it. In a way it seems a continuation of the work done by the WP Training Team using GitHub and PRs to revienw and improve documentation, which I find excellent.
Nice work! Can’t wait to see the first round done! 😀
Yes please! Something like this will go a long way to helping contributors, showcasing purposeful design decisions, and connecting both design and code together.
Will the content of this site be completely driven by the Component Documentation, or will there be content added. I’m wondering if the process to update a page would be just updating the documentation?
Keep us posted on the direction. I’d love to help contribute to the code/building of this site.
Just started! Link to Github:
http://wayback.fauppsala.se:80/wayback/20191101162135/https://github.com/ItsJonQ/wordpress-design-guidelines
At this VERY moment in time (12:02PM EST, Oct 3, 2019), still setting things up – specifically local dev things. Automated linting + code fixing. Tid-bits like that.
Also, starting to work out the data for the colours 😀
I think I’ve got a better understanding of this. Seeing as this project pertains primarily to the Design Handbook…
Why not? Maybe this can be a long term goal?
If this is the case, I’m concerned this becomes another place that needs to be maintained when changes happen. Who will monitor and make these changes? How do they get communicated?
What is the plan for relating the two sites? Will the handbook have a link to this in some form, or maybe an entire page talking about it?
Gathering all the design elements into a single beautiful site with code snippets etc. is amazing! I’m looking forward to how this is received in hopes that it might be able to replace the design handbook entirely and live on .org.
> Why not? Maybe this can be a long term goal?
I guess it can! I wasn’t too sure of the process and how folks felt about that. That’s why I was on more of the conservative side.
To start, it’ll be under my personal Github + Netlify account.
If we want to make it official, it can totally be transferred under the `wordpress` Github repo, and a Netlify account be setup under WordPress (or whatever build/hosting service you think is best. I recommend Netlify since it’s so seamless and simple).
We can do that to start. Just like how the current handbook links to the color
Codepen.
<3!!!
Update: Automated build and deploy has been set up!
http://wayback.fauppsala.se:80/wayback/20191101162135/https://wordpress-design-guidelines.netlify.com/colors
Note: Site it still very much “work in progress”! But, the colors are there. Clicking them will copy the hex code to your clipboard 🙂
❤️❤️❤️❤️❤️
Hehe <3
Here's a PR I created to test out the automated deploys:
http://wayback.fauppsala.se:80/wayback/20191101162135/https://github.com/ItsJonQ/wordpress-design-guidelines/pull/1
I am so excited about this @itsjonq. Right now we use Codepen and outside resources, so having one place to collate those is already a gain. Might this replace everything? Maybe, but for me it’s about seeing what this grows into and then we can take it from there. I am personally open to whatever that will be, just glad it’s happening and being explored.
This will make contribution days so much easier and daily improve the life of anyone working in WordPress that goes near design, also enabling non-designers. Thanks for taking the leap of experimentation and whatever support you need let me know.
Nice. Making the documentation closer to design and development work is a worthy goal. Thanks for kicking this off! 🙂
Yessss 💕
Note that at the same time there’s Contributor Day at WordCamp Tokyo, so it’s a double win. 😀
I think you’ve already covered all the bases in terms of open collaboration and open source project needs.
I’d just add that using GitHub and PRs for documentation too will create imho a better process in the long term, so totally worth looking into it. In a way it seems a continuation of the work done by the WP Training Team using GitHub and PRs to revienw and improve documentation, which I find excellent.
Nice work! Can’t wait to see the first round done! 😀
Update!! I’ve added a `custom.css` file to the project:
http://wayback.fauppsala.se:80/wayback/20191101162135/https://github.com/ItsJonQ/wordpress-design-guidelines/blob/master/src/styles/custom.css
This allows for people who are happy and comfortable with CSS, but could not be bothered with JS/React stuff to easily contribute :).
I’m adding selectors to HTML elements to ensure that they can still be targeted in the standard way (e.g. class=”ColorPaletteItem”)
Live coding session from today 🙂
Generating CSS Color variables from JSON
Update! Changed the website URL to:
http://wayback.fauppsala.se:80/wayback/20191101162135/https://wp-design-guidelines.netlify.com/
I love this in everyway!
@gravnetic Thank you!!! 🙏
Added a ColorInfo box interaction to show additional color info 🙂
I designed + coded this earlier during a live coding session.
Nice! Are we able to test against our darkest grey, instead of black?
@melchoyce Sure thing :). I’ll make that change now
🏃♂️💨
Done 🙌
Added icons + icon popup box!
http://wayback.fauppsala.se:80/wayback/20191101162135/https://wp-design-guidelines.netlify.com/foundations/iconography/