mirror of
https://github.com/primer/css.git
synced 2025-01-06 22:36:48 +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.
|
||||
|
||||
@ -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