diff --git a/pages/css/components/box-overlay.md b/pages/css/components/box-overlay.md index c4627a1e..e9905da0 100644 --- a/pages/css/components/box-overlay.md +++ b/pages/css/components/box-overlay.md @@ -1,5 +1,6 @@ --- title: Box overlay +path: components/box-overlay status: Experimental status_issue: 'https://github.com/github/design-systems/issues/374' source: 'https://github.com/github/github/tree/master/app/assets/stylesheets/components/box-overlay.scss' diff --git a/pages/css/components/boxed-groups.md b/pages/css/components/boxed-groups.md index 2ee2dad1..88ec85a9 100644 --- a/pages/css/components/boxed-groups.md +++ b/pages/css/components/boxed-groups.md @@ -1,5 +1,6 @@ --- title: Boxed groups +path: components/boxed-group status: Deprecated source: 'https://github.com/github/github/blob/master/app/assets/stylesheets/components/boxed-groups.scss' symbols: [BtnGroup, Counter, ajax-error-message, approved, avatar, bleed-flush, boxed-action, boxed-group, boxed-group-action, boxed-group-breadcrumb, boxed-group-inner, boxed-group-list, boxed-group-standalone, boxed-group-table, boxed-group-warning, btn-sm, compact, compact-options, condensed, dangerzone, dashboard-sidebar, field-with-errors, flush, heading, help, inline-error, markdown-body, octicon, octicon-alert, one-half, rejected, seamless, selected, spinner, standalone, tabnav, tabnav-tab, visible] diff --git a/pages/css/components/dropdown.md b/pages/css/components/dropdown.md index c7047a56..ee687b46 100644 --- a/pages/css/components/dropdown.md +++ b/pages/css/components/dropdown.md @@ -1,5 +1,6 @@ --- title: Dropdown +path: components/dropdown status: Stable source: 'https://github.com/github/github/tree/master/app/assets/stylesheets/components/dropdown.scss' symbols: [active, anim-scale-in, btn-link, dropdown, dropdown-caret, dropdown-divider, dropdown-header, dropdown-item, dropdown-menu, dropdown-menu-content, dropdown-menu-e, dropdown-menu-ne, dropdown-menu-no-overflow, dropdown-menu-s, dropdown-menu-se, dropdown-menu-sw, dropdown-menu-w, dropdown-signout, octicon, zeroclipboard-is-hover] diff --git a/pages/css/components/flash-banner.md b/pages/css/components/flash-banner.md index 21bd787c..a1f47484 100644 --- a/pages/css/components/flash-banner.md +++ b/pages/css/components/flash-banner.md @@ -1,5 +1,6 @@ --- title: Flash banner +path: components/flash-banner status: In review status_issue: 'https://github.com/github/design-systems/issues/99' source: 'https://github.com/github/github/tree/master/app/assets/stylesheets/components/flash-banner.scss' diff --git a/pages/css/components/index.md b/pages/css/components/index.md index dd1c93f2..203ab6dd 100644 --- a/pages/css/components/index.md +++ b/pages/css/components/index.md @@ -1,5 +1,6 @@ --- title: Components +path: components/index --- Components make it easier to mark up a set of elements that are commonly grouped together with similar visual styles. Their base styles are shared and variants are added with modifier classes, so usually components are comprised of multiple classes. Most importantly, components should be highly reusable across the site, rather than built for specific pages or features. To achieve this: diff --git a/pages/css/components/pagehead.md b/pages/css/components/pagehead.md index 31f8a453..54ded7dd 100644 --- a/pages/css/components/pagehead.md +++ b/pages/css/components/pagehead.md @@ -1,5 +1,6 @@ --- title: Pagehead +path: components/pagehead status: Stable internal: true source: 'https://github.com/github/github/tree/master/app/assets/stylesheets/components/pagehead.scss' diff --git a/pages/css/components/select-menu.md b/pages/css/components/select-menu.md index 09a72007..c3104feb 100644 --- a/pages/css/components/select-menu.md +++ b/pages/css/components/select-menu.md @@ -1,5 +1,6 @@ --- title: Select menu +path: components/select-menu status: Stable source: 'https://github.com/github/github/blob/master/docs/styleguide/css/styles/product/components/select-menu.md' symbols: [active, close-button, css-truncate-target, description, description-inline, description-warning, disabled, filterable-empty, has-error, hidden-select-button-text, icon-only, indeterminate, is-loading, is-showing-new-item-form, label-select-menu, last-visible, menu-active, modal-backdrop, navigation-focus, octicon, octicon-check, octicon-dash, octicon-octoface, octicon-x, opaque, primary, select-menu, select-menu-action, select-menu-blankslate, select-menu-button, select-menu-button-gravatar, select-menu-button-large, select-menu-clear-item, select-menu-divider, select-menu-error, select-menu-filters, select-menu-header, select-menu-item, select-menu-item-gravatar, select-menu-item-heading, select-menu-item-icon, select-menu-item-parent, select-menu-item-template, select-menu-item-text, select-menu-list, select-menu-loading-overlay, select-menu-modal, select-menu-modal-holder, select-menu-modal-narrow, select-menu-modal-right, select-menu-new-item-form, select-menu-no-results, select-menu-tab, select-menu-tab-bucket, select-menu-tab-nav, select-menu-tabs, select-menu-text-filter, select-menu-title, selected, spinner] diff --git a/pages/css/getting-started/contributing.md b/pages/css/getting-started/contributing.md index 0e280fcc..1bda29a4 100644 --- a/pages/css/getting-started/contributing.md +++ b/pages/css/getting-started/contributing.md @@ -1,5 +1,6 @@ --- title: Contributing +path: getting-started/contributing --- Guidelines for contributing to GitHub's CSS. diff --git a/pages/css/getting-started/index.md b/pages/css/getting-started/index.md index bfa191a6..fe8dacff 100644 --- a/pages/css/getting-started/index.md +++ b/pages/css/getting-started/index.md @@ -1,5 +1,6 @@ --- title: Getting started +path: getting-started/index --- Our CSS framework, Primer, is [open-sourced on GitHub](https://github.com/primer/primer) and [hosted on npm](https://www.npmjs.com/package/primer). Our modules are grouped into three packages: [primer-core](https://github.com/primer/primer/tree/master/modules/primer-core), [primer-product](https://github.com/primer/primer/tree/master/modules/primer-product), and [primer-marketing](https://github.com/primer/primer/tree/master/modules/primer-marketing). `primer-core` contains packages used in both product (github.com) and marketing (logged out homepage). To install all of primer, you can use [primer](https://github.com/primer/primer) which is a grouping of core, product and marketing. diff --git a/pages/css/index.md b/pages/css/index.md index ba18151c..80e30c2b 100644 --- a/pages/css/index.md +++ b/pages/css/index.md @@ -1,3 +1,8 @@ +--- +title: CSS +path: / +--- + import {Box, Flex, Heading, Link, Text} from '@primer/components' import { PrimerCSSAnimation, diff --git a/pages/css/objects/index.md b/pages/css/objects/index.md index 8370f1b3..9b647366 100644 --- a/pages/css/objects/index.md +++ b/pages/css/objects/index.md @@ -1,5 +1,6 @@ --- title: Objects +path: objects/index --- Objects help us with common layout patterns but aren't concerned with thematic styles. Examples include the table object, the grid, and the media object. Objects essentially provide some scaffolding for layouts and should be able to be used with other objects, components, and utilities. diff --git a/pages/css/principles/accessibility.md b/pages/css/principles/accessibility.md index 207eaa3c..d12caec0 100644 --- a/pages/css/principles/accessibility.md +++ b/pages/css/principles/accessibility.md @@ -1,5 +1,6 @@ --- title: Accessibility +path: principles/accessibility --- Accessibility is everyone’s responsibility, and the purpose of this document is to provide general accessibility guidelines to developers and designers. @@ -41,7 +42,7 @@ Only use a `div` or a `span` to markup up content when there isn't another HTML ``` > More on semantic markup: -> +> > - [Semantic Structure – WebAIM](http://webaim.org/techniques/semanticstructure/) ### Keyboard accessibility @@ -85,7 +86,7 @@ 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. > 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) @@ -120,7 +121,7 @@ Use `aria-label` when there is no text. 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. > More on link responsibly: -> +> > - [Link Purpose – Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html) ### Dynamic content @@ -128,7 +129,7 @@ Navigating from a list of all the links on a given web page is very common for a 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. > More on dynamic content: -> +> > - [ARIA Live Regions – MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) ### Focus management diff --git a/pages/css/principles/html.md b/pages/css/principles/html.md index e4735ee9..4e7023a8 100644 --- a/pages/css/principles/html.md +++ b/pages/css/principles/html.md @@ -1,5 +1,6 @@ --- title: HTML +path: principles/html --- {:toc} diff --git a/pages/css/principles/index.md b/pages/css/principles/index.md index eef9de68..3edb5ff8 100644 --- a/pages/css/principles/index.md +++ b/pages/css/principles/index.md @@ -1,5 +1,6 @@ --- title: Principles +path: principles/index --- The CSS styleguide enables us to create a consistent user experience across GitHub, manage CSS bloat, and make our CSS easier to maintain. These principles should serve as guidelines for how we write and use CSS. diff --git a/pages/css/principles/scss.md b/pages/css/principles/scss.md index 25e6b0b7..122b5cef 100644 --- a/pages/css/principles/scss.md +++ b/pages/css/principles/scss.md @@ -1,5 +1,6 @@ --- title: SCSS +path: priniciples/scss --- {:toc} diff --git a/pages/css/status-key.md b/pages/css/status-key.md index 2f30dc88..da9fad19 100644 --- a/pages/css/status-key.md +++ b/pages/css/status-key.md @@ -1,5 +1,6 @@ --- title: Status key +path: status-key --- import StatusLabel from '../../docs/StatusLabel' diff --git a/pages/css/support/color-system.md b/pages/css/support/color-system.md index f8332c49..41e0ce31 100644 --- a/pages/css/support/color-system.md +++ b/pages/css/support/color-system.md @@ -1,5 +1,6 @@ --- title: Color system +path: support/color-system description: 'Sass variables, mixins, and functions for use in our components.' source: 'https://github.com/primer/primer/blob/master/modules/primer-support/lib/variables/color-system.scss' symbols: [gray, grey, blue, green, purple, yellow, orange, red, black, white] diff --git a/pages/css/tools/atom-packages.md b/pages/css/tools/atom-packages.md index c395a47c..2d22e659 100644 --- a/pages/css/tools/atom-packages.md +++ b/pages/css/tools/atom-packages.md @@ -1,5 +1,6 @@ --- title: Atom packages +path: tools/atom-packages --- [Atom editor](https://atom.io/) is a _"A hackable text editor for the 21st Century"_ built by GitHub. If you use it as your editor of choice, the design systems team has a list of packages that we find useful for CSS development. diff --git a/pages/css/tools/docset.md b/pages/css/tools/docset.md index 3c4032b3..444c5d92 100644 --- a/pages/css/tools/docset.md +++ b/pages/css/tools/docset.md @@ -1,5 +1,6 @@ --- title: Docset +path: tools/docset --- We use and ❤️ [Kapeli's Dash app][dash] for browsing API documentation. Dash comes with 150+ offline documentation sets, but doesn't have our style guide. diff --git a/pages/css/tools/index.md b/pages/css/tools/index.md index cfea4307..4f806f80 100644 --- a/pages/css/tools/index.md +++ b/pages/css/tools/index.md @@ -1,6 +1,6 @@ --- title: Tools +path: tools/index --- Design and development tools for working with the GitHub CSS toolkit. - diff --git a/pages/css/tools/linting.md b/pages/css/tools/linting.md index e937a70b..65c6b162 100644 --- a/pages/css/tools/linting.md +++ b/pages/css/tools/linting.md @@ -1,5 +1,6 @@ --- title: Linting +path: tools/linting --- We use linters to enforce [coding principles and standards](/css/principles). On every pull request we run the linters on the code to make sure any changes meet our standards. When a commit contains code that doesn't meet the standards, the build fails which blocks merging into master and deploying to production. diff --git a/pages/css/tools/local-primer.md b/pages/css/tools/local-primer.md index 4dd7d6ff..a2ebd8c6 100644 --- a/pages/css/tools/local-primer.md +++ b/pages/css/tools/local-primer.md @@ -1,6 +1,7 @@ --- title: Local development internal: true +path: tools/local-primer --- When you are working with the `github/github` codebase, you can link Primer modules with your local development environment using the Primerize script. This will allow you to make changes to primer and see them reflected on `github.localhost` without the overhead of pulling in alpha releases of a package. diff --git a/pages/css/tools/prototyping.md b/pages/css/tools/prototyping.md index d727e953..a0e9c727 100644 --- a/pages/css/tools/prototyping.md +++ b/pages/css/tools/prototyping.md @@ -1,5 +1,6 @@ --- title: Prototyping +path: tools/prototyping --- You're welcome to use whatever prototyping tool suits your needs, however we've set up some options that will help you get started quickly. diff --git a/pages/css/tools/sketch-templates.md b/pages/css/tools/sketch-templates.md index 5cef4523..dd09ee2f 100644 --- a/pages/css/tools/sketch-templates.md +++ b/pages/css/tools/sketch-templates.md @@ -1,6 +1,7 @@ --- title: Sketch templates internal: true +path: tools/sketch-templates --- We often use Sketch for mocking up designs before coding them. To make this process faster and to keep our designs consistent, we have created UI kits that contain many of our commonly used styles. diff --git a/pages/css/tools/testing.md b/pages/css/tools/testing.md index 25f2b404..e5ed09dd 100644 --- a/pages/css/tools/testing.md +++ b/pages/css/tools/testing.md @@ -1,5 +1,6 @@ --- title: Testing resources +path: tools/testing --- At GitHub we use a staging environment called review-lab for testing with production data. Deploying a branch to [review-lab](https://github.com/github/github/blob/master/docs/deployment.md#test-in-lab-environments) for testing is one of the best ways to test your work with real production data prior to an actual production deployment. diff --git a/pages/css/utilities/colors.md b/pages/css/utilities/colors.md index 19e52b96..4d496221 100644 --- a/pages/css/utilities/colors.md +++ b/pages/css/utilities/colors.md @@ -1,5 +1,6 @@ --- title: Colors +path: utilities/colors description: 'Immutable, atomic CSS classes to rapidly build product' status: Stable package: diff --git a/pages/css/utilities/index.md b/pages/css/utilities/index.md index 7e4406fc..0535ceb2 100644 --- a/pages/css/utilities/index.md +++ b/pages/css/utilities/index.md @@ -1,5 +1,6 @@ --- title: Utilities +path: utilities/index --- Utilities provide the building blocks for layout and handle a range common use cases that help us avoid writing custom styles. When we need to add some margin or padding, rather than adding a new selector specific to that use case, we can use utilities. This helps us reduce the number of unique property-value pairs, and helps us keep more consistent styles across the site.