mirror of
https://github.com/primer/css.git
synced 2025-01-05 04:47:21 +03:00
put in path
This commit is contained in:
emplums
parent
eccfdfb5c4
commit
e7b1d360ab
@ -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'
|
||||
|
||||
@ -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]
|
||||
|
||||
@ -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]
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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:
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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]
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Contributing
|
||||
path: getting-started/contributing
|
||||
---
|
||||
|
||||
Guidelines for contributing to GitHub's CSS.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
---
|
||||
title: CSS
|
||||
path: /
|
||||
---
|
||||
|
||||
import {Box, Flex, Heading, Link, Text} from '@primer/components'
|
||||
import {
|
||||
PrimerCSSAnimation,
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: HTML
|
||||
path: principles/html
|
||||
---
|
||||
|
||||
{:toc}
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: SCSS
|
||||
path: priniciples/scss
|
||||
---
|
||||
|
||||
{:toc}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Status key
|
||||
path: status-key
|
||||
---
|
||||
|
||||
import StatusLabel from '../../docs/StatusLabel'
|
||||
|
||||
@ -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]
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Tools
|
||||
path: tools/index
|
||||
---
|
||||
|
||||
Design and development tools for working with the GitHub CSS toolkit.
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Colors
|
||||
path: utilities/colors
|
||||
description: 'Immutable, atomic CSS classes to rapidly build product'
|
||||
status: Stable
|
||||
package:
|
||||
|
||||
@ -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.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user