Add Getting Started for Devs by thisisdano · Pull Request #1362 · uswds/uswds-site

thisisdano · 2021-12-06T16:01:45Z

Adds Getting Started content for developers
Incorporates Ruby work from Bump ruby to 3.0.2 #1318

This solves an installation issue I was having with liquid-c similar to Shopify/liquid-c#164

thisisdano · 2021-12-06T16:04:49Z

-  - href: /documentation/designers/
-  - href: /documentation/accessibility/
  - href: /documentation/settings/
+  - href: /maturity-model/


Moves Maturity Model down in the side nav

thisisdano · 2021-12-06T16:05:02Z

  - href: /documentation/implementations/
  - href: /documentation/showcase/
  - href: /documentation/sample-contract-language/
+  - href: /website-standards/


Moves Website Standards down in the side nav

thisisdano · 2021-12-06T16:05:42Z

+  - text: Getting started for developers
+    href: /documentation/getting-started-for-developers/
+  - text: Getting started for designers
+    href: /documentation/getting-started-for-designers/


These replace the old "For developers" and "For designers" sections

thisisdano · 2021-12-06T16:08:44Z

+    href: /documentation/getting-started-for-developers/
+  - text: Getting started for designers
+    href: /documentation/getting-started-for-designers/
  - href: /documentation/developers/


↑ This is the old developers section, now called "Documentation"

thisisdano · 2021-12-06T16:09:26Z

+<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">


Added a step indicator component for testing, but ended up not implementing it here

thisisdano · 2021-12-06T16:10:20Z

 permalink: /documentation/developers/
 layout: styleguide
-title: For developers
+title: Documentation


The old developer docs. Next step: rewriting and rethinking.

thisisdano · 2021-12-06T16:10:51Z

 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/


Redirects from the old designers page

thisisdano · 2021-12-06T16:11:26Z

+  - href: /documentation/getting-started/developers/phase-two-compile/
+  - href: /documentation/getting-started/developers/phase-three-customize/
+redirect_from:
+  - /documentation/fundamentals/


Redirects from the old fundamentals and quickstart page

thisisdano · 2021-12-06T16:12:42Z

    <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>


Point to Getting Started for Developers page

thisisdano · 2021-12-06T16:13:03Z

    <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>


Point to Getting Started for Designers page

mejiaj

Just a small note on phase-one.md, otherwise LGTM.

mejiaj · 2021-12-06T21:30:38Z

+{: .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 &gt;]({{ site.baseurl }}/documentation/getting-started/developers/phase-two-compile/) →


Let's remove the > now that we're using the arrow.

Suggested change

**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/) →

mikki-stacey · 2021-12-06T22:01:33Z

+## 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).


Resources should be a separate section comprising all the content beneath it.

mikki-stacey · 2021-12-06T22:07:51Z

+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.


Suggested change

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:

thisisdano and others added 17 commits November 16, 2021 14:23

Bump ruby to 3.0.2

c32d37c

This solves an installation issue I was having with liquid-c similar to Shopify/liquid-c#164

Run snyk

0c93087

Use github develop branch

46d8ef8

Update open() method to URI.open()

947db05

Update open() method to URI.open()

fb1db20

Merge branch 'main' into dw-bump-ruby

bcc4c88

Add getting started scaffolding

75feb1b

Update snyk

57825f0

Update .bundler-version

cdcbcef

Merge branch 'main' into dw-bump-ruby

4d086ee

Update snyk

020d330

Merge branch 'dw-bump-ruby' into dw-add-getting-started-for-devs

3d7171d

Add overview page

c3a4b17

Add phase copy

15958a8

Add subnavs

a521417

Update and clarify content

fefbdf3

Simplify sentence

dde0bdd

This was referenced Dec 6, 2021

'Getting started for devs' guide: added markdown for new content #1360

Closed

Bump ruby to 3.0.2 #1318

Closed

thisisdano marked this pull request as ready for review December 6, 2021 16:03

thisisdano commented Dec 6, 2021

View reviewed changes

thisisdano requested a review from mejiaj December 6, 2021 17:13

mejiaj suggested changes Dec 6, 2021

View reviewed changes

mejiaj requested review from mikki-stacey and sofya-UX December 6, 2021 21:33

mikki-stacey reviewed Dec 6, 2021

View reviewed changes

thisisdano merged commit 56e5427 into main Dec 7, 2021

thisisdano mentioned this pull request Dec 7, 2021

Add final copyedits #1365

Merged

mahoneycm mentioned this pull request Jan 22, 2024

USWDS-Site - Security: Update load method to address security concerns. #2448

Merged

12 tasks

mejiaj deleted the dw-add-getting-started-for-devs branch February 21, 2024 15:45

	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/) →

	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:

Conversation

thisisdano commented Dec 6, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mejiaj left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

thisisdano commented Dec 6, 2021 •

edited

Loading