-
Notifications
You must be signed in to change notification settings - Fork 174
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add Getting Started for Devs #1362
Conversation
This solves an installation issue I was having with liquid-c similar to Shopify/liquid-c#164
- href: /documentation/settings/ | ||
- href: /maturity-model/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Moves Maturity Model down in the side nav
@@ -91,6 +91,7 @@ How to use USWDS: | |||
- href: /documentation/implementations/ | |||
- href: /documentation/showcase/ | |||
- href: /documentation/sample-contract-language/ | |||
- href: /website-standards/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Moves Website Standards down in the side nav
- text: Getting started for developers | ||
href: /documentation/getting-started-for-developers/ | ||
- text: Getting started for designers | ||
href: /documentation/getting-started-for-designers/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These replace the old "For developers" and "For designers" sections
- text: Getting started for developers | ||
href: /documentation/getting-started-for-developers/ | ||
- text: Getting started for designers | ||
href: /documentation/getting-started-for-designers/ | ||
- href: /documentation/developers/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
↑ This is the old developers section, now called "Documentation"
<div class="usa-step-indicator" aria-label="progress"> | ||
<ol class="usa-step-indicator__segments"> | ||
{% for step in page.steps %} | ||
{% if step.status == "completed" %} | ||
{% assign modifier = "--complete" %} | ||
{% elsif step.status == "current" %} | ||
{% assign modifier = "--current" %} | ||
{% else %} | ||
{% assign modifier = "" %} | ||
{% endif %} | ||
<li class="usa-step-indicator__segment usa-step-indicator__segment{{ modifier }}"> | ||
<span class="usa-step-indicator__segment-label" | ||
>{{ step.name }}{% if step.status == "completed" %} <span class="usa-sr-only">completed</span>{% endif %}{% if step.status == "completed" %} <span class="usa-sr-only">not completed</span>{% endif %}</span | ||
> | ||
</li> | ||
{% endfor %} | ||
</ol> | ||
<div class="usa-step-indicator__header"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Added a step indicator component for testing, but ended up not implementing it here
@@ -1,7 +1,7 @@ | |||
--- | |||
permalink: /documentation/developers/ | |||
layout: styleguide | |||
title: For developers | |||
title: Documentation |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The old developer docs. Next step: rewriting and rethinking.
category: How to use USWDS | ||
lead: USWDS offers a flexible yet coherent visual style you can apply to any government website. Our visual style offers a clean, modern aesthetic that meets high standards of usability and accessibility while promoting credibility and trust. | ||
redirect_from: | ||
- /getting-started/designers/ | ||
- /documentation/designers/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Redirects from the old designers page
- href: /documentation/getting-started/developers/phase-two-compile/ | ||
- href: /documentation/getting-started/developers/phase-three-customize/ | ||
redirect_from: | ||
- /documentation/fundamentals/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Redirects from the old fundamentals and quickstart page
@@ -15,15 +15,15 @@ redirect_from: | |||
<div class="tablet:grid-col display-flex flex-align-stretch"> | |||
<div class="site-docs-card-link"> | |||
<h3 class="font-lang-lg margin-0"> | |||
<a href="{{ site.baseurl }}/getting-started/developers/" class="text-no-underline text-primary hover:text-underline block-link">Developers</a> | |||
<a href="{{ site.baseurl }}/documentation/getting-started-for-developers/" class="text-no-underline text-primary hover:text-underline block-link">Developers</a> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Point to Getting Started for Developers page
</h3> | ||
<p class="margin-top-1">Get started with our code base by downloading the code as a zip file, or installing with npm.</p> | ||
</div> | ||
</div> | ||
<div class="margin-top-2 tablet:margin-top-0 tablet:grid-col display-flex flex-align-stretch"> | ||
<div class="site-docs-card-link"> | ||
<h3 class="font-lang-lg margin-0"> | ||
<a href="{{ site.baseurl }}/getting-started/designers/" class="text-no-underline text-primary hover:text-underline block-link">Designers</a> | ||
<a href="{{ site.baseurl }}/documentation/getting-started-for-designers/" class="text-no-underline text-primary hover:text-underline block-link">Designers</a> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Point to Getting Started for Designers page
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just a small note on phase-one.md
, otherwise LGTM.
{: .site-note.margin-top-0 } | ||
You do want to use the source code, but you don't want to modify it to use it. Instead, in Phase 2, we'll discuss how to compile, theme, and extend the USWDS source code in your project. | ||
|
||
**Next:** [Phase 2: Compile >]({{ site.baseurl }}/documentation/getting-started/developers/phase-two-compile/) → |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's remove the >
now that we're using the arrow.
**Next:** [Phase 2: Compile >]({{ site.baseurl }}/documentation/getting-started/developers/phase-two-compile/) → | |
**Next:** [Phase 2: Compile]({{ site.baseurl }}/documentation/getting-started/developers/phase-two-compile/) → |
## Resources | ||
Now that you’ve gotten started, the following resources are available to help you stay in touch, to provide support as you continue with your projects, and to enable you to provide recommendations and feedback. | ||
|
||
## Need installation help? | ||
Do you have questions or need help with setup? Did you run into any weird errors while following these instructions? Feel free to [open an issue](https://github.com/uswds/uswds/issues) in GitHub. | ||
|
||
You can also email us directly at [uswds@support.digitalgov.gov](mailto:uswds@support.digitalgov.gov). | ||
|
||
## Stay involved | ||
USWDS is supported by an active, open-source community of engineers, content specialists, and designers. | ||
|
||
## Continue learning | ||
We regularly update USWDS. To stay informed of changes, tips, and tricks, join us for our monthly calls and/or [subscribe to Wave](https://public.govdelivery.com/accounts/USGSATTS/subscriber/new?qsp=GSA_TTS), our newsletter. | ||
|
||
## Contribute to the codebase | ||
For complete instructions on how to contribute code, please read [CONTRIBUTING.md](https://github.com/uswds/uswds/blob/develop/CONTRIBUTING.md). These instructions also include guidance on how to set up your own copy of the design system style guide website for development. | ||
|
||
If you would like to learn more about how we work, check out the [Workflow](https://github.com/uswds/uswds/wiki/Workflow) and [Issue label Glossary](https://github.com/uswds/uswds/wiki/Issue-label-glossary) pages on our wiki. | ||
|
||
If you have questions or concerns about our contributing workflow, feel free to [open an issue](https://github.com/uswds/uswds/issues), such as the following in GitHub: | ||
- Bug report — Report a bug and help USWDS improve. | ||
- Feature request — Suggest a new idea for the design system. | ||
- Report a security vulnerability — Report potential security issues. Review our [security policy](https://github.com/uswds/uswds/security/policy) for more details. | ||
|
||
You can also email us directly at [uswds@support.digitalgov.gov](mailto:uswds@support.digitalgov.gov). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Resources should be a separate section comprising all the content beneath it.
We’ve designed USWDS to support older and newer browsers through [progressive enhancement](https://en.wikipedia.org/wiki/Progressive_enhancement). The design system follows the [2% rule](https://gds.blog.gov.uk/2012/01/25/support-for-browsers/): we officially support any browser above 2% usage as observed by [analytics.usa.gov](https://analytics.usa.gov/). In other words, USWDS version 2.0 supports Chrome, Firefox, Safari, Edge, and Internet Explorer 11 and up. The next major version of USWDS (3.0) will drop support of Internet Explorer 11. | ||
|
||
## Step-by-step | ||
Get started with USWDS by installing the design system on your project, compiling your project's Sass from the USWDS source, and customizing the design system to fit your project needs. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Get started with USWDS by installing the design system on your project, compiling your project's Sass from the USWDS source, and customizing the design system to fit your project needs. | |
Get started with USWDS by installing the design system on your project, compiling your project's Sass from the USWDS source, and customizing the design system to fit your project needs as outlined in the following phases: |
Replaces #1318 and #1360
Preview →