Skip to content
Permalink
Browse files

migrated to doctocat and removed old pages directory

  • Loading branch information...
ashygee committed Aug 14, 2019
1 parent 50404d8 commit 11151265bc1834630c4bdf63a3a4cdf394e7f724
Showing with 13,104 additions and 5,479 deletions.
  1. +92 −3 .gitignore
  2. +0 −2 .npmrc
  3. +2 −5 README.md
  4. BIN assets/apple-touch-icon.png
  5. BIN assets/favicon.png
  6. +5 −0 content/foundation/color.mdx
  7. +3 −0 content/foundation/index.mdx
  8. +16 −38 {pages/design → content}/foundation/typography.mdx
  9. +45 −24 {pages/design → content}/global/accessibility.mdx
  10. +3 −0 content/global/index.mdx
  11. +6 −0 content/index.mdx
  12. +71 −57 {pages/design → content}/tools/figma.mdx
  13. +3 −0 content/tools/index.mdx
  14. +151 −0 content/ui-patterns/button-usage.mdx
  15. +3 −0 content/ui-patterns/index.mdx
  16. +149 −0 content/ui-patterns/progressive-disclosure.mdx
  17. +10 −0 gatsby-config.js
  18. +0 −37 next.config.js
  19. +14 −15 now.json
  20. +11,071 −4,453 package-lock.json
  21. +11 −23 package.json
  22. +0 −87 pages/_app.js
  23. +0 −61 pages/_document.js
  24. +0 −3 pages/design/foundation/color.mdx
  25. +0 −3 pages/design/foundation/index.mdx
  26. +0 −3 pages/design/global/index.mdx
  27. +0 −3 pages/design/index.mdx
  28. +0 −3 pages/design/tools/index.mdx
  29. +0 −5 pages/design/tools/sketch.mdx
  30. +0 −129 pages/design/ui-patterns/button-usage.mdx
  31. +0 −3 pages/design/ui-patterns/index.mdx
  32. +0 −144 pages/design/ui-patterns/progressive-disclosure.mdx
  33. +0 −3 pages/index.js
  34. +24 −0 src/@primer/gatsby-theme-doctocat/components/hero.js
  35. +24 −0 src/@primer/gatsby-theme-doctocat/nav.yml
  36. +0 −18 src/BannerAnimation.js
  37. +0 −7 src/BoxShadow.js
  38. +0 −97 src/Contributors.js
  39. +0 −69 src/Header.js
  40. +0 −20 src/IndexHero.js
  41. +0 −79 src/SideNav.js
  42. +0 −9 src/constants.js
  43. +13 −0 src/hero-animation.js
  44. 0 src/{BannerAnimation.json → hero-animation.json}
  45. +1,388 −0 src/hero-illustration.svg
  46. 0 {pages/design/foundation/svg → src/images}/interUI.svg
  47. 0 {pages/design/foundation/svg → src/images}/segoe.svg
  48. 0 {pages/design/foundation/svg → src/images}/sf.svg
  49. 0 {pages/design/foundation/svg → src/images}/sfMono.svg
  50. 0 {pages/design/foundation/svg → src/images}/ubuntu.svg
  51. +0 −6 src/index.js
  52. +0 −30 src/nav.js
  53. +0 −40 src/utils.js
@@ -1,5 +1,94 @@
# Logs
logs
*.log
.*.swp
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test

# parcel-bundler cache (https://parceljs.org/)
.cache

# next.js build output
.next

# nuxt.js build output
.nuxt

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# Gatsby
public/

# .DS_Store
.DS_Store
.next/
node_modules
2 .npmrc

This file was deleted.

@@ -1,4 +1,4 @@
# Primer Design Guidelines
# Primer Interface Guidelines

Documentation for UI patterns and interaction guidelines.

@@ -17,11 +17,8 @@ This is currently a work in progress! Follow along on our [project board](https:

1. `npm install` to install dependencies

1. `npm run dev` to start the [Next] server
2. `npm run develop` to start the dev server

## Deployment

We deploy this site using [primer/deploy](https://github.com/primer/deploy). Every push to a branch other than `master` will deploy to a URL unique to the branch name, i.e.: `primer-design-{branch}.now.sh`. Merges to `master` will automatically deploy the site to `primer-design.now.sh`.


[Next]: https://github.com/zeit/next.js
Binary file not shown.
BIN -72.7 KB assets/favicon.png
Binary file not shown.
@@ -0,0 +1,5 @@
---
title: Color
---

Color
@@ -0,0 +1,3 @@
---
title: Foundations
---
@@ -1,51 +1,29 @@
import Segoe from './svg/segoe.svg'
import SF from './svg/sf.svg'
import Ubuntu from './svg/ubuntu.svg'
import SFMono from './svg/sfMono.svg'
import InterUI from './svg/interUI.svg'
---
title: Typography
---

import segoeImage from '../../src/images/segoe.svg'
import sfImage from '../../src/images/sf.svg'
import sfMonoImage from '../../src/images/sfMono.svg'
import interImage from '../../src/images/interUI.svg'
import ubuntuImage from '../../src/images/ubuntu.svg'
import {Box} from '@primer/components'

# Typography

These guidelines summarize how we use typography at GitHub, and serve as guardrails for designers to design freely with best typographic practices in mind.

<!-- {:toc} -->

## Typefaces

The first three typefaces listed below are the most commonly utilized system-fonts on GitHub products. However, this isn’t a finite list, so keep in mind that typographic implementations may vary between browser settings and operating systems.

[Inter UI](https://rsms.me/inter/) and [SF Mono](https://developer.apple.com/fonts/) are not system fonts, but are used in specialized scenarios to diffierentiate information and establish hierarchy.

<Box maxWidth={256}>
<SF />
</Box>

[San Francisco](https://developer.apple.com/fonts/) is a neo-grotesque sans-serif typeface designed by Apple to replace Helvetica Neue for OSX and iOS

<Box maxWidth={207}>
<Segoe />
</Box>

[Segoe UI](https://developer.microsoft.com/en-us/fabric#/resources) is a humanist sans-serif adopted by Microsoft as it's default operating system font since Windows Vista

<Box maxWidth={180}>
<Ubuntu />
</Box>

[Ubuntu](https://design.ubuntu.com/font/) is an OpenType-based, humanist sans-serif typeface. It became the default system font for Ubuntu 10.10 and is commonly used on Linux distros

<Box maxWidth={202}>
<InterUI />
</Box>

[Inter UI](https://rsms.me/inter/) is a typeface designed by Rasmus Andersson specially for user interfaces. Inter UI is used in our products as a display face in select circumstances

<Box maxWidth={240}>
<SFMono />
</Box>

[SF Mono](https://developer.apple.com/fonts/) is a monospace typeface that is part of the San Francisco typeface family. SF Mono is monospaced across weights, so resetting SF Mono text into another font weight will not cause text to reflow
| Example | Description |
| ------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <img src={sfImage} alt="San Francisco" width="1000" /> | [San Francisco](https://developer.apple.com/fonts/) is a neo-grotesque sans-serif typeface designed by Apple to replace Helvetica Neue for OSX and iOS |
| <img src={segoeImage} alt="Segoe" width="1000" /> | [Segoe UI](https://developer.microsoft.com/en-us/fabric#/resources) is a humanist sans-serif adopted by Microsoft as it's default operating system font since Windows Vista |
| <img src={ubuntuImage} alt="Ubuntu" width="1000" /> | [Ubuntu](https://design.ubuntu.com/font/) is an OpenType-based, humanist sans-serif typeface. It became the default system font for Ubuntu 10.10 and is commonly used on Linux distros |
| <img src={interImage} alt="Inter" width="1000" /> | [Inter UI](https://rsms.me/inter/) is a typeface designed by Rasmus Andersson specially for user interfaces. Inter UI is used in our products as a display face in select circumstances |
| <img src={sfMonoImage} alt="SF Mono" width="1000" /> | [SF Mono](https://developer.apple.com/fonts/) is a monospace typeface that is part of the San Francisco typeface family. SF Mono is monospaced across weights, so resetting SF Mono text into another font weight will not cause text to reflow |

## Font stack

@@ -1,12 +1,12 @@
# Accessibility
---
title: Accessibility
---

Accessibility is everyone’s responsibility, and the purpose of this document is to provide general accessibility guidelines to developers and designers.

<!-- {:toc} -->

## Overview

Our products should be accessible to all. At minimum, features should comply to the requirements listed in [508 Reference Guide - 1194.22](https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508-standards/guide-to-the-section-508-standards/web-based-intranet-and-internet-information-and-applications-1194-22) from the US Access Board, and conform to [Web Content Accessibility Guidelines 2.0](https://www.w3.org/TR/WCAG20/#conformance) at Level AA.
Our products should be accessible to all. At minimum, features should comply to the requirements listed in [508 Reference Guide - 1194.22](https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508-standards/guide-to-the-section-508-standards/web-based-intranet-and-internet-information-and-applications-1194-22) from the US Access Board, and conform to [Web Content Accessibility Guidelines 2.0](https://www.w3.org/TR/WCAG20/#conformance) at Level AA.

Making our products accessible benefits everyone, not just people with disabilities. Below are some examples of use cases in which accessibility is important:

@@ -39,10 +39,11 @@ Only use a `div` or a `span` to markup up content when there isn't another HTML
```

<!-- flash -->

More on semantic markup:

- [Semantic Structure – WebAIM](http://webaim.org/techniques/semanticstructure/)
<!-- endflash -->
<!-- endflash -->

### Keyboard accessibility

@@ -73,12 +74,13 @@ Finally, bear in mind that some assistive technologies have keyboard combination
```

<!-- flash -->

More on keyboard accessibility:

- [Focus Order – Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html)
- [Time to revisit accesskey? by Léonie Watson](http://tink.uk/time-to-revisit-accesskey/)
- [Flexbox & the keyboard navigation disconnect by Léonie Watson](http://tink.uk/flexbox-the-keyboard-navigation-disconnect/)
<!-- endflash -->
<!-- endflash -->

### Visual accessibility

@@ -87,57 +89,69 @@ Be mindful when using small font size, thin font weight, low contrast colors in
Instead of relying solely on color to communicate information, always combine color with another factor, like shape or position change. This is important because some colors can be hard to tell apart due to color blindness or weak eyesight.

<!-- flash -->

More on visual accessibility:

- [Use of Color – Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html)
- [Contrast – Understanding WCAG 2.0](http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
<!-- endflash -->
<!-- endflash -->

### Text and labels

Make sure text-based alternative is always available when using icons, images, and graphs, and that the text by itself presents meaningful information.

```html
<!-- Do: Link text communicates destination. -->
<p>Find out more about <a href="#url">GitHub Enterprise pricing</a>.<br></p>
<p>Find out more about <a href="#url">GitHub Enterprise pricing</a>.<br /></p>
```

```html
<!-- Don't: "Click here" is not meaningful. -->
<p>To find out more about GitHub Enterprise pricing, <a href="#url">click here</a>.</p>
<p>
To find out more about GitHub Enterprise pricing,
<a href="#url">click here</a>.
</p>
```

Use `title` to add information on top of existing content.

```html
<a title="@octocat's repositories" href="https://github.com/octocat?tab=repositories">octocat</a>
<a
title="@octocat's repositories"
href="https://github.com/octocat?tab=repositories"
>octocat</a
>
```

Use `aria-label` when there is no text.

```html
<a href="https://help.github.com/"><%= octicon("question", :"aria-label" => "Help") %></a>
<a href="https://help.github.com/"
><%= octicon("question", :"aria-label" => "Help") %></a
>
```

### Link responsibly

Navigating from a list of all the links on a given web page is very common for assistive technology users. We should make sure that the link text itself is meaningful and unique, and there should be as few duplicated references as possible.

<!-- flash -->

More on link responsibly:

- [Link Purpose – Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html)
<!-- endflash -->
<!-- endflash -->

### Dynamic content

When using JavaScript to change the content on the page, always make sure that screen reader users are informed about the change. This can be done with `aria-live`, or focus management.

<!-- flash -->

More on dynamic content:

- [ARIA Live Regions – MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)
<!-- endflash -->
<!-- endflash -->

### Focus management

@@ -149,16 +163,25 @@ It is common for assistive technology users to jump straight to a form when usin

```html
<!-- Do: Click "Email" label to focus on the input, and help text is read out by screen readers when focusing on the input. -->
<label for="test_input">Email</label><br>
<input id="test_input" aria-describedby="test_input_help_good" class="width-full my-1" type="email">
<div id="test_input_help_good" class="f6">Please enter an email ending with @github.com.</div>
<label for="test_input">Email</label><br />
<input
id="test_input"
aria-describedby="test_input_help_good"
class="width-full my-1"
type="email"
/>
<div id="test_input_help_good" class="f6">
Please enter an email ending with @github.com.
</div>
```

```html
<!-- Don't: Input and label are not associated, and help text is not read out by screen reader when focusing on the input. -->
<label>Email</label><br>
<input type="email" class="width-full my-1">
<div id="test_input_help_bad" class="f6">Please enter an email ending with @github.com.</div>
<label>Email</label><br />
<input type="email" class="width-full my-1" />
<div id="test_input_help_bad" class="f6">
Please enter an email ending with @github.com.
</div>
```

## Development tools
@@ -175,7 +198,7 @@ We do client side scanning of inaccessible elements in development environment.

- If you're working on a design that uses color to communicate something, grab the [Chromatic Vision Simulator app](https://itunes.apple.com/tw/app/chromatic-vision-simulator/id389310222?mt=8), this will let you use your iPhone camera to see what a colorblind person would see.

- Check out [the Web Accessibility showcase on GitHub](https://github.com/showcases/web-accessibility). GitHubbers are free to add more projects to the showcase.
- Check out [the Web Accessibility showcase on GitHub](https://github.com/showcases/web-accessibility). GitHubbers are free to add more projects to the showcase.

## Manual testing

@@ -191,8 +214,8 @@ Keep in mind that behaviors in different screen readers can differ when navigati

1. You can mention these teams when looking for help:

- [@github/accessibility](https://github.com/orgs/github/teams/accessibility): GitHubbers interested in accessibility related topics and work on website accessibility issues.
- [@github/colorblind](https://github.com/orgs/github/teams/colorblind): GitHubbers who are interested in accessibility for colorblindness.
- [@github/accessibility](https://github.com/orgs/github/teams/accessibility): GitHubbers interested in accessibility related topics and work on website accessibility issues.
- [@github/colorblind](https://github.com/orgs/github/teams/colorblind): GitHubbers who are interested in accessibility for colorblindness.

2. Go to #accessibility Slack channel to ask questions or discuss accessibility issues.
3. Check [github/accessibility repository](https://github.com/github/accessibility) for information on events or learning resources.
@@ -202,5 +225,3 @@ Keep in mind that behaviors in different screen readers can differ when navigati
Accessibility is a priority for us, if you ever encounter accessibility related issues when using github.com, please don’t hesitate to reach out to us via [the contact page](https://github.com/contact) or email us at [support@github.com](mailto:support@github.com), we will try our best to assist.

For information about the accessibility compliance of GitHub products, please refer to our [VPAT report, outlining §508 accessibility information for GitHub.com, GitHub Enterprise, and GitHub Desktop](https://government.github.com/accessibility/).

export const meta = {displayName: 'Accessibility'}
@@ -0,0 +1,3 @@
---
title: Global
---
@@ -0,0 +1,6 @@
---
title: Interface Guidelines
---

import {HeroLayout} from '@primer/gatsby-theme-doctocat'
export default HeroLayout

0 comments on commit 1115126

Please sign in to comment.
You can’t perform that action at this time.