mirror of
https://github.com/primer/css.git
synced 2025-01-07 14:58:54 +03:00
Merge pull request #851 from primer/doctocat
Rewrite docs with Doctocat
This commit is contained in:
Cole Bemis
GitHub
commit
32c9de0e72
2
.gitignore
vendored
2
.gitignore
vendored
@ -9,3 +9,5 @@ _site
|
||||
dist/
|
||||
node_modules/
|
||||
searchIndex.js
|
||||
.cache/
|
||||
public/
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
import React from 'react'
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
export default dynamic(
|
||||
() => {
|
||||
return import('details-dialog-element').then(() => React.createFactory('details-dialog'))
|
||||
},
|
||||
{ssr: false}
|
||||
)
|
||||
@ -1,67 +0,0 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import {Comment, Info, FileCode, Alert} from '@githubprimer/octicons-react'
|
||||
import {Box, Flex, Link, StyledOcticon as Octicon, Text} from '@primer/components'
|
||||
import StatusLabel from './StatusLabel'
|
||||
|
||||
export default function PackageHeader(props) {
|
||||
const {description, internal = false, package: pkg, source = '', status, status_issue: issue, ...rest} = props
|
||||
|
||||
const isPackage = pkg && source.indexOf('/modules/') > -1
|
||||
const isInternal = internal || source.indexOf('https://github.com/github/github') === 0
|
||||
|
||||
let info
|
||||
if (isInternal) {
|
||||
info = (
|
||||
<Text fontWeight="bold" color="orange.5">
|
||||
<Octicon icon={Alert} mr={1} />
|
||||
For GitHub internal use only
|
||||
</Text>
|
||||
)
|
||||
} else if (isPackage) {
|
||||
info = (
|
||||
<>
|
||||
<Text fontWeight="bold" mr={2}>
|
||||
Package:
|
||||
</Text>
|
||||
<Link href={`https://npm.im/${pkg.name}`}>{pkg.name}</Link>
|
||||
</>
|
||||
)
|
||||
} else if (description) {
|
||||
info = (
|
||||
<Text color="gray.5">
|
||||
<Octicon icon={Info} mr={2} />
|
||||
{description}
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Flex justifyContent="space-between" mb={4} {...rest}>
|
||||
<Text as="div" fontSize={1}>
|
||||
{status ? <StatusLabel status={status} as="a" href="/blueprints/status-key" mr={2} /> : null}
|
||||
{info}
|
||||
</Text>
|
||||
<Box>
|
||||
{issue ? (
|
||||
<Link href={issue} ml={2}>
|
||||
<Octicon icon={Comment} />
|
||||
</Link>
|
||||
) : null}
|
||||
{source ? (
|
||||
<Link href={source} ml={2}>
|
||||
<Octicon icon={FileCode} />
|
||||
</Link>
|
||||
) : null}
|
||||
</Box>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
|
||||
PackageHeader.propTypes = {
|
||||
package: PropTypes.shape({
|
||||
name: PropTypes.string.isRequired
|
||||
}),
|
||||
source: PropTypes.string,
|
||||
status: PropTypes.string
|
||||
}
|
||||
@ -1,32 +0,0 @@
|
||||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import {BorderBox, StyledOcticon as Octicon, Text} from '@primer/components'
|
||||
import {PrimitiveDot} from '@githubprimer/octicons-react'
|
||||
|
||||
const StyledLabel = styled(BorderBox)`
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
`
|
||||
|
||||
export const STATUS_COLORS = {
|
||||
stable: 'green.6',
|
||||
'new release': 'green.6',
|
||||
experimental: 'yellow.7',
|
||||
'in review': 'yellow.7',
|
||||
deprecated: 'red.6'
|
||||
}
|
||||
|
||||
export default function StatusLabel({status, children, ...rest}) {
|
||||
return (
|
||||
<StyledLabel px={2} py={1} {...rest}>
|
||||
<Octicon icon={PrimitiveDot} color={getStatusColor(status)} mr={2} />
|
||||
<Text color="black" fontSize={1}>
|
||||
{children || status}
|
||||
</Text>
|
||||
</StyledLabel>
|
||||
)
|
||||
}
|
||||
|
||||
export function getStatusColor(status) {
|
||||
return STATUS_COLORS[status.toLowerCase()] || 'gray.5'
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
export {default as PackageHeader} from './PackageHeader'
|
||||
export {default as StatusLabel} from './StatusLabel'
|
||||
@ -1,6 +0,0 @@
|
||||
import {themeGet, get as getKey} from 'styled-system'
|
||||
import {theme} from '@primer/components'
|
||||
|
||||
export const get = key => themeGet(key, getKey(theme, key))
|
||||
|
||||
export const CONTENT_MAX_WIDTH = 1012
|
||||
@ -6,14 +6,13 @@ source: 'https://github.com/primer/css/tree/master/src/alerts'
|
||||
bundle: alerts
|
||||
---
|
||||
|
||||
|
||||
Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don't show more than one at a time.
|
||||
|
||||
## Default
|
||||
|
||||
Flash messages start off looking decently neutral—they're just light blue rounded rectangles.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="flash">
|
||||
Flash message goes here.
|
||||
</div>
|
||||
@ -21,16 +20,19 @@ Flash messages start off looking decently neutral—they're just light blue roun
|
||||
|
||||
You can put multiple paragraphs of text in a flash message—the last paragraph's bottom `margin` will be automatically override.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="flash">
|
||||
<p>This is a longer flash message in it's own paragraph. It ends up looking something like this. If we keep adding more text, it'll eventually wrap to a new line.</p>
|
||||
<p>
|
||||
This is a longer flash message in it's own paragraph. It ends up looking something like this. If we keep adding more
|
||||
text, it'll eventually wrap to a new line.
|
||||
</p>
|
||||
<p>And this is another paragraph.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
Should the need arise, you can quickly space out your flash message from surrounding content with a `.flash-messages` wrapper. *Note the extra top and bottom margin in the example below.*
|
||||
Should the need arise, you can quickly space out your flash message from surrounding content with a `.flash-messages` wrapper. _Note the extra top and bottom margin in the example below._
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="flash-messages">
|
||||
<div class="flash">
|
||||
Flash message goes here.
|
||||
@ -42,19 +44,19 @@ Should the need arise, you can quickly space out your flash message from surroun
|
||||
|
||||
Add `.flash-warn`, `.flash-error`, or `.flash-success` to the flash message to make it yellow, red, or green, respectively.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="flash flash-warn">
|
||||
Flash message goes here.
|
||||
</div>
|
||||
```
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="flash flash-error">
|
||||
Flash message goes here.
|
||||
</div>
|
||||
```
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="flash flash-success">
|
||||
Flash message goes here.
|
||||
</div>
|
||||
@ -64,9 +66,15 @@ Add `.flash-warn`, `.flash-error`, or `.flash-success` to the flash message to m
|
||||
|
||||
Add an icon to the left of the flash message to give it some funky fresh attention.
|
||||
|
||||
```erb
|
||||
```html live
|
||||
<div class="flash">
|
||||
<%= octicon "alert" %>
|
||||
<!-- <%= octicon "alert" %> -->
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-alert mr-2" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"
|
||||
/>
|
||||
</svg>
|
||||
Flash message with an icon goes here.
|
||||
</div>
|
||||
```
|
||||
@ -75,9 +83,17 @@ Add an icon to the left of the flash message to give it some funky fresh attenti
|
||||
|
||||
Add a JavaScript enabled (via Crema) dismiss (close) icon on the right of any flash message.
|
||||
|
||||
```erb
|
||||
```html live
|
||||
<div class="flash">
|
||||
<button class="flash-close js-flash-close" type="button"><%= octicon "x", :"aria-label" => "Close" %></button>
|
||||
<button class="flash-close js-flash-close" type="button">
|
||||
<!-- <%= octicon "x", :"aria-label" => "Close" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-label="Close" role="img">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
Dismissable flash message goes here.
|
||||
</div>
|
||||
```
|
||||
@ -86,7 +102,7 @@ Add a JavaScript enabled (via Crema) dismiss (close) icon on the right of any fl
|
||||
|
||||
A flash message with an action button.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="flash">
|
||||
<button type="submit" class="btn btn-sm primary flash-action">Complete action</button>
|
||||
Flash message with action here.
|
||||
@ -97,11 +113,10 @@ A flash message with an action button.
|
||||
|
||||
A flash message that is full width and removes border and border radius.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="flash flash-full">
|
||||
<div class="container">
|
||||
Full width flash message.
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -6,37 +6,34 @@ source: 'https://github.com/primer/css/tree/master/src/avatars'
|
||||
bundle: avatars
|
||||
---
|
||||
|
||||
|
||||
Avatars are images that users can set as their profile picture. On GitHub, they're always going to be rounded squares. They can be custom photos, uploaded by users, or generated as Identicons as a placeholder.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
## Basic example
|
||||
|
||||
Add `.avatar` to any `<img>` element to make it an avatar. This resets some key styles for alignment, address a Firefox image placeholder bug, and rounds the corners.
|
||||
|
||||
Be sure to set `width` and `height` attributes for maximum browser performance.
|
||||
|
||||
```html
|
||||
<img class="avatar" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=144" width="72" height="72">
|
||||
```html live
|
||||
<img class="avatar" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=144" width="72" height="72" />
|
||||
```
|
||||
|
||||
### Small avatars
|
||||
|
||||
We occasionally use smaller avatars. Anything less than `48px` wide should include the `.avatar-small` modifier class to reset the `border-radius` to a more appropriate level.
|
||||
|
||||
```html
|
||||
<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=64" width="32" height="32">
|
||||
```html live
|
||||
<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=64" width="32" height="32" />
|
||||
```
|
||||
|
||||
### Parent-child avatars
|
||||
|
||||
When you need a larger parent avatar, and a smaller child one, overlaid slightly, use the parent-child classes.
|
||||
|
||||
```html
|
||||
<div class="avatar-parent-child float-left">
|
||||
<img class="avatar" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=96" width="48" height="48">
|
||||
<img class="avatar avatar-child" alt="josh" src="https://github.com/josh.png?v=3&s=40" width="20" height="20">
|
||||
```html live
|
||||
<div class="avatar-parent-child d-inline-flex">
|
||||
<img class="avatar" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=96" width="48" height="48" />
|
||||
<img class="avatar avatar-child" alt="josh" src="https://github.com/josh.png?v=3&s=40" width="20" height="20" />
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -44,45 +41,110 @@ When you need a larger parent avatar, and a smaller child one, overlaid slightly
|
||||
|
||||
Stacked avatars can be used to show multiple collaborators or participants when there is limited space available. When you hover over the stack, the avatars will reveal themselves.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="AvatarStack AvatarStack--three-plus">
|
||||
<div class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1" aria-label="octocat, octocat, and octocat">
|
||||
<img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
|
||||
<img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
|
||||
<img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
|
||||
<div
|
||||
class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1"
|
||||
aria-label="octocat, octocat, and octocat"
|
||||
>
|
||||
<img
|
||||
class="avatar"
|
||||
height="20"
|
||||
alt="@octocat"
|
||||
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||
width="20"
|
||||
/>
|
||||
<img
|
||||
class="avatar"
|
||||
height="20"
|
||||
alt="@octocat"
|
||||
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||
width="20"
|
||||
/>
|
||||
<img
|
||||
class="avatar"
|
||||
height="20"
|
||||
alt="@octocat"
|
||||
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||
width="20"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Based on the number of avatars in the stack, add these modifier classes:
|
||||
|
||||
- `AvatarStack--two` for 2 avatars.
|
||||
- `AvatarStack--three-plus` for 3 or more avatars.
|
||||
|
||||
If you have more than three avatars, add a div with the classes `avatar avatar-more` as the third avatar in the stack, as such:
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="AvatarStack AvatarStack--three-plus">
|
||||
<div class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1" aria-label="octocat, octocat, octocat, octocat, and octocat">
|
||||
<img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
|
||||
<img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
|
||||
<div
|
||||
class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1"
|
||||
aria-label="octocat, octocat, octocat, octocat, and octocat"
|
||||
>
|
||||
<img
|
||||
class="avatar"
|
||||
height="20"
|
||||
alt="@octocat"
|
||||
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||
width="20"
|
||||
/>
|
||||
<img
|
||||
class="avatar"
|
||||
height="20"
|
||||
alt="@octocat"
|
||||
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||
width="20"
|
||||
/>
|
||||
<div class="avatar avatar-more"></div>
|
||||
<img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
|
||||
<img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
|
||||
<img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
|
||||
<img
|
||||
class="avatar"
|
||||
height="20"
|
||||
alt="@octocat"
|
||||
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||
width="20"
|
||||
/>
|
||||
<img
|
||||
class="avatar"
|
||||
height="20"
|
||||
alt="@octocat"
|
||||
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||
width="20"
|
||||
/>
|
||||
<img
|
||||
class="avatar"
|
||||
height="20"
|
||||
alt="@octocat"
|
||||
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||
width="20"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
You can also link individual avatars. To do this shift the `avatar` class over to the anchor:
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="AvatarStack AvatarStack--two">
|
||||
<div class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1" aria-label="octocat and octocat">
|
||||
<a href="#" class="avatar">
|
||||
<img height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
|
||||
<img
|
||||
height="20"
|
||||
alt="@octocat"
|
||||
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||
width="20"
|
||||
/>
|
||||
</a>
|
||||
<a href="#" class="avatar">
|
||||
<img height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
|
||||
<img
|
||||
height="20"
|
||||
alt="@octocat"
|
||||
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||
width="20"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -90,12 +152,33 @@ You can also link individual avatars. To do this shift the `avatar` class over t
|
||||
|
||||
Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the alignment of tooltips when making this change.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="AvatarStack AvatarStack--three-plus AvatarStack--right">
|
||||
<div class="AvatarStack-body tooltipped tooltipped-sw tooltipped-align-right-1" aria-label="octocat, octocat, and octocat">
|
||||
<img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
|
||||
<img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
|
||||
<img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
|
||||
<div
|
||||
class="AvatarStack-body tooltipped tooltipped-sw tooltipped-align-right-1"
|
||||
aria-label="octocat, octocat, and octocat"
|
||||
>
|
||||
<img
|
||||
class="avatar"
|
||||
height="20"
|
||||
alt="@octocat"
|
||||
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||
width="20"
|
||||
/>
|
||||
<img
|
||||
class="avatar"
|
||||
height="20"
|
||||
alt="@octocat"
|
||||
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||
width="20"
|
||||
/>
|
||||
<img
|
||||
class="avatar"
|
||||
height="20"
|
||||
alt="@octocat"
|
||||
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||
width="20"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -119,17 +202,17 @@ Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the
|
||||
|
||||
### Medium
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="CircleBadge CircleBadge--medium bg-gray-dark">
|
||||
<img src="https://github.com/travis-ci.png" alt="Travis CI" class="CircleBadge-icon">
|
||||
<img src="https://github.com/travis-ci.png" alt="Travis CI" class="CircleBadge-icon" />
|
||||
</div>
|
||||
```
|
||||
|
||||
### Large
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="CircleBadge CircleBadge--large">
|
||||
<img src="https://github.com/travis-ci.png" alt="Travis CI" class="CircleBadge-icon">
|
||||
<img src="https://github.com/travis-ci.png" alt="Travis CI" class="CircleBadge-icon" />
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -6,16 +6,15 @@ source: 'https://github.com/primer/css/tree/master/src/blankslate'
|
||||
bundle: blankslate
|
||||
---
|
||||
|
||||
|
||||
Blankslates are for when there is a lack of content within a page or section. Use them as placeholders to tell users why something isn't there. Be sure to provide an action to add content as well.
|
||||
|
||||
#### Basic example
|
||||
## Basic example
|
||||
|
||||
Wrap some content in the outer `.blankslate` wrapper to give it the blankslate appearance.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="blankslate">
|
||||
<img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="" class="mb-3">
|
||||
<img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="" class="mb-3" />
|
||||
<h3 class="mb-1">You don’t seem to have any pull requests.</h3>
|
||||
<p>Pull requests help you discuss potential changes before they are merged into the base branch.</p>
|
||||
<button class="btn btn-primary my-3" type="button">New pull request</button>
|
||||
@ -23,31 +22,49 @@ Wrap some content in the outer `.blankslate` wrapper to give it the blankslate a
|
||||
</div>
|
||||
```
|
||||
|
||||
#### With Octicons
|
||||
## With Octicons
|
||||
|
||||
When it helps the message, include (relevant) icons in your blank slate. Add `.blankslate-icon` to any `.mega-octicon`s as the first elements in the blankslate, like so.
|
||||
|
||||
```erb
|
||||
```html live
|
||||
<div class="blankslate">
|
||||
<%= octicon "git-commit", :height => 32, :class => "blankslate-icon" %>
|
||||
<%= octicon "tag", :height => 32, :class => "blankslate-icon" %>
|
||||
<%= octicon "git-branch", :height => 32, :class => "blankslate-icon" %>
|
||||
<!-- <%= octicon "git-commit", :height = 32, :class => "blankslate-icon" %> -->
|
||||
<svg width="28" height="32" viewBox="0 0 14 16" class="octicon octicon-git-commit blankslate-icon" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.86 7c-.45-1.72-2-3-3.86-3-1.86 0-3.41 1.28-3.86 3H0v2h3.14c.45 1.72 2 3 3.86 3 1.86 0 3.41-1.28 3.86-3H14V7h-3.14zM7 10.2c-1.22 0-2.2-.98-2.2-2.2 0-1.22.98-2.2 2.2-2.2 1.22 0 2.2.98 2.2 2.2 0 1.22-.98 2.2-2.2 2.2z"
|
||||
/>
|
||||
</svg>
|
||||
<!-- <%= octicon "tag", :height = 32, :class => "blankslate-icon" %> -->
|
||||
<svg width="28" height="32" viewBox="0 0 14 16" class="octicon octicon-tag blankslate-icon" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.73 1.73C7.26 1.26 6.62 1 5.96 1H3.5C2.13 1 1 2.13 1 3.5v2.47c0 .66.27 1.3.73 1.77l6.06 6.06c.39.39 1.02.39 1.41 0l4.59-4.59a.996.996 0 0 0 0-1.41L7.73 1.73zM2.38 7.09c-.31-.3-.47-.7-.47-1.13V3.5c0-.88.72-1.59 1.59-1.59h2.47c.42 0 .83.16 1.13.47l6.14 6.13-4.73 4.73-6.13-6.15zM3.01 3h2v2H3V3h.01z"
|
||||
/>
|
||||
</svg>
|
||||
<!-- <%= octicon "git-branch", :height = 32, :class => "blankslate-icon" %> -->
|
||||
<svg width="20" height="32" viewBox="0 0 10 16" class="octicon octicon-git-branch blankslate-icon" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10 5c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v.3c-.02.52-.23.98-.63 1.38-.4.4-.86.61-1.38.63-.83.02-1.48.16-2 .45V4.72a1.993 1.993 0 0 0-1-3.72C.88 1 0 1.89 0 3a2 2 0 0 0 1 1.72v6.56c-.59.35-1 .99-1 1.72 0 1.11.89 2 2 2 1.11 0 2-.89 2-2 0-.53-.2-1-.53-1.36.09-.06.48-.41.59-.47.25-.11.56-.17.94-.17 1.05-.05 1.95-.45 2.75-1.25S8.95 7.77 9 6.73h-.02C9.59 6.37 10 5.73 10 5zM2 1.8c.66 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2C1.35 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2zm0 12.41c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm6-8c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"
|
||||
/>
|
||||
</svg>
|
||||
<h3>This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### Variations
|
||||
## Variations
|
||||
|
||||
Add an additional optional class to the `.blankslate` to change its appearance.
|
||||
|
||||
##### Narrow
|
||||
### Narrow
|
||||
|
||||
Narrows the blankslate container to not occupy the entire available width.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="blankslate blankslate-narrow">
|
||||
<img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="" class="mb-3">
|
||||
<img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="" class="mb-3" />
|
||||
<h3 class="mb-1">You don’t seem to have any pull requests.</h3>
|
||||
<p>Pull requests help you discuss potential changes before they are merged into the base branch.</p>
|
||||
<button class="btn btn-primary my-3" type="button">New pull request</button>
|
||||
@ -55,13 +72,13 @@ Narrows the blankslate container to not occupy the entire available width.
|
||||
</div>
|
||||
```
|
||||
|
||||
##### Spacious
|
||||
### Spacious
|
||||
|
||||
Significantly increases the vertical padding.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="blankslate blankslate-spacious">
|
||||
<img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="" class="mb-3">
|
||||
<img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="" class="mb-3" />
|
||||
<h3 class="mb-1">You don’t seem to have any pull requests.</h3>
|
||||
<p>Pull requests help you discuss potential changes before they are merged into the base branch.</p>
|
||||
<button class="btn btn-primary my-3" type="button">New pull request</button>
|
||||
@ -69,13 +86,13 @@ Significantly increases the vertical padding.
|
||||
</div>
|
||||
```
|
||||
|
||||
##### Large
|
||||
### Large
|
||||
|
||||
Increases the size of the text in the blankslate
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="blankslate blankslate-large">
|
||||
<img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="" class="mb-3">
|
||||
<img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="" class="mb-3" />
|
||||
<h3 class="mb-1">You don’t seem to have any pull requests.</h3>
|
||||
<p>Pull requests help you discuss potential changes before they are merged into the base branch.</p>
|
||||
<button class="btn btn-primary my-3" type="button">New pull request</button>
|
||||
@ -83,14 +100,14 @@ Increases the size of the text in the blankslate
|
||||
</div>
|
||||
```
|
||||
|
||||
##### Add border
|
||||
### Add border
|
||||
|
||||
To add a border, wrap the blankstate component with the [Box component](/css/components/box).
|
||||
To add a border, wrap the blankstate component with the [Box component](/components/box).
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="blankslate">
|
||||
<img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="" class="mb-3">
|
||||
<img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="" class="mb-3" />
|
||||
<h3 class="mb-1">You don’t seem to have any pull requests.</h3>
|
||||
<p>Pull requests help you discuss potential changes before they are merged into the base branch.</p>
|
||||
<button class="btn btn-primary my-3" type="button">New pull request</button>
|
||||
@ -99,14 +116,14 @@ To add a border, wrap the blankstate component with the [Box component](/css/com
|
||||
</div>
|
||||
```
|
||||
|
||||
##### Capped
|
||||
### Capped
|
||||
|
||||
Removes the `border-radius` on the top corners.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="Box rounded-top-0">
|
||||
<div class="blankslate">
|
||||
<img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="" class="mb-3">
|
||||
<img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="" class="mb-3" />
|
||||
<h3 class="mb-1">You don’t seem to have any pull requests.</h3>
|
||||
<p>Pull requests help you discuss potential changes before they are merged into the base branch.</p>
|
||||
<button class="btn btn-primary my-3" type="button">New pull request</button>
|
||||
@ -8,9 +8,6 @@ symbols: [Box--overlay, Box-header, Box-overlay--narrow, Box-overlay--wide]
|
||||
keywords: [box, overlay]
|
||||
---
|
||||
|
||||
import DetailsDialog from '../../../docs/DetailsDialog'
|
||||
|
||||
## Box overlays
|
||||
Use the `Box--overlay` with the `<details>` and [`<details-dialog>`](https://github.com/github/details-dialog), and add the `details-overlay-dark` utility if you wish to apply a dark transparent background.
|
||||
|
||||
Box overlays come in three widths. The default `Box--overlay` is 440px wide, `Box-overlay--narrow` is 320px wide, and `Box-overlay--wide` is 640px wide.
|
||||
@ -74,4 +71,4 @@ In github.com there is a shared dialog partial. You will only have to pass in th
|
||||
<% end %>
|
||||
```
|
||||
|
||||
[ARIA attributes]: https://www.w3.org/TR/html-aria/#allowed-aria-roles-states-and-properties
|
||||
[aria attributes]: https://www.w3.org/TR/html-aria/#allowed-aria-roles-states-and-properties
|
||||
@ -7,25 +7,23 @@ source: 'https://github.com/primer/css/tree/master/src/box'
|
||||
bundle: box
|
||||
---
|
||||
|
||||
|
||||
The `.Box` component can be used for something as simple as a rounded corner box, or more complex lists and forms. It includes optional modifiers for padding density and color themes.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
## Box
|
||||
|
||||
A `.Box` is a container with a a white background, a light gray border, and rounded corners. By default there are no additional styles such as padding, these can be added as needed with utility classes. Other styles and layouts can be achieved with box elements and modifiers shown in the documentation below.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="Box">
|
||||
This is a box.
|
||||
</div>
|
||||
```
|
||||
|
||||
## Box elements
|
||||
|
||||
Box elements include `Box-header`, `Box-body`, and `Box-footer`. These elements include borders and consistent padding. Optionally, you can include use `Box-title` which applies a bold font-weight the heading.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-header">
|
||||
<h3 class="Box-title">
|
||||
@ -47,7 +45,7 @@ Use `Box-row` to add rows with borders and maintain the same padding. Box rows h
|
||||
|
||||
**Note:** Box rows have some reliance on markup structure in order to target the first and last rows, therefore using an unordered list is recommended. See [box row markup structure](#box-row-markup-structure) for more information.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="Box">
|
||||
<ul>
|
||||
<li class="Box-row">
|
||||
@ -66,13 +64,12 @@ Use `Box-row` to add rows with borders and maintain the same padding. Box rows h
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
Rows can be used with or without `Box-header`, `Box-footer`, or `Box-body`.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-header">
|
||||
Box header
|
||||
Box header
|
||||
</div>
|
||||
<div class="Box-body">
|
||||
<strong>Box body</strong>
|
||||
@ -98,11 +95,12 @@ Rows can be used with or without `Box-header`, `Box-footer`, or `Box-body`.
|
||||
```
|
||||
|
||||
### Box row markup structure
|
||||
|
||||
Box rows have some reliance on markup structure in order to target the first and last rows. Box rows are given a top border that is lighter in color than other box elements so the first row is targeted to apply a darker border color. An inner border-radius is applied to the first and last rows that that row corners don't poke outside the `Box`, this can be particularly noticeable when using a highlight on box rows.
|
||||
|
||||
Using an unordered list is recommended in order to target the first and last rows, however, if you need to use a `<div>` for your rows, you may want to place your rows inside a parent `<div>` so that the first and last rows are styled appropriately.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-header">
|
||||
Box header
|
||||
@ -116,11 +114,12 @@ Using an unordered list is recommended in order to target the first and last row
|
||||
```
|
||||
|
||||
## Box padding density
|
||||
|
||||
You can changed the padding density of the box component.
|
||||
|
||||
Use `Box--condensed` to apply a more condensed line-height and reduce the padding on the Y axis.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="Box Box--condensed">
|
||||
<div class="Box-header">
|
||||
<h3 class="Box-title">
|
||||
@ -148,7 +147,7 @@ Use `Box--spacious` to increase padding and increase the title font size.
|
||||
|
||||
You may want to increase the overall font size to work with the larger padding, in this example the default body font size is increased to 16px using the `f4` typography utility.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="Box Box--spacious f4">
|
||||
<div class="Box-header">
|
||||
<h3 class="Box-title">
|
||||
@ -173,9 +172,10 @@ You may want to increase the overall font size to work with the larger padding,
|
||||
```
|
||||
|
||||
## Blue box theme
|
||||
|
||||
Use `Box--blue` to style the box borders and box header in blue.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="Box Box--blue">
|
||||
<div class="Box-header">
|
||||
Box header
|
||||
@ -198,15 +198,15 @@ Use `Box--blue` to style the box borders and box header in blue.
|
||||
|
||||
Use `Box-header--blue` to add to change the header border and background to blue.
|
||||
|
||||
```html
|
||||
<div class="Box">
|
||||
<div class="Box-header Box-header--blue">
|
||||
<h3 class="Box-title">Box with blue header</h3>
|
||||
</div>
|
||||
<div class="Box-body">
|
||||
Box body
|
||||
</div>
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-header Box-header--blue">
|
||||
<h3 class="Box-title">Box with blue header</h3>
|
||||
</div>
|
||||
<div class="Box-body">
|
||||
Box body
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Box danger theme
|
||||
@ -215,7 +215,7 @@ Use `Box--danger` to apply a red border to the outside of the box. This theme is
|
||||
|
||||
**Note:** `Box-danger` only works with either `Box-row`'s or `Box-body`.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="Box Box--danger">
|
||||
<div class="Box-row">
|
||||
Row one
|
||||
@ -228,23 +228,25 @@ Use `Box--danger` to apply a red border to the outside of the box. This theme is
|
||||
|
||||
`Box-danger` is often paired with a red heading. See the [subhead](./subhead) docs for more information.
|
||||
|
||||
```html
|
||||
<div class="Subhead border-bottom-0">
|
||||
<h2 class="Subhead-heading Subhead-heading--danger">Danger zone</h2>
|
||||
</div>
|
||||
```html live
|
||||
<div>
|
||||
<div class="Subhead border-bottom-0">
|
||||
<h2 class="Subhead-heading Subhead-heading--danger">Danger zone</h2>
|
||||
</div>
|
||||
|
||||
<div class="Box Box--danger">
|
||||
<div class="Box-body">
|
||||
Box body
|
||||
<div class="Box Box--danger">
|
||||
<div class="Box-body">
|
||||
Box body
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Row themes
|
||||
|
||||
You can change the background color for individual rows, or change the color on hover or navigation focus.
|
||||
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-row Box-row--gray">
|
||||
.Box-row--gray
|
||||
@ -266,7 +268,7 @@ You can change the background color for individual rows, or change the color on
|
||||
|
||||
Use `Box-row--focus-gray` or `Box-row--focus-blue` when using along-side `navigation-focus` if you want to highlight rows when using keyboard commands.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-row Box-row--focus-gray navigation-focus">
|
||||
.Box-row--focus-gray and .navigation-focus
|
||||
@ -284,9 +286,10 @@ Use `Box-row--focus-gray` or `Box-row--focus-blue` when using along-side `naviga
|
||||
```
|
||||
|
||||
### Box row unread
|
||||
|
||||
Use `.Box-row-unread` to apply a blue vertical line highlight for indicating a row contains unread items.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-row">
|
||||
Box row
|
||||
@ -301,9 +304,10 @@ Use `.Box-row-unread` to apply a blue vertical line highlight for indicating a r
|
||||
```
|
||||
|
||||
### Box row link
|
||||
|
||||
Use .`Box-row-link` when you want a link to appear dark gray and blue on hover on desktop, and remain a blue link on mobile. This is useful to indicate links on mobile without having hover styles.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-row">
|
||||
<a class="Box-row-link" href="#box-row-link">Box row link</a>
|
||||
@ -312,15 +316,17 @@ Use .`Box-row-link` when you want a link to appear dark gray and blue on hover o
|
||||
```
|
||||
|
||||
## Dashed border
|
||||
|
||||
Use the `border-dashed` utility to apply a dashed border to a box.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="Box border-dashed p-2">
|
||||
A box with a dashed border
|
||||
</div>
|
||||
```
|
||||
|
||||
## Boxes with flash alerts
|
||||
|
||||
Use `flash-full` for flash alert inside a box to remove the rounded corners. Place the flash alert above the `Box-body` and underneath the `Box-header`.
|
||||
|
||||
Flash alerts come in three different colors and can be used with icons and buttons, see the [alert documentation](./alerts) for more information.
|
||||
@ -350,6 +356,7 @@ Flash alerts come in three different colors and can be used with icons and butto
|
||||
```
|
||||
|
||||
## Boxes with icons
|
||||
|
||||
Use `Box-btn-octicon` with `btn-octicon` when you want the icon to maintain the same padding as other box elements. This selector offsets margin to ensure it lines up on the left and right sides of the box so you may need to add padding neighboring elements.
|
||||
|
||||
```erb
|
||||
@ -385,11 +392,12 @@ It's common to want to float icons to the far left or right and stop the `Box-ti
|
||||
```
|
||||
|
||||
## Box headers with counters
|
||||
|
||||
Use a counter with a background that works against the contrast of the box header. The default counter colors do not stand out well against the header background so we suggest using one of the following styles:
|
||||
|
||||
Use `Counter--gray` for a counter with a gray background and dark gray text.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-header">
|
||||
<h3 class="Box-title">
|
||||
@ -405,7 +413,7 @@ Use `Counter--gray` for a counter with a gray background and dark gray text.
|
||||
|
||||
Use `Counter--gray-dark` for a counter with a dark gray background and white text.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-header">
|
||||
<h3 class="Box-title">
|
||||
@ -420,11 +428,12 @@ Use `Counter--gray-dark` for a counter with a dark gray background and white tex
|
||||
```
|
||||
|
||||
## Form elements and buttons in boxes
|
||||
|
||||
To achieve different layouts when adding buttons or form elements to boxes we suggest you use utilities to achieve the layout you want. Here's some common examples:
|
||||
|
||||
Use [flexbox utilities](/css/utilities/flexbox) to center align items, and avoid using floats by using `flex-auto` to have the text fill the remaining space so that the button rests on the far right.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="Box Box--condensed">
|
||||
<div class="Box-header d-flex flex-items-center">
|
||||
<h3 class="Box-title overflow-hidden flex-auto">
|
||||
@ -442,7 +451,7 @@ Use [flexbox utilities](/css/utilities/flexbox) to center align items, and avoid
|
||||
|
||||
A similar approach can be used for buttons with multiple lines of text within a row.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-row d-flex flex-items-center">
|
||||
<div class="flex-auto">
|
||||
@ -473,14 +482,15 @@ A similar approach can be used for buttons with multiple lines of text within a
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Using flexbox along with form, button, and link styles, you can create more complex box headers for things like bulk actions and sorting.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-header d-flex flex-items-center">
|
||||
<form class="flex-auto">
|
||||
<label>
|
||||
<input class="mr-1" type="checkbox">
|
||||
<input class="mr-1" type="checkbox" />
|
||||
Check it
|
||||
</label>
|
||||
</form>
|
||||
@ -496,7 +506,7 @@ Using flexbox along with form, button, and link styles, you can create more comp
|
||||
|
||||
You can put forms in boxes. Often form submission buttons are aligned to the bottom right of the form which you can do with `text-right` instead of using floats.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-header">
|
||||
<h3 class="Box-title">
|
||||
@ -507,30 +517,30 @@ You can put forms in boxes. Often form submission buttons are aligned to the bot
|
||||
<div class="Box-body">
|
||||
<dl class="form-group">
|
||||
<dt><label>Example label</label></dt>
|
||||
<dd><input class="form-control" type="text"></dd>
|
||||
<dd><input class="form-control" type="text" /></dd>
|
||||
</dl>
|
||||
<div class="form-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" checked="checked">
|
||||
<input type="checkbox" checked="checked" />
|
||||
Yes please
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Box-footer text-right">
|
||||
<button class="btn btn-secondary mr-1">
|
||||
Cancel
|
||||
</button>
|
||||
<button class="btn btn-primary">
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="Box-footer text-right">
|
||||
<button class="btn btn-secondary mr-1">
|
||||
Cancel
|
||||
</button>
|
||||
<button class="btn btn-primary">
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
When a box is all by itself centered on a page you can use [column widths](/css/objects/grid) to control the width of the box. If needed, break the mold a little and use [typography utilities](/css/utilities/typography) instead of the built in box title styles.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="Box Box--spacious col-6 mx-auto text-center">
|
||||
<form>
|
||||
<div class="Box-body">
|
||||
@ -539,7 +549,7 @@ When a box is all by itself centered on a page you can use [column widths](/css/
|
||||
</h3>
|
||||
<dl class="form-group mb-4">
|
||||
<dt><label>Example label</label></dt>
|
||||
<dd><input class="form-control" type="text"></dd>
|
||||
<dd><input class="form-control" type="text" /></dd>
|
||||
</dl>
|
||||
<button class="btn btn-primary btn-block">
|
||||
Submit
|
||||
@ -550,4 +560,3 @@ When a box is all by itself centered on a page you can use [column widths](/css/
|
||||
```
|
||||
|
||||
Box patterns can also be made with, and modified with [border utilities](/css/utilities/borders).
|
||||
|
||||
49
docs/content/components/boxed-groups.md
Normal file
49
docs/content/components/boxed-groups.md
Normal file
@ -0,0 +1,49 @@
|
||||
---
|
||||
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,
|
||||
]
|
||||
---
|
||||
|
||||
The `boxed-group` styles have been deprecated. Please use the [Box component](/components/box) instead.
|
||||
@ -6,23 +6,22 @@ source: 'https://github.com/primer/css/tree/master/src/branch-name'
|
||||
bundle: branch-name
|
||||
---
|
||||
|
||||
|
||||
Branch names can be a link name or not:
|
||||
|
||||
```html title="Branch name"
|
||||
```html live
|
||||
<span class="branch-name">a_new_feature_branch</span>
|
||||
```
|
||||
|
||||
```html title="Branch name with link"
|
||||
```html live
|
||||
<a href="#url" class="branch-name">a_new_feature_branch</a>
|
||||
```
|
||||
|
||||
You may also include an octicon before the branch name text:
|
||||
|
||||
```erb title="Branch name with icon"
|
||||
```jsx live
|
||||
<span class="branch-name">
|
||||
<%= octicon("git-branch", width:16, height:16) %>
|
||||
{/* <%= octicon("git-branch", width:16, height:16) %> */}
|
||||
<StyledOcticon icon={getIconByName('git-branch')} mr={1} />
|
||||
a_new_feature_branch
|
||||
</span>
|
||||
```
|
||||
|
||||
@ -6,7 +6,6 @@ source: 'https://github.com/primer/css/tree/master/src/breadcrumb'
|
||||
bundle: breadcrumb
|
||||
---
|
||||
|
||||
|
||||
Breadcrumbs are used to show taxonomical context on pages that are many levels deep in a site’s hierarchy. Breadcrumbs show and link to parent, grandparent, and sometimes great-grandparent pages. Breadcrumbs are most appropriate on pages that:
|
||||
|
||||
- Are many levels deep on a site
|
||||
@ -15,7 +14,7 @@ Breadcrumbs are used to show taxonomical context on pages that are many levels d
|
||||
|
||||
#### Usage
|
||||
|
||||
```html title="Breadcrumb"
|
||||
```html live
|
||||
<nav aria-label="Breadcrumb">
|
||||
<ol>
|
||||
<li class="breadcrumb-item text-small"><a href="https://github.com/business">Business</a></li>
|
||||
@ -24,4 +23,3 @@ Breadcrumbs are used to show taxonomical context on pages that are many levels d
|
||||
</ol>
|
||||
</nav>
|
||||
```
|
||||
|
||||
@ -6,34 +6,29 @@ source: 'https://github.com/primer/css/tree/master/src/buttons'
|
||||
bundle: buttons
|
||||
---
|
||||
|
||||
|
||||
Buttons are used for **actions**, like in forms, while textual hyperlinks are used for **destinations**, or moving from one page to another.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
## Default button
|
||||
|
||||
Use the standard—yet classy—`.btn` for form actions and primary page actions. These are used extensively around the site.
|
||||
|
||||
When using a `<button>` element, **always specify a `type`**. When using a `<a>` element, **always add `role="button"` for accessibility**.
|
||||
|
||||
```html
|
||||
<button class="btn" type="button">Button button</button>
|
||||
<a class="btn" href="#url" role="button">Link button</a>
|
||||
```html live
|
||||
<button class="btn" type="button">Button button</button> <a class="btn" href="#url" role="button">Link button</a>
|
||||
```
|
||||
|
||||
You can find them in two sizes: the default `.btn` and the smaller `.btn-sm`.
|
||||
|
||||
```html
|
||||
<button class="btn" type="button">Button</button>
|
||||
<button class="btn btn-sm" type="button">Small button</button>
|
||||
```html live
|
||||
<button class="btn" type="button">Button</button> <button class="btn btn-sm" type="button">Small button</button>
|
||||
```
|
||||
|
||||
## Primary button
|
||||
|
||||
Primary buttons are green and are used to indicate the *primary* action on a page. When you need your buttons to stand out, use `.btn.btn-primary`. You can use it with both button sizes—just add `.btn-primary`.
|
||||
Primary buttons are green and are used to indicate the _primary_ action on a page. When you need your buttons to stand out, use `.btn.btn-primary`. You can use it with both button sizes—just add `.btn-primary`.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<button class="btn btn-primary" type="button">Primary button</button>
|
||||
<button class="btn btn-sm btn-primary" type="button">Small primary button</button>
|
||||
```
|
||||
@ -42,7 +37,7 @@ Primary buttons are green and are used to indicate the *primary* action on a pag
|
||||
|
||||
Danger buttons are red. They help reiterate that the intended action is important or potentially dangerous (e.g., deleting a repo or transferring ownership). Similar to the primary buttons, just add `.btn-danger`.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<button class="btn btn-danger" type="button">Danger button</button>
|
||||
<button class="btn btn-sm btn-danger" type="button">Small danger button</button>
|
||||
```
|
||||
@ -51,27 +46,27 @@ Danger buttons are red. They help reiterate that the intended action is importan
|
||||
|
||||
Outline buttons downplay an action as they appear like boxy links. Just add `.btn-outline` and go.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<button class="btn btn-outline" type="button">Outline button</button>
|
||||
<button class="btn btn-sm btn-outline" type="button">Outline button</button>
|
||||
```
|
||||
|
||||
## Large button
|
||||
|
||||
Use `.btn-large` to increase the padding and border radius of a button. This is useful for prominent calls to action in hero sections.
|
||||
|
||||
[Type scale utilities](https://styleguide.github.com/primer/utilities/typography/#type-scale-utilities) can be used to alter the font-size if needed. Padding is applied in em's so that it scales proportionally with the font-size.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<p>
|
||||
<a class="btn btn-large btn-purple" href="#url" role="button">Large link button</a>
|
||||
<button class="btn btn-large" type="button">Large button button</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
Use `.btn-large` with a type scale utility to transform the text to a bigger size.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<p class="f3">
|
||||
<a class="btn btn-large btn-purple" href="#url" role="button">Large link button</a>
|
||||
<button class="btn btn-large btn-outline-blue" type="button">Large button button</button>
|
||||
@ -82,24 +77,24 @@ Use `.btn-large` with a type scale utility to transform the text to a bigger siz
|
||||
|
||||
Disable `<button>` elements with the boolean `disabled` attribute and `<a>` elements with the `.disabled` class.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<button class="btn" type="button" disabled>Disabled button</button>
|
||||
<a class="btn disabled" href="#url" role="button">Disabled button</a>
|
||||
```
|
||||
|
||||
Similar styles are applied to primary, danger, and outline buttons:
|
||||
|
||||
```html
|
||||
```html live
|
||||
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
|
||||
<a class="btn btn-primary disabled" href="#url" role="button">Disabled button</a>
|
||||
```
|
||||
|
||||
```html
|
||||
```html live
|
||||
<button class="btn btn-danger" type="button" disabled>Disabled button</button>
|
||||
<a class="btn btn-danger disabled" href="#url" role="button">Disabled button</a>
|
||||
```
|
||||
|
||||
```html
|
||||
```html live
|
||||
<button class="btn btn-outline" type="button" disabled>Disabled button</button>
|
||||
<a class="btn btn-outline disabled" href="#url" role="button">Disabled button</a>
|
||||
```
|
||||
@ -108,7 +103,7 @@ Similar styles are applied to primary, danger, and outline buttons:
|
||||
|
||||
Make any button full-width by adding `.btn-block`. It adds `width: 100%;`, changes the `display` from `inline-block` to `block`, and centers the button text.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<p><button class="btn btn-block" type="button">Block button</button></p>
|
||||
<p><button class="btn btn-sm btn-block" type="button">Small block button</button></p>
|
||||
```
|
||||
@ -119,7 +114,7 @@ Create a button that looks like a link with `.btn-link`. Rather than using an `<
|
||||
|
||||
**The `.btn-link` class is not designed to be used with `.btn`; the overlapping styles are not compatible.**
|
||||
|
||||
```html
|
||||
```html live
|
||||
<p><button class="btn-link" type="button">Link button</button></p>
|
||||
```
|
||||
|
||||
@ -141,7 +136,7 @@ You can easily append a count to a **small button**. Add the `.with-count` class
|
||||
|
||||
You can also use the [counter](./labels#counters) component within buttons:
|
||||
|
||||
```html
|
||||
```html live
|
||||
<button class="btn" type="button">
|
||||
Button
|
||||
<span class="Counter">12</span>
|
||||
@ -167,7 +162,7 @@ You can also use the [counter](./labels#counters) component within buttons:
|
||||
|
||||
Have a hankering for a series of buttons that are attached to one another? Wrap them in a `.BtnGroup` and the buttons will be rounded and spaced automatically.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="BtnGroup mr-2">
|
||||
<button class="btn BtnGroup-item" type="button">Button</button>
|
||||
<button class="btn BtnGroup-item" type="button">Button</button>
|
||||
@ -189,7 +184,7 @@ Have a hankering for a series of buttons that are attached to one another? Wrap
|
||||
|
||||
Add `.BtnGroup-parent` to parent elements, like `<form>`s or `<details>`s, within `.BtnGroup`s for proper spacing and rounded corners.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="BtnGroup">
|
||||
<button class="btn BtnGroup-item" type="button">Button</button>
|
||||
<form class="BtnGroup-parent">
|
||||
@ -204,7 +199,7 @@ Add `.BtnGroup-parent` to parent elements, like `<form>`s or `<details>`s, withi
|
||||
|
||||
Use `.hidden-text-expander` to indicate and toggle hidden text.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<span class="hidden-text-expander">
|
||||
<button type="button" class="ellipsis-expander" aria-expanded="false">…</button>
|
||||
</span>
|
||||
@ -212,7 +207,6 @@ Use `.hidden-text-expander` to indicate and toggle hidden text.
|
||||
|
||||
You can also make the expander appear inline by adding `.inline`.
|
||||
|
||||
|
||||
## Using button styles with the details summary element
|
||||
|
||||
You can add `.btn` and `.btn-*` classes to any
|
||||
@ -222,7 +216,7 @@ selected/active styles when the parent
|
||||
[`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
|
||||
element is open.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<details>
|
||||
<summary class="btn btn-block btn-primary">Toggle the content</summary>
|
||||
<p class="mt-2">
|
||||
@ -230,4 +224,3 @@ element is open.
|
||||
</p>
|
||||
</details>
|
||||
```
|
||||
|
||||
@ -3,20 +3,40 @@ 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]
|
||||
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,
|
||||
]
|
||||
---
|
||||
|
||||
Dropdowns are lightweight, JavaScript-powered context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
## Basic examples
|
||||
|
||||
Dropdowns should be trigged by a `<button>`. **[Each dropdown menu requires a directional class](#alignment)**, much like our tooltips.
|
||||
|
||||
Using a GitHub button:
|
||||
|
||||
```html
|
||||
```html live
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Dropdown
|
||||
@ -33,8 +53,7 @@ Using a GitHub button:
|
||||
|
||||
Using a button customized with additional utilities:
|
||||
|
||||
|
||||
```html
|
||||
```html live
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="text-gray p-2 d-inline" aria-haspopup="true">
|
||||
Dropdown
|
||||
@ -55,7 +74,7 @@ Using a button customized with additional utilities:
|
||||
|
||||
Align the direction of dropdown menus and their arrows with modifier classes.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
.dropdown-ne
|
||||
@ -70,7 +89,7 @@ Align the direction of dropdown menus and their arrows with modifier classes.
|
||||
</details>
|
||||
```
|
||||
|
||||
```html
|
||||
```html live
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
.dropdown-e
|
||||
@ -85,7 +104,7 @@ Align the direction of dropdown menus and their arrows with modifier classes.
|
||||
</details>
|
||||
```
|
||||
|
||||
```html
|
||||
```html live
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
.dropdown-se
|
||||
@ -100,7 +119,7 @@ Align the direction of dropdown menus and their arrows with modifier classes.
|
||||
</details>
|
||||
```
|
||||
|
||||
```html
|
||||
```html live
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
.dropdown-s
|
||||
@ -115,7 +134,7 @@ Align the direction of dropdown menus and their arrows with modifier classes.
|
||||
</details>
|
||||
```
|
||||
|
||||
```html
|
||||
```html live
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
.dropdown-sw
|
||||
@ -130,7 +149,7 @@ Align the direction of dropdown menus and their arrows with modifier classes.
|
||||
</details>
|
||||
```
|
||||
|
||||
```html
|
||||
```html live
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
.dropdown-w
|
||||
@ -147,7 +166,7 @@ Align the direction of dropdown menus and their arrows with modifier classes.
|
||||
|
||||
### Dividers
|
||||
|
||||
```html
|
||||
```html live
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Dropdown
|
||||
@ -167,7 +186,7 @@ Align the direction of dropdown menus and their arrows with modifier classes.
|
||||
|
||||
### Headers
|
||||
|
||||
```html
|
||||
```html live
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Dropdown
|
||||
@ -1,10 +1,19 @@
|
||||
---
|
||||
title: Flash banner
|
||||
path: components/flash-banner
|
||||
status: In review
|
||||
status: 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'
|
||||
symbols: [flash-banner, is-signed-in, is-signed-out, org-privileges-tour-dismiss, signed-in-tab-flash, signed-out-tab-flash, stale-session-flash]
|
||||
symbols:
|
||||
[
|
||||
flash-banner,
|
||||
is-signed-in,
|
||||
is-signed-out,
|
||||
org-privileges-tour-dismiss,
|
||||
signed-in-tab-flash,
|
||||
signed-out-tab-flash,
|
||||
stale-session-flash,
|
||||
]
|
||||
---
|
||||
|
||||
**Needs documentation.**
|
||||
@ -6,12 +6,10 @@ source: 'https://github.com/primer/css/tree/master/src/forms'
|
||||
bundle: forms
|
||||
---
|
||||
|
||||
|
||||
Style individual form controls and utilize common layouts.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
Overview:
|
||||
|
||||
- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.
|
||||
- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.
|
||||
- Always declare a `type` on your `<button>`s.
|
||||
@ -21,14 +19,14 @@ Overview:
|
||||
|
||||
All our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<p>
|
||||
<button class="btn" type="button">Button</button>
|
||||
<button class="btn select-menu-button" type="button" aria-expanded="false" aria-haspopup="true">
|
||||
Select menu
|
||||
</button>
|
||||
<input class="form-control" type="text" placeholder="Standard input" aria-label="Repository description">
|
||||
<input class="form-control input-monospace" type="text" placeholder="Monospace input" aria-label="SHA">
|
||||
<input class="form-control" type="text" placeholder="Standard input" aria-label="Repository description" />
|
||||
<input class="form-control input-monospace" type="text" placeholder="Monospace input" aria-label="SHA" />
|
||||
<select class="form-select" aria-label="Important decision">
|
||||
<option>Select</option>
|
||||
<option value="option 2">Option 2</option>
|
||||
@ -40,7 +38,7 @@ All our inputs and buttons side-by-side for easy testing of sizing and alignment
|
||||
<button class="btn btn-sm select-menu-button" type="button" aria-expanded="false" aria-haspopup="true">
|
||||
Select menu
|
||||
</button>
|
||||
<input class="form-control input-sm" type="text" placeholder="Small input" aria-label="Repository description">
|
||||
<input class="form-control input-sm" type="text" placeholder="Small input" aria-label="Repository description" />
|
||||
<select class="form-select select-sm" aria-label="Important decision">
|
||||
<option>Select</option>
|
||||
<option value="option 1">Option 1</option>
|
||||
@ -52,24 +50,18 @@ All our inputs and buttons side-by-side for easy testing of sizing and alignment
|
||||
|
||||
Form controls in Primer CSS currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<form>
|
||||
<label for="name">Name</label>
|
||||
<input class="form-control" type="text" id="name">
|
||||
<input class="form-control" type="text" id="name" />
|
||||
|
||||
<label for="email">Email address</label>
|
||||
<input class="form-control" type="email" id="email">
|
||||
<input class="form-control" type="email" id="email" />
|
||||
|
||||
<label>
|
||||
<input type="checkbox"> Remember me
|
||||
</label>
|
||||
<label> <input type="checkbox" /> Remember me </label>
|
||||
|
||||
<label>
|
||||
<input type="radio" id="herp" name="herpderp" checked> Herp
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" id="derp" name="herpderp"> Derp
|
||||
</label>
|
||||
<label> <input type="radio" id="herp" name="herpderp" checked /> Herp </label>
|
||||
<label> <input type="radio" id="derp" name="herpderp" /> Derp </label>
|
||||
|
||||
<button class="btn" type="submit">Submit</button>
|
||||
</form>
|
||||
@ -79,10 +71,15 @@ Form controls in Primer CSS currently have no basic layout specified (this is by
|
||||
|
||||
Textual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Default input" aria-label="Default input">
|
||||
<input class="form-control input-contrast" type="text" placeholder="Input with contrast" aria-label="Input with contrast">
|
||||
<input class="form-control" type="text" placeholder="Default input" aria-label="Default input" />
|
||||
<input
|
||||
class="form-control input-contrast"
|
||||
type="text"
|
||||
placeholder="Input with contrast"
|
||||
aria-label="Input with contrast"
|
||||
/>
|
||||
</form>
|
||||
```
|
||||
|
||||
@ -92,34 +89,40 @@ Make inputs smaller, larger, or full-width with an additional class.
|
||||
|
||||
##### Small
|
||||
|
||||
```html
|
||||
```html live
|
||||
<form>
|
||||
<input class="form-control input-sm" type="text" placeholder="Small input" aria-label="Small input">
|
||||
<input class="form-control input-sm" type="text" placeholder="Small input" aria-label="Small input" />
|
||||
</form>
|
||||
```
|
||||
|
||||
##### Large
|
||||
|
||||
```html
|
||||
```html live
|
||||
<form>
|
||||
<input class="form-control input-lg" type="text" placeholder="Large input" aria-label="Large input">
|
||||
<input class="form-control input-lg" type="text" placeholder="Large input" aria-label="Large input" />
|
||||
</form>
|
||||
```
|
||||
|
||||
##### Block
|
||||
|
||||
```html
|
||||
```html live
|
||||
<form>
|
||||
<input class="form-control input-block" type="text" placeholder="Full-width input" aria-label="Full-width input">
|
||||
<input class="form-control input-block" type="text" placeholder="Full-width input" aria-label="Full-width input" />
|
||||
</form>
|
||||
```
|
||||
|
||||
##### Hide webkit's contact info autofill icon
|
||||
|
||||
Webkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<form>
|
||||
<input class="form-control input-hide-webkit-autofill" placeholder="Hide Webkit's contact autofill on this input" type="text" aria-label="Hide Webkit's contact autofill on this input">
|
||||
<input
|
||||
class="form-control input-hide-webkit-autofill"
|
||||
placeholder="Hide Webkit's contact autofill on this input"
|
||||
type="text"
|
||||
aria-label="Hide Webkit's contact autofill on this input"
|
||||
/>
|
||||
</form>
|
||||
```
|
||||
|
||||
@ -127,7 +130,7 @@ Webkit sometimes gets confused and tries to add an icon/dropdown to autofill con
|
||||
|
||||
Primer CSS adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<form>
|
||||
<select class="form-select" aria-label="Preference">
|
||||
<option>Choose an option</option>
|
||||
@ -145,7 +148,7 @@ Primer CSS adds light `height` and `vertical-align` styles to `<select>`s for al
|
||||
|
||||
Use the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).
|
||||
|
||||
```html
|
||||
```html live
|
||||
<select class="form-select select-sm" aria-label="Preference">
|
||||
<option>Choose an option</option>
|
||||
<option>Git</option>
|
||||
@ -169,11 +172,11 @@ Use the `.select-sm` class to resize both default and custom `<select>`s to matc
|
||||
|
||||
#### Form groups
|
||||
|
||||
```html
|
||||
```html live
|
||||
<form>
|
||||
<dl class="form-group">
|
||||
<dt><label for="example-text">Example Text</label></dt>
|
||||
<dd><input class="form-control" type="text" value="Example Value" id="example-text"></dd>
|
||||
<dd><input class="form-control" type="text" value="Example Value" id="example-text" /></dd>
|
||||
</dl>
|
||||
|
||||
<dl class="form-group">
|
||||
@ -204,17 +207,33 @@ Use the `.select-sm` class to resize both default and custom `<select>`s to matc
|
||||
|
||||
Convey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class="form-group">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<form class="pb-2">
|
||||
<dl class="form-group errored">
|
||||
<dt><label for="example-text-errored">Example Text</label></dt>
|
||||
<dd><input class="form-control" type="text" value="Example Value" id="example-text-errored" aria-describedby="form-error-text"></dd>
|
||||
<dd>
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
value="Example Value"
|
||||
id="example-text-errored"
|
||||
aria-describedby="form-error-text"
|
||||
/>
|
||||
</dd>
|
||||
<dd class="error" id="form-error-text">This example input has an error.</dd>
|
||||
</dl>
|
||||
<br>
|
||||
<br />
|
||||
<dl class="form-group warn">
|
||||
<dt><label for="example-text-warn">Example Text</label></dt>
|
||||
<dd><input class="form-control" type="text" value="Example Value" id="example-text-warn" aria-describedby="form-warning-text"></dd>
|
||||
<dd>
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
value="Example Value"
|
||||
id="example-text-warn"
|
||||
aria-describedby="form-warning-text"
|
||||
/>
|
||||
</dd>
|
||||
<dd class="warning" id="form-warning-text">This example input has a warning.</dd>
|
||||
</dl>
|
||||
</form>
|
||||
@ -224,11 +243,11 @@ Convey errors and warnings for form groups. Add the appropriate class—either `
|
||||
|
||||
Utilities to spice up the alignment and styling of checkbox and radio controls.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<form>
|
||||
<div class="form-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" checked="checked" aria-describedby="help-text-for-checkbox">
|
||||
<input type="checkbox" checked="checked" aria-describedby="help-text-for-checkbox" />
|
||||
Available for hire
|
||||
</label>
|
||||
<p class="note" id="help-text-for-checkbox">
|
||||
@ -240,11 +259,11 @@ Utilities to spice up the alignment and styling of checkbox and radio controls.
|
||||
|
||||
You may also add emphasis to the label:
|
||||
|
||||
```html
|
||||
```html live
|
||||
<form>
|
||||
<div class="form-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" checked="checked">
|
||||
<input type="checkbox" checked="checked" />
|
||||
<em class="highlight">Available for hire</em>
|
||||
</label>
|
||||
</div>
|
||||
@ -255,21 +274,21 @@ You may also add emphasis to the label:
|
||||
|
||||
Content that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live="polite"` attribute on the parent label for added content to be announced when displayed.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<form>
|
||||
<div class="form-checkbox">
|
||||
<label>
|
||||
<input type="radio" name="hireme">
|
||||
<input type="radio" name="hireme" />
|
||||
Not available for hire
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-checkbox">
|
||||
<label aria-live="polite">
|
||||
<input type="radio" class="form-checkbox-details-trigger" name="hireme">
|
||||
<input type="radio" class="form-checkbox-details-trigger" name="hireme" />
|
||||
Available for hire
|
||||
<span class="form-checkbox-details text-normal">
|
||||
<span class="d-block mb-1">Available hours per week</span>
|
||||
<input type="text" name="" class="form-control input-contrast" size="3">
|
||||
<input type="text" name="" class="form-control input-contrast" size="3" />
|
||||
<span class="text-small text-gray pl-2">hours per week</span>
|
||||
</span>
|
||||
</label>
|
||||
@ -298,7 +317,7 @@ Attached an input and button to one another.
|
||||
|
||||
Align buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Save changes</button>
|
||||
<button type="button" class="btn">Cancel</button>
|
||||
@ -7,12 +7,8 @@ source: 'https://github.com/primer/css/tree/master/src/labels'
|
||||
bundle: labels
|
||||
---
|
||||
|
||||
|
||||
Labels add metatdata or indicate status of items and navigational elements. Three different types of labels are available: [Labels](#default-label-styles) for adding metadata, [States](#states) for indicating status, and [Counters](#counters) for showing the count for a number of items.
|
||||
|
||||
|
||||
## Table of Contents
|
||||
|
||||
## Labels
|
||||
|
||||
The base label component styles the text, adds padding and rounded corners, and an inset box shadow. Labels come in various themes which apply colors and different border styles.
|
||||
@ -21,13 +17,13 @@ GitHub also programmatically generates and applies a background color for labels
|
||||
|
||||
The base `Label` style does not apply a background color, here's an example using the `bg-blue` utility to apply a blue background:
|
||||
|
||||
```html title="Label"
|
||||
```html live title="Label"
|
||||
<span title="Label: default label" class="Label bg-blue">default label</span>
|
||||
```
|
||||
|
||||
**Note:** Be sure to include a title attribute on labels, it's helpful for people using screen-readers to differentiate a label from other text. I.e. without the title attribute, the following example would read as _"New select component design"_, rather than identifying `design` as a label.
|
||||
|
||||
```html title="Label without title"
|
||||
```html live title="Label without title"
|
||||
<!-- Don't do this -->
|
||||
<a href="#url">New select component</a><span class="Label bg-blue ml-1">design</span>
|
||||
```
|
||||
@ -38,44 +34,44 @@ Labels come in a few different themes. Use a theme that helps communicate the co
|
||||
|
||||
Use `Label--gray` to create a label with a light gray background and gray text. This label is neutral in color and can be used in contexts where all you need to communicate is metadata, or whe you want a label to feel less prominent compared with labels with stronger colors.
|
||||
|
||||
```html title="Label theme gray"
|
||||
```html live title="Label theme gray"
|
||||
<span title="Label: gray label" class="Label Label--gray">gray label</span>
|
||||
```
|
||||
|
||||
Use `Label--gray-darker` to create a label with a dark-gray background color. This label is also neutral in color, however, since it's background is darker it can stand out more compared to `Label--gray`.
|
||||
|
||||
```html title="Label theme dark gray"
|
||||
```html live title="Label theme dark gray"
|
||||
<span title="Label: dark gray label" class="Label Label--gray-darker">dark gray label</span>
|
||||
```
|
||||
|
||||
Use `Label--orange` to communicate "warning". The orange background color is very close to red, so avoid using next to labels with a red background color since most people will find it hard to tell the difference.
|
||||
|
||||
```html title="Label theme orange"
|
||||
```html live title="Label theme orange"
|
||||
<span title="Label: orange label" class="Label Label--orange">orange label</span>
|
||||
```
|
||||
|
||||
Use `Label--outline` to create a label with gray text, a gray border, and a transparent background. The outline reduces the contrast of this label in combination with filled labels. Use this in contexts where you need it to stand out less than other labels and communicate a neutral message.
|
||||
|
||||
```html title="Label outline"
|
||||
```html live title="Label outline"
|
||||
<span title="Label: outline label" class="Label Label--outline">outlined label</span>
|
||||
```
|
||||
|
||||
Use `Label--outline-green` in combination with `Label--outline` to communicate a positive message.
|
||||
|
||||
```html title="Label outline green"
|
||||
```html live title="Label outline green"
|
||||
<span title="Label: green outline label" class="Label Label--outline Label--outline-green">green outlined label</span>
|
||||
```
|
||||
|
||||
|
||||
## States
|
||||
|
||||
Use state labels to inform users of an items status. States are large labels with bolded text. The default state has a gray background.
|
||||
|
||||
```html title="State"
|
||||
```html live title="State"
|
||||
<span class="State">Default</span>
|
||||
```
|
||||
|
||||
### State themes
|
||||
|
||||
States come in a few variations that apply different colors. Use the state that best communicates the status or function.
|
||||
|
||||
```erb title="State themes"
|
||||
@ -87,6 +83,7 @@ States come in a few variations that apply different colors. Use the state that
|
||||
**Note:** Similar to [labels](#labels), you should include the title attribute on states to differentiate them from other content.
|
||||
|
||||
### Small states
|
||||
|
||||
Use `State--small` for a state label with reduced padding a smaller font size. This is useful in denser areas of content.
|
||||
|
||||
```erb title="Small states"
|
||||
@ -98,7 +95,7 @@ Use `State--small` for a state label with reduced padding a smaller font size. T
|
||||
|
||||
Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations: the default `Counter` with a light gray background, `Counter--gray` with a dark-gray background and inverse white text, and `Counter--gray-light` with a light-gray background and dark gray text. When a counter is empty, it's visibility will be hidden.
|
||||
|
||||
```html title="Counter"
|
||||
```html live title="Counter"
|
||||
<span class="Counter">16</span>
|
||||
<span class="Counter Counter--gray">32</span>
|
||||
<span class="Counter Counter--gray-light">64</span>
|
||||
@ -106,7 +103,7 @@ Use the `Counter` component to add a count to navigational elements and buttons.
|
||||
|
||||
Use the `Counter` in navigation to indicate the number of items without the user having to click through or count the items, such as open issues in a GitHub repo. See more options in [navigation](./navigation).
|
||||
|
||||
```html title="Counter in tabs"
|
||||
```html live title="Counter in tabs"
|
||||
<div class="tabnav">
|
||||
<nav class="tabnav-tabs" aria-label="Foo bar">
|
||||
<a href="#url" class="tabnav-tab selected" aria-current="page">Foo tab <span class="Counter">23</a>
|
||||
@ -117,7 +114,7 @@ Use the `Counter` in navigation to indicate the number of items without the user
|
||||
|
||||
Counters can also be used in `Box` headers to indicate the number of items in a list. See more on the [box component](./box).
|
||||
|
||||
```html title="Counter in Box headers"
|
||||
```html live title="Counter in Box headers"
|
||||
<div class="Box">
|
||||
<div class="Box-header">
|
||||
<h3 class="Box-title">
|
||||
@ -1,12 +1,11 @@
|
||||
---
|
||||
title: Marketing Buttons
|
||||
path: components/marketing-buttons
|
||||
status: New Release
|
||||
status: New
|
||||
source: 'https://github.com/primer/css/tree/master/src/marketing/buttons'
|
||||
bundle: marketing-buttons
|
||||
---
|
||||
|
||||
|
||||
Marketing buttons come in different colors and sizes, and are also available in a blue outlined version.
|
||||
|
||||
## Colors and outlined
|
||||
@ -15,7 +14,7 @@ Marketing buttons can be solid blue, outlined blue, solid green, or transparent.
|
||||
|
||||
The solid blue and solid green buttons have more visual emphasis than the blue outlined button, therefore they should be used sparingly and only for call to actions that need emphasis.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<button class="btn-mktg mr-2" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-outline-mktg mr-2" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-primary-mktg mr-2" type="button">Sign up</button>
|
||||
@ -28,7 +27,7 @@ The solid blue and solid green buttons have more visual emphasis than the blue o
|
||||
|
||||
Available in two sizes, marketing buttons have a default size and a large size.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<button class="btn-mktg mr-2" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-outline-mktg mr-2" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-primary-mktg mr-2" type="button">Sign up</button>
|
||||
@ -36,4 +35,3 @@ Available in two sizes, marketing buttons have a default size and a large size.
|
||||
<button class="btn-mktg btn-outline-mktg btn-large-mktg mr-2" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-primary-mktg btn-large-mktg mr-2" type="button">Sign up</button>
|
||||
```
|
||||
|
||||
@ -6,16 +6,13 @@ source: 'https://github.com/primer/css/tree/master/src/navigation'
|
||||
bundle: navigation
|
||||
---
|
||||
|
||||
|
||||
Primer CSS comes with several navigation components. Some were designed with singular purposes, while others were design to be more flexible and appear quite frequently.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
## Menu
|
||||
|
||||
The menu is a vertical list of navigational links. **A menu's width and placement must be set by you.** If you like, just use our grid columns as a parent. Otherwise, apply a custom `width`.
|
||||
|
||||
```html title="Menu"
|
||||
```html live title="Menu"
|
||||
<nav class="menu" aria-label="Person settings">
|
||||
<a class="menu-item selected" href="#url" aria-current="page">Account</a>
|
||||
<a class="menu-item" href="#url">Profile</a>
|
||||
@ -26,22 +23,53 @@ The menu is a vertical list of navigational links. **A menu's width and placemen
|
||||
|
||||
There are a few subcomponents and add-ons that work well with the menu, including avatars, counters, and Octicons.
|
||||
|
||||
```erb title="Menu with octicons, avatars and counters"
|
||||
```html live
|
||||
<nav class="menu" aria-label="Person settings">
|
||||
<a class="menu-item selected" href="#url" aria-current="page">
|
||||
<%= octicon "tools" %>
|
||||
<!-- <%= octicon "tools" %> -->
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-tools" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z"
|
||||
/>
|
||||
</svg>
|
||||
Account
|
||||
</a>
|
||||
<a class="menu-item" href="#url">
|
||||
<%= octicon "person" %>
|
||||
<!-- <%= octicon "person" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-person" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12 14.002a.998.998 0 0 1-.998.998H1.001A1 1 0 0 1 0 13.999V13c0-2.633 4-4 4-4s.229-.409 0-1c-.841-.62-.944-1.59-1-4 .173-2.413 1.867-3 3-3s2.827.586 3 3c-.056 2.41-.159 3.38-1 4-.229.59 0 1 0 1s4 1.367 4 4v1.002z"
|
||||
/>
|
||||
</svg>
|
||||
Profile
|
||||
</a>
|
||||
<a class="menu-item" href="#url">
|
||||
<%= octicon "mail" %>
|
||||
<!-- <%= octicon "mail" %>-->
|
||||
<svg version="1.1" width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-mail" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M0 4v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1zm13 0L7 9 1 4h12zM1 5.5l4 3-4 3v-6zM2 12l3.5-3L7 10.5 8.5 9l3.5 3H2zm11-.5l-4-3 4-3v6z"
|
||||
/>
|
||||
</svg>
|
||||
Emails
|
||||
</a>
|
||||
<a class="menu-item" href="#url">
|
||||
<%= octicon "radio-tower" %>
|
||||
<!-- <%= octicon "radio-tower" %> -->
|
||||
<svg
|
||||
version="1.1"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
class="octicon octicon-radio-tower"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4.79 6.11c.25-.25.25-.67 0-.92-.32-.33-.48-.76-.48-1.19 0-.43.16-.86.48-1.19.25-.26.25-.67 0-.92a.613.613 0 0 0-.45-.19c-.16 0-.33.06-.45.19-.57.58-.85 1.35-.85 2.11 0 .76.29 1.53.85 2.11.25.25.66.25.9 0zM2.33.52a.651.651 0 0 0-.92 0C.48 1.48.01 2.74.01 3.99c0 1.26.47 2.52 1.4 3.48.25.26.66.26.91 0s.25-.68 0-.94c-.68-.7-1.02-1.62-1.02-2.54 0-.92.34-1.84 1.02-2.54a.66.66 0 0 0 .01-.93zm5.69 5.1A1.62 1.62 0 1 0 6.4 4c-.01.89.72 1.62 1.62 1.62zM14.59.53a.628.628 0 0 0-.91 0c-.25.26-.25.68 0 .94.68.7 1.02 1.62 1.02 2.54 0 .92-.34 1.83-1.02 2.54-.25.26-.25.68 0 .94a.651.651 0 0 0 .92 0c.93-.96 1.4-2.22 1.4-3.48A5.048 5.048 0 0 0 14.59.53zM8.02 6.92c-.41 0-.83-.1-1.2-.3l-3.15 8.37h1.49l.86-1h4l.84 1h1.49L9.21 6.62c-.38.2-.78.3-1.19.3zm-.01.48L9.02 11h-2l.99-3.6zm-1.99 5.59l1-1h2l1 1h-4zm5.19-11.1c-.25.25-.25.67 0 .92.32.33.48.76.48 1.19 0 .43-.16.86-.48 1.19-.25.26-.25.67 0 .92a.63.63 0 0 0 .9 0c.57-.58.85-1.35.85-2.11 0-.76-.28-1.53-.85-2.11a.634.634 0 0 0-.9 0z"
|
||||
/>
|
||||
</svg>
|
||||
<span class="Counter">3</span>
|
||||
Notifications
|
||||
</a>
|
||||
@ -50,7 +78,7 @@ There are a few subcomponents and add-ons that work well with the menu, includin
|
||||
|
||||
You can also add optional headings to a menu. Feel free to use nearly any semantic element with the `.menu-heading` class, including inline elements, headings, and more.
|
||||
|
||||
```html title="Menu with heading"
|
||||
```html live title="Menu with heading"
|
||||
<nav class="menu" aria-labelledby="menu-heading">
|
||||
<span class="menu-heading" id="menu-heading">Menu heading</span>
|
||||
<a class="menu-item selected" href="#url" aria-current="page">Account</a>
|
||||
@ -64,7 +92,7 @@ You can also add optional headings to a menu. Feel free to use nearly any semant
|
||||
|
||||
Use `.UnderlineNav` to style navigation with a minimal underlined selected state, typically used for navigation placed at the top of the page. This component comes with variations to accommodate icons, containers and other content.
|
||||
|
||||
```html title="UnderlineNav"
|
||||
```html live title="UnderlineNav"
|
||||
<nav class="UnderlineNav">
|
||||
<div class="UnderlineNav-body">
|
||||
<a href="#url" role="tab" title="Item 1" class="UnderlineNav-item selected">Item 1</a>
|
||||
@ -77,7 +105,7 @@ Use `.UnderlineNav` to style navigation with a minimal underlined selected state
|
||||
|
||||
Use `.UnderlineNav-actions` to place another element, such as a button, to the opposite side of the navigation items.
|
||||
|
||||
```html title="UnderlineNav-actions"
|
||||
```html live title="UnderlineNav-actions"
|
||||
<nav class="UnderlineNav" aria-label="Foo bar">
|
||||
<div class="UnderlineNav-body">
|
||||
<a href="#url" class="UnderlineNav-item selected">Item 1</a>
|
||||
@ -93,7 +121,7 @@ Use `.UnderlineNav-actions` to place another element, such as a button, to the o
|
||||
|
||||
Use `.UnderlineNav--right` to right align the navigation.
|
||||
|
||||
```html title="UnderlineNav--right"
|
||||
```html live title="UnderlineNav--right"
|
||||
<nav class="UnderlineNav UnderlineNav--right">
|
||||
<div class="UnderlineNav-body">
|
||||
<a href="#url" role="tab" title="Item 1" class="UnderlineNav-item selected">Item 1</a>
|
||||
@ -106,7 +134,7 @@ Use `.UnderlineNav--right` to right align the navigation.
|
||||
|
||||
`.UnderlineNav--right` also works with when used with `.UnderlineNav-actions`.
|
||||
|
||||
```html title="UnderlineNav--right with actions"
|
||||
```html live title="UnderlineNav--right with actions"
|
||||
<nav class="UnderlineNav UnderlineNav--right" aria-label="Foo bar">
|
||||
<div class="UnderlineNav-actions">
|
||||
<a class="btn">Button</a>
|
||||
@ -121,42 +149,96 @@ Use `.UnderlineNav--right` to right align the navigation.
|
||||
```
|
||||
|
||||
<!-- Update wording here -->
|
||||
|
||||
`.Counters` and `.octicons` can be used with navigation items. Use `.UnderlineNav-octicon` to add color and hover styles.
|
||||
|
||||
```erb title="UnderlineNav with Counter"
|
||||
```html live
|
||||
<nav class="UnderlineNav" aria-label="Foo bar">
|
||||
<div class="UnderlineNav-body">
|
||||
<a href="#url" class="UnderlineNav-item selected">
|
||||
<%= octicon "tools", :class => "UnderlineNav-octicon" %>
|
||||
<!-- <%= octicon "tools", :class = "UnderlineNav-octicon" %> -->
|
||||
<svg
|
||||
version="1.1"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
class="octicon octicon-tools UnderlineNav-octicon"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z"
|
||||
/>
|
||||
</svg>
|
||||
Item 1
|
||||
</a>
|
||||
<a href="#url" class="UnderlineNav-item">
|
||||
<%= octicon "tools", :class => "UnderlineNav-octicon" %>
|
||||
<!-- <%= octicon "tools", :class = "UnderlineNav-octicon" %> -->
|
||||
<svg
|
||||
version="1.1"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
class="octicon octicon-tools UnderlineNav-octicon"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z"
|
||||
/>
|
||||
</svg>
|
||||
Item 2
|
||||
<span class="Counter">10</span>
|
||||
</a>
|
||||
<a href="#url" class="UnderlineNav-item">
|
||||
<%= octicon "tools", :class => "UnderlineNav-octicon" %>
|
||||
Item 3
|
||||
</a>
|
||||
<a href="#url" class="UnderlineNav-item">
|
||||
<%= octicon "tools", :class => "UnderlineNav-octicon" %>
|
||||
<!-- <%= octicon "tools", :class = "UnderlineNav-octicon" %> -->
|
||||
<svg
|
||||
version="1.1"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
class="octicon octicon-tools UnderlineNav-octicon"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z"
|
||||
/>
|
||||
</svg>
|
||||
Item 3
|
||||
</a>
|
||||
<a href="#url" class="UnderlineNav-item">
|
||||
<!-- <%= octicon "tools", :class = "UnderlineNav-octicon" %> -->
|
||||
<svg
|
||||
version="1.1"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
class="octicon octicon-tools UnderlineNav-octicon"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z"
|
||||
/>
|
||||
</svg>
|
||||
Item 4
|
||||
</a>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
```
|
||||
|
||||
Use `.UnderlineNav--full` in combination with container styles and `.UnderlineNav-container` to make navigation fill the width of the container.
|
||||
|
||||
```html title="UnderlineNav--full"
|
||||
```html live title="UnderlineNav--full"
|
||||
<nav class="UnderlineNav UnderlineNav--full" aria-label="Foo bar">
|
||||
<div class="container-lg UnderlineNav-container">
|
||||
<div class="UnderlineNav-body">
|
||||
<a href="#url" class="UnderlineNav-item selected">Item 1</a>
|
||||
<a href="#url" class="UnderlineNav-item">Item 2
|
||||
<a href="#url" class="UnderlineNav-item"
|
||||
>Item 2
|
||||
<span class="Counter">10</span>
|
||||
</a>
|
||||
</a>
|
||||
<a href="#url" class="UnderlineNav-item">Item 3</a>
|
||||
<a href="#url" class="UnderlineNav-item">Item 4</a>
|
||||
</div>
|
||||
@ -174,7 +256,7 @@ The Side Nav is a vertical list of navigational links, typically used on the lef
|
||||
- You can use a **light gray background** and a **border** if the parent element doesn't have it already.
|
||||
- Add `aria-current="page"` to show a link as selected. Selected button elements in tab-like UIs should instead have `aria-selected="true"`.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<nav class="SideNav bg-gray-light border" style="max-width: 360px">
|
||||
<a class="SideNav-item" href="#url">Account</a>
|
||||
<a class="SideNav-item" href="#url" aria-current="page">Profile</a>
|
||||
@ -185,22 +267,51 @@ The Side Nav is a vertical list of navigational links, typically used on the lef
|
||||
|
||||
Different kind of content can be added inside a Side Nav item. Use utility classes to further style them if needed.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<nav class="SideNav bg-gray-light border" style="max-width: 360px">
|
||||
<a class="SideNav-item" href="#url">
|
||||
Text only
|
||||
</a>
|
||||
<a class="SideNav-item" href="#url">
|
||||
<img class="avatar avatar-small mr-2" src="https://avatars.githubusercontent.com/hubot?s=40" alt="hubot" height="20" width="20">
|
||||
<img
|
||||
class="avatar avatar-small mr-2"
|
||||
src="https://avatars.githubusercontent.com/hubot?s=40"
|
||||
alt="hubot"
|
||||
height="20"
|
||||
width="20"
|
||||
/>
|
||||
With an avatar
|
||||
</a>
|
||||
<a class="SideNav-item" href="#url">
|
||||
<%= octicon "octoface", class: "mr-2" %>
|
||||
<!-- <%= octicon "octoface", class: "mr-2" %> -->
|
||||
<svg
|
||||
version="1.1"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
class="octicon octicon-octoface mr-2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z"
|
||||
/>
|
||||
</svg>
|
||||
With an icon
|
||||
</a>
|
||||
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
|
||||
With a status icon
|
||||
<%= octicon "primitive-dot", class: "color-green-5 ml-2 float-right" %>
|
||||
<!-- <%= octicon "primitive-dot", class: "color-green-5 ml-2 float-right" %> -->
|
||||
<svg
|
||||
version="1.1"
|
||||
width="8"
|
||||
height="16"
|
||||
viewBox="0 0 8 16"
|
||||
class="octicon octicon-primitive-dot color-green-5 ml-2 float-right"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path fill-rule="evenodd" d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
|
||||
With a label <span class="Label bg-blue" title="Label: label">label</span>
|
||||
@ -217,7 +328,7 @@ Different kind of content can be added inside a Side Nav item. Use utility class
|
||||
|
||||
The `.SideNav-subItem` is an alternative, more lightweight version without borders and more condensed. It can be used stand-alone.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<aside class="bg-gray-light border p-3" style="max-width: 360px">
|
||||
<h5 class="text-gray mb-2 pb-1 border-bottom">Menu</h5>
|
||||
<nav class="SideNav">
|
||||
@ -226,19 +337,32 @@ The `.SideNav-subItem` is an alternative, more lightweight version without borde
|
||||
<a class="SideNav-subItem" href="#url">Emails</a>
|
||||
<a class="SideNav-subItem" href="#url">Notifications</a>
|
||||
</nav>
|
||||
<aside>
|
||||
<aside></aside>
|
||||
</aside>
|
||||
```
|
||||
|
||||
Or also appear nested, as a sub navigation. Use margin/padding utility classes to add indentation.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<nav class="SideNav bg-gray-light border" style="max-width: 360px">
|
||||
<a class="SideNav-item" href="#url">
|
||||
<%= octicon "person", class: "mr-2" %>
|
||||
<!-- <%= octicon "person", class: "mr-2" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-person mr-2" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12 14.002a.998.998 0 0 1-.998.998H1.001A1 1 0 0 1 0 13.999V13c0-2.633 4-4 4-4s.229-.409 0-1c-.841-.62-.944-1.59-1-4 .173-2.413 1.867-3 3-3s2.827.586 3 3c-.056 2.41-.159 3.38-1 4-.229.59 0 1 0 1s4 1.367 4 4v1.002z"
|
||||
/>
|
||||
</svg>
|
||||
<span>Account</span>
|
||||
</a>
|
||||
<a class="SideNav-item" href="#url" aria-current="page">
|
||||
<%= octicon "octoface", class: "mr-2" %>
|
||||
<!-- <%= octicon "octoface", class: "mr-2" %> -->
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-octoface mr-2" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z"
|
||||
/>
|
||||
</svg>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
<nav class="SideNav bg-white border-top py-3 pl-6">
|
||||
@ -247,19 +371,23 @@ Or also appear nested, as a sub navigation. Use margin/padding utility classes t
|
||||
<a class="SideNav-subItem" href="#url">Sub item 3</a>
|
||||
</nav>
|
||||
<a class="SideNav-item" href="#url">
|
||||
<%= octicon "mail", class: "mr-2" %>
|
||||
<!-- <%= octicon "mail", class: "mr-2" %> -->
|
||||
<svg width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-mail mr-2" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M0 4v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1zm13 0L7 9 1 4h12zM1 5.5l4 3-4 3v-6zM2 12l3.5-3L7 10.5 8.5 9l3.5 3H2zm11-.5l-4-3 4-3v6z"
|
||||
/>
|
||||
</svg>
|
||||
<span>Emails</span>
|
||||
</a>
|
||||
</nav>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Tabnav
|
||||
|
||||
When you need to toggle between different views, consider using a tabnav. It'll give you a left-aligned horizontal row of... tabs!
|
||||
|
||||
```html title="tabnav"
|
||||
```html live title="tabnav"
|
||||
<div class="tabnav">
|
||||
<nav class="tabnav-tabs" aria-label="Foo bar">
|
||||
<a href="#url" class="tabnav-tab selected" aria-current="page">Foo tab</a>
|
||||
@ -270,7 +398,7 @@ When you need to toggle between different views, consider using a tabnav. It'll
|
||||
|
||||
Use `.float-right` to align additional elements in the `.tabnav`:
|
||||
|
||||
```html title="tabnav with buttons"
|
||||
```html live title="tabnav with buttons"
|
||||
<div class="tabnav">
|
||||
<a class="btn btn-sm float-right" href="#url" role="button">Button</a>
|
||||
<nav class="tabnav-tabs" aria-label="Foo bar">
|
||||
@ -282,7 +410,7 @@ Use `.float-right` to align additional elements in the `.tabnav`:
|
||||
|
||||
Additional bits of text and links can be styled for optimal placement with `.tabnav-extra`:
|
||||
|
||||
```html title="tabnav-extra"
|
||||
```html live title="tabnav-extra"
|
||||
<div class="tabnav">
|
||||
<div class="tabnav-extra float-right">
|
||||
Tabnav widget text here.
|
||||
@ -294,7 +422,7 @@ Additional bits of text and links can be styled for optimal placement with `.tab
|
||||
</div>
|
||||
```
|
||||
|
||||
```html title="tabnav with everything"
|
||||
```html live title="tabnav with everything"
|
||||
<div class="tabnav">
|
||||
<div class="float-right">
|
||||
<a class="tabnav-extra" href="#url">
|
||||
@ -315,7 +443,7 @@ Additional bits of text and links can be styled for optimal placement with `.tab
|
||||
|
||||
A vertical list of filters. Grey text on white background. Selecting a filter from the list will fill its background with blue and make the text white.
|
||||
|
||||
```html title="filter-list"
|
||||
```html live title="filter-list"
|
||||
<ul class="filter-list">
|
||||
<li>
|
||||
<a href="#url" class="filter-item selected" aria-current="page">
|
||||
@ -341,7 +469,7 @@ A vertical list of filters. Grey text on white background. Selecting a filter fr
|
||||
|
||||
`.subnav` is navigation that is typically used when on a dashboard type interface with another set of navigation above it. This helps distinguish navigation hierarchy.
|
||||
|
||||
```html title="subnav"
|
||||
```html live title="subnav"
|
||||
<nav class="subnav" aria-label="Respository">
|
||||
<a href="#url" class="subnav-item selected" aria-current="page">Item 1</a>
|
||||
<a href="#url" class="subnav-item">Item 2</a>
|
||||
@ -351,7 +479,7 @@ A vertical list of filters. Grey text on white background. Selecting a filter fr
|
||||
|
||||
You can have `subnav-search` in the subnav bar.
|
||||
|
||||
```erb title="subnav-search"
|
||||
```html live
|
||||
<div class="subnav">
|
||||
<nav class="subnav-links" aria-label="Repository">
|
||||
<a href="#url" class="subnav-item selected" aria-current="page">Item 1</a>
|
||||
@ -359,16 +487,27 @@ You can have `subnav-search` in the subnav bar.
|
||||
<a href="#url" class="subnav-item">Item 3</a>
|
||||
</nav>
|
||||
<div class="subnav-search float-left">
|
||||
<input type="search" name="name" class="form-control subnav-search-input" value="" aria-label="Search site">
|
||||
<%= octicon "search", :class => "subnav-search-icon" %>
|
||||
<input type="search" name="name" class="form-control subnav-search-input" value="" aria-label="Search site" />
|
||||
<!-- <%= octicon "search", :class = "subnav-search-icon" %> -->
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
class="octicon octicon-search subnav-search-icon"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
You can also use a `subnav-search-context` to display search help in a select menu.
|
||||
|
||||
```erb title="subnav-search-context"
|
||||
```html live
|
||||
<div class="subnav">
|
||||
<nav class="subnav-links">
|
||||
<a href="#url" class="subnav-item selected">Item 1</a>
|
||||
@ -376,7 +515,15 @@ You can also use a `subnav-search-context` to display search help in a select me
|
||||
<a href="#url" class="subnav-item">Item 3</a>
|
||||
</nav>
|
||||
<div class="float-left ml-3 select-menu js-menu-container js-select-menu subnav-search-context">
|
||||
<button type="button" name="button" class="btn select-menu-button js-menu-target" aria-expanded="false" aria-haspopup="true">Filters </button>
|
||||
<button
|
||||
type="button"
|
||||
name="button"
|
||||
class="btn select-menu-button js-menu-target"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
Filters
|
||||
</button>
|
||||
<div class="select-menu-modal-holder js-menu-content js-navigation-container" aria-hidden="true">
|
||||
<div class="select-menu-modal">
|
||||
<div class="select-menu-list">
|
||||
@ -400,8 +547,20 @@ You can also use a `subnav-search-context` to display search help in a select me
|
||||
</div>
|
||||
</div>
|
||||
<div class="subnav-search float-left">
|
||||
<input type="search" name="name" class="form-control subnav-search-input" value="" aria-label="Search site">
|
||||
<%= octicon "search", :class => "subnav-search-icon" %>
|
||||
<input type="search" name="name" class="form-control subnav-search-input" value="" aria-label="Search site" />
|
||||
<!-- <%= octicon "search", :class = "subnav-search-icon" %> -->
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
class="octicon octicon-search subnav-search-icon"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -9,13 +9,13 @@ symbols: [account-switcher, active, admin, avatar, dropdown-menu-content, experi
|
||||
|
||||
Give a page a clear, separated title and optional top nav by adding a `.pagehead`.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
|
||||
## Basic pagehead
|
||||
|
||||
In its simplest form, you can build a pagehead with a `pagehead` element with an `h1` child.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="pagehead">
|
||||
<h1>Title</h1>
|
||||
</div>
|
||||
@ -40,7 +40,7 @@ Also be sure to add `aria-hidden="true"` to hide the avatar from screenreaders.
|
||||
|
||||
For path or breadcrumb patterns, wrap the `/` with `path-divider` to add some nice horizontal spacing.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="pagehead">
|
||||
<h1>
|
||||
<span class="author"><a href="#url" class="url fn" rel="author">jonrohan</a></span>
|
||||
@ -54,7 +54,7 @@ For path or breadcrumb patterns, wrap the `/` with `path-divider` to add some ni
|
||||
|
||||
To add actions on the right side of the `pagehead`, use the `pagehead-actions` element. Place `pagehead-actions` before the `h1` to ensure proper placement.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="pagehead">
|
||||
<ul class="pagehead-actions">
|
||||
<li><button class="btn btn-sm" href="#url">Action</button></li>
|
||||
@ -66,7 +66,7 @@ To add actions on the right side of the `pagehead`, use the `pagehead-actions` e
|
||||
|
||||
## Org nav
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="pagehead orghead px-3">
|
||||
<nav class="orgnav clearfix" role="navigation">
|
||||
<a class="pagehead-tabs-item selected" href="#url">
|
||||
@ -98,7 +98,7 @@ Use `pagehead` to construct a header and navigation for a repository.
|
||||
|
||||
### Base
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="pagehead repohead experiment-repo-nav">
|
||||
<div class="container-lg repohead-details-container px-3 clearfix">
|
||||
<ul class="pagehead-actions">
|
||||
@ -156,7 +156,7 @@ Use `pagehead` to construct a header and navigation for a repository.
|
||||
|
||||
### Private
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="pagehead repohead experiment-repo-nav">
|
||||
<div class="container-lg repohead-details-container px-3 clearfix">
|
||||
<ul class="pagehead-actions">
|
||||
@ -1,21 +1,18 @@
|
||||
---
|
||||
title: Pagination
|
||||
path: components/pagination
|
||||
status: New Release
|
||||
status: New
|
||||
source: 'https://github.com/primer/css/tree/master/src/pagination'
|
||||
bundle: pagination
|
||||
---
|
||||
|
||||
|
||||
Use the pagination component to apply button styles to a connected set of links that go to related pages (for example, previous, next, or page numbers).
|
||||
|
||||
## Table of Contents
|
||||
|
||||
## Previous/next pagination
|
||||
|
||||
You can make a very simple pagination container with just the Previous and Next buttons. Add the class `disabled` to the `Previous` button if there isn't a preceding page, or to the `Next` button if there isn't a succeeding page.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<nav class="paginate-container" aria-label="Pagination">
|
||||
<div class="pagination">
|
||||
<span class="previous_page disabled">Previous</span>
|
||||
@ -36,7 +33,7 @@ As always, make sure to include the appropriate `aria` attributes to make the el
|
||||
- Add `aria-current="true"` to the current page marker.
|
||||
- Add `aria-label="Page X"` to each anchor link.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<nav class="paginate-container" aria-label="Pagination">
|
||||
<div class="pagination">
|
||||
<span class="previous_page disabled">Previous</span>
|
||||
@ -51,4 +48,3 @@ As always, make sure to include the appropriate `aria` attributes to make the el
|
||||
</div>
|
||||
</nav>
|
||||
```
|
||||
|
||||
@ -9,7 +9,7 @@ bundle: popover
|
||||
|
||||
Popovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
|
||||
A popover consist of:
|
||||
|
||||
@ -48,7 +48,7 @@ The samples below include optional markup, like:
|
||||
### Basic example
|
||||
Defaults to caret oriented top-center.
|
||||
|
||||
```html title="Default (top-center)"
|
||||
```html live title="Default (top-center)"
|
||||
<div class="position-relative text-center">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover right-0 left-0 position-relative">
|
||||
@ -63,7 +63,7 @@ Defaults to caret oriented top-center.
|
||||
|
||||
### Large example
|
||||
|
||||
```html title="Large"
|
||||
```html live title="Large"
|
||||
<div class="position-relative text-center">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover right-0 left-0 position-relative">
|
||||
@ -78,7 +78,7 @@ Defaults to caret oriented top-center.
|
||||
|
||||
### Bottom
|
||||
|
||||
```html title="Bottom"
|
||||
```html live title="Bottom"
|
||||
<div class="position-relative text-center">
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large">
|
||||
@ -93,7 +93,7 @@ Defaults to caret oriented top-center.
|
||||
|
||||
### Bottom-right
|
||||
|
||||
```html title="Bottom-right"
|
||||
```html live title="Bottom-right"
|
||||
<div class="position-relative text-right pr-2">
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large">
|
||||
@ -108,7 +108,7 @@ Defaults to caret oriented top-center.
|
||||
|
||||
### Bottom-left
|
||||
|
||||
```html title="Bottom-left"
|
||||
```html live title="Bottom-left"
|
||||
<div class="Popover position-relative pl-2">
|
||||
<div class="Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
@ -121,7 +121,7 @@ Defaults to caret oriented top-center.
|
||||
|
||||
### Left
|
||||
|
||||
```html title="Left"
|
||||
```html live title="Left"
|
||||
<div class="d-flex flex-justify-center flex-items-center">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover position-relative">
|
||||
@ -136,7 +136,7 @@ Defaults to caret oriented top-center.
|
||||
|
||||
### Left-bottom
|
||||
|
||||
```html title="Left-bottom"
|
||||
```html live title="Left-bottom"
|
||||
<div class="d-flex flex-justify-center flex-items-end">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover position-relative">
|
||||
@ -151,7 +151,7 @@ Defaults to caret oriented top-center.
|
||||
|
||||
### Left-top
|
||||
|
||||
```html title="Left-top"
|
||||
```html live title="Left-top"
|
||||
<div class="d-flex flex-justify-center flex-items-start">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover position-relative">
|
||||
@ -166,7 +166,7 @@ Defaults to caret oriented top-center.
|
||||
|
||||
### Right
|
||||
|
||||
```html title="Right"
|
||||
```html live title="Right"
|
||||
<div class="d-flex flex-justify-center flex-items-center">
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large">
|
||||
@ -181,7 +181,7 @@ Defaults to caret oriented top-center.
|
||||
|
||||
### Right-bottom
|
||||
|
||||
```html title="Right-bottom"
|
||||
```html live title="Right-bottom"
|
||||
<div class="d-flex flex-justify-center flex-items-end">
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large">
|
||||
@ -196,7 +196,7 @@ Defaults to caret oriented top-center.
|
||||
|
||||
### Right-top
|
||||
|
||||
```html title="Right-top"
|
||||
```html live title="Right-top"
|
||||
<div class="d-flex flex-justify-center flex-items-start">
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large">
|
||||
@ -211,7 +211,7 @@ Defaults to caret oriented top-center.
|
||||
|
||||
### Top-left
|
||||
|
||||
```html title="Top-left"
|
||||
```html live title="Top-left"
|
||||
<div class="position-relative pl-2">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover position-relative">
|
||||
@ -226,7 +226,7 @@ Defaults to caret oriented top-center.
|
||||
|
||||
### Top-right
|
||||
|
||||
```html title="Top-right"
|
||||
```html live title="Top-right"
|
||||
<div class="position-relative text-right pr-2">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover right-0 position-relative">
|
||||
@ -1,42 +1,44 @@
|
||||
---
|
||||
title: Progress
|
||||
path: components/progress
|
||||
status: New Release
|
||||
status: New
|
||||
source: 'https://github.com/primer/css/tree/master/src/progress'
|
||||
bundle: progress
|
||||
---
|
||||
|
||||
|
||||
Use Progress components to visualize task completion. The `Progress` class adds a background color and aligns its children horizontally with flexbox. The children should be individually colored with [background utilities](/css/utilities/colors#background-colors) and sized with inline `width` styles in percentages. Overflow is hidden, so children that overflow will be clipped.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<span class="Progress">
|
||||
<span class="bg-green" style="width: 50%;"></span>
|
||||
</span>
|
||||
```
|
||||
|
||||
## Large Progress
|
||||
|
||||
Large progress bars are slightly taller than the default.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<span class="Progress Progress--large">
|
||||
<span class="bg-green" style="width: 50%;"></span>
|
||||
</span>
|
||||
```
|
||||
|
||||
## Small Progress
|
||||
|
||||
Large progress bars are shorter than the default.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<span class="Progress Progress--small">
|
||||
<span class="bg-green" style="width: 50%;"></span>
|
||||
</span>
|
||||
```
|
||||
|
||||
## Inline Progress
|
||||
|
||||
For inline progress indicators, use the `Progress` and `d-inline-flex` with an inline element such as `<span>` and add a custom `width` style:
|
||||
|
||||
```html
|
||||
```html live
|
||||
<span class="text-small text-gray mr-2">4 of 16</span>
|
||||
<span class="Progress d-inline-flex" style="width: 160px">
|
||||
<div class="bg-green" style="width: 25%"></div>
|
||||
@ -44,9 +46,10 @@ For inline progress indicators, use the `Progress` and `d-inline-flex` with an i
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
In cases where it's not possible to describe the progress in text, provide an `aria-label` attribute that does so:
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div aria-label="tasks: 8 of 10 complete">
|
||||
<span class="Progress">
|
||||
<span class="bg-green" style="width: 80%;"></span>
|
||||
@ -55,9 +58,10 @@ In cases where it's not possible to describe the progress in text, provide an `a
|
||||
```
|
||||
|
||||
## Progress with multiple values
|
||||
|
||||
To show the progress of tasks in multiple states (such as "done", "in progress", and "open"), use distinct background color utilities and give each one a percentage width proportional to the total number. Children are stacked from left to right, so if your widths add up to 100%, your bars will too.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="tooltipped tooltipped-n" aria-label="tasks: 80 done, 14 in progress, 6 open">
|
||||
<span class="Progress">
|
||||
<span class="bg-green" style="width: 80%;"></span>
|
||||
@ -66,4 +70,3 @@ To show the progress of tasks in multiple states (such as "done", "in progress",
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -1,19 +1,17 @@
|
||||
---
|
||||
title: Select Menu
|
||||
status: New Release
|
||||
status: New
|
||||
source: 'https://github.com/primer/css/tree/master/src/select-menu'
|
||||
bundle: select-menu
|
||||
---
|
||||
|
||||
The `SelectMenu` component provides advanced support for navigation, filtering, and more. Any menu can make use of JavaScript-enabled live filtering, selected states, tabbed lists, and keyboard navigation with a bit of markup.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
## Basic example
|
||||
|
||||
Use a `<details>` element to toggle the Select Menu. The `<summary>` element can be styled in many ways. In the example below it's a `.btn`.
|
||||
|
||||
```erb
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" type="button" aria-haspopup="true" aria-expanded="true">
|
||||
Choose an item
|
||||
@ -23,7 +21,13 @@ Use a `<details>` element to toggle the Select Menu. The `<summary>` element can
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<%= octicon "x" %>
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<menu class="SelectMenu-list">
|
||||
@ -35,8 +39,8 @@ Use a `<details>` element to toggle the Select Menu. The `<summary>` element can
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"> <!-- min height for < sm --> </div>
|
||||
<div class="d-none d-sm-block" style="height: 180px"> <!-- min height for > sm --> </div>
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 180px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
Add a `.SelectMenu-header` to house a clear title and a close button. Note that the close button is only shown on narrow screens (mobile).
|
||||
@ -45,9 +49,8 @@ Add a `.SelectMenu-header` to house a clear title and a close button. Note that
|
||||
|
||||
In case the Select Menu should be aligned to the right, use `SelectMenu right-0`.
|
||||
|
||||
```erb
|
||||
<div class="d-flex flex-justify-end">
|
||||
|
||||
```html live
|
||||
<div class="d-flex flex-justify-end position-relative">
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" type="button" aria-haspopup="true" aria-expanded="true">
|
||||
Choose an item
|
||||
@ -57,7 +60,13 @@ In case the Select Menu should be aligned to the right, use `SelectMenu right-0`
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<%= octicon "x" %>
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<menu class="SelectMenu-list">
|
||||
@ -68,18 +77,17 @@ In case the Select Menu should be aligned to the right, use `SelectMenu right-0`
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"> <!-- min height for < sm --> </div>
|
||||
<div class="d-none d-sm-block" style="height: 180px"> <!-- min height for > sm --> </div>
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 180px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Selected state
|
||||
|
||||
Add a `.SelectMenu-icon .octicon-check` icon and it will show up when `aria-checked="true"` is set.
|
||||
|
||||
```erb
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" type="button" aria-haspopup="true" aria-expanded="true">
|
||||
Choose an item
|
||||
@ -89,20 +97,53 @@ Add a `.SelectMenu-icon .octicon-check` icon and it will show up when `aria-chec
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<%= octicon "x" %>
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<menu class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitemcheckbox" aria-checked="true">
|
||||
<%= octicon "check", class: "SelectMenu-icon" %>
|
||||
<!-- <%= octicon "check", class: "SelectMenu-icon" %> -->
|
||||
<svg
|
||||
width="12"
|
||||
height="16"
|
||||
viewBox="0 0 12 16"
|
||||
class="octicon octicon-check SelectMenu-icon"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" />
|
||||
</svg>
|
||||
Selected state
|
||||
</button>
|
||||
<button class="SelectMenu-item" role="menuitemcheckbox">
|
||||
<%= octicon "check", class: "SelectMenu-icon" %>
|
||||
<!-- <%= octicon "check", class: "SelectMenu-icon" %> -->
|
||||
<svg
|
||||
width="12"
|
||||
height="16"
|
||||
viewBox="0 0 12 16"
|
||||
class="octicon octicon-check SelectMenu-icon"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" />
|
||||
</svg>
|
||||
Default state
|
||||
</button>
|
||||
<button class="SelectMenu-item" role="menuitemcheckbox" aria-checked="true">
|
||||
<%= octicon "check", class: "SelectMenu-icon" %>
|
||||
<!-- <%= octicon "check", class: "SelectMenu-icon" %> -->
|
||||
<svg
|
||||
width="12"
|
||||
height="16"
|
||||
viewBox="0 0 12 16"
|
||||
class="octicon octicon-check SelectMenu-icon"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" />
|
||||
</svg>
|
||||
Selected state
|
||||
</button>
|
||||
<button class="SelectMenu-item" role="menuitemcheckbox">Default state</button>
|
||||
@ -112,15 +153,15 @@ Add a `.SelectMenu-icon .octicon-check` icon and it will show up when `aria-chec
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"> <!-- min height for < sm --> </div>
|
||||
<div class="d-none d-sm-block" style="height: 250px"> <!-- min height for > sm --> </div>
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 250px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## List items
|
||||
|
||||
The list of items is arguably the most important subcomponent within the menu. Build them out of anchors, buttons, or just about any [interactive content](http://w3c.github.io/html/dom.html#interactive-content). List items are also customizable with options for avatars, additional icons, and multiple lines of text. Use utility classes like `mr-2`, `d-flex` or `float-right` in case more custom styling is needed.
|
||||
|
||||
```erb
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" type="button" aria-haspopup="true" aria-expanded="true">
|
||||
Choose an item
|
||||
@ -130,7 +171,13 @@ The list of items is arguably the most important subcomponent within the menu. B
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<%= octicon "x" %>
|
||||
<!--%= octicon "x" %-->
|
||||
<svg version="1.1" width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<menu class="SelectMenu-list">
|
||||
@ -138,12 +185,27 @@ The list of items is arguably the most important subcomponent within the menu. B
|
||||
Text only
|
||||
</button>
|
||||
<button class="SelectMenu-item" role="menuitem">
|
||||
<img class="avatar avatar-small mr-2" src="https://avatars.githubusercontent.com/hubot?s=40" alt="hubot" height="20" width="20">
|
||||
<img
|
||||
class="avatar avatar-small mr-2"
|
||||
src="https://avatars.githubusercontent.com/hubot?s=40"
|
||||
alt="hubot"
|
||||
height="20"
|
||||
width="20"
|
||||
/>
|
||||
With an avatar
|
||||
</button>
|
||||
<button class="SelectMenu-item" role="menuitem">
|
||||
With a status icon
|
||||
<%= octicon "primitive-dot", class: "color-green-5 ml-2" %>
|
||||
<!-- <%= octicon "primitive-dot", class: "color-green-5 ml-2" %> -->
|
||||
<svg
|
||||
width="8"
|
||||
height="16"
|
||||
viewBox="0 0 8 16"
|
||||
class="octicon octicon-primitive-dot color-green-5 ml-2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path fill-rule="evenodd" d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="SelectMenu-item" role="menuitem">
|
||||
With a <span class="Label bg-blue" title="Label: label">label</span>
|
||||
@ -160,15 +222,15 @@ The list of items is arguably the most important subcomponent within the menu. B
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"> <!-- min height for < sm --> </div>
|
||||
<div class="d-none d-sm-block" style="height: 300px"> <!-- min height for > sm --> </div>
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 300px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Divider
|
||||
|
||||
The Select Menu's list can be divided into multiple parts by adding a `.SelectMenu-divider`.
|
||||
|
||||
```erb
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" type="button" aria-haspopup="true" aria-expanded="true">
|
||||
Choose an item
|
||||
@ -178,7 +240,13 @@ The Select Menu's list can be divided into multiple parts by adding a `.SelectMe
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<%= octicon "x" %>
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<menu class="SelectMenu-list">
|
||||
@ -193,8 +261,8 @@ The Select Menu's list can be divided into multiple parts by adding a `.SelectMe
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"> <!-- min height for < sm --> </div>
|
||||
<div class="d-none d-sm-block" style="height: 260px"> <!-- min height for > sm --> </div>
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 260px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Additional filter and footer
|
||||
@ -203,7 +271,7 @@ If the list is expected to get long, consider adding a `.SelectMenu-filter` inpu
|
||||
|
||||
Also consider adding a `.SelectMenu-footer` at the bottom. It can be used for additional information, but can also greatly improve the scrolling performance because the list doesn't need to be repainted due to the rounded corners.
|
||||
|
||||
```erb
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" type="button" aria-haspopup="true" aria-expanded="true">
|
||||
Choose an item
|
||||
@ -213,7 +281,13 @@ Also consider adding a `.SelectMenu-footer` at the bottom. It can be used for ad
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<%= octicon "x" %>
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<form class="SelectMenu-filter">
|
||||
@ -259,7 +333,7 @@ Also consider adding a `.SelectMenu-footer` at the bottom. It can be used for ad
|
||||
|
||||
Sometimes you need two or more lists of items in your Select Menu, e.g. branches and tags. Select Menu lists can be tabbed with the addition of `.SelectMenu-tabs` above the menu.
|
||||
|
||||
```erb
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" type="button" aria-haspopup="true" aria-expanded="true">
|
||||
Choose an item
|
||||
@ -269,11 +343,17 @@ Sometimes you need two or more lists of items in your Select Menu, e.g. branches
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<%= octicon "x" %>
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<form class="SelectMenu-filter">
|
||||
<input class="SelectMenu-input form-control" type="text" placeholder="Filter" aria-label="Filter">
|
||||
<input class="SelectMenu-input form-control" type="text" placeholder="Filter" aria-label="Filter" />
|
||||
</form>
|
||||
<nav class="SelectMenu-tabs">
|
||||
<button class="SelectMenu-tab" aria-selected="true">Branches</button>
|
||||
@ -296,15 +376,15 @@ Sometimes you need two or more lists of items in your Select Menu, e.g. branches
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"> <!-- min height for < sm --> </div>
|
||||
<div class="d-none d-sm-block" style="height: 380px"> <!-- min height for > sm --> </div>
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 380px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Message
|
||||
|
||||
A `SelectMenu-message` can be used to show different kind of messages to a user. Use utility classes to further style the message.
|
||||
|
||||
```erb
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" type="button" aria-haspopup="true" aria-expanded="true">
|
||||
Choose an item
|
||||
@ -314,7 +394,13 @@ A `SelectMenu-message` can be used to show different kind of messages to a user.
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<%= octicon "x" %>
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<menu class="SelectMenu-list">
|
||||
@ -327,16 +413,16 @@ A `SelectMenu-message` can be used to show different kind of messages to a user.
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"> <!-- min height for < sm --> </div>
|
||||
<div class="d-none d-sm-block" style="height: 200px"> <!-- min height for > sm --> </div>
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 200px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Loading
|
||||
|
||||
When fetching large lists, consider showing a `.SelectMenu-loading` animation.
|
||||
|
||||
```erb
|
||||
<details class="details-reset details-overlay">
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" type="button" aria-haspopup="true" aria-expanded="true">
|
||||
Choose an item
|
||||
</summary>
|
||||
@ -345,15 +431,33 @@ When fetching large lists, consider showing a `.SelectMenu-loading` animation.
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<%= octicon "x" %>
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<form class="SelectMenu-filter">
|
||||
<input class="SelectMenu-input form-control" type="text" placeholder="Filter" aria-label="Filter">
|
||||
<input class="SelectMenu-input form-control" type="text" placeholder="Filter" aria-label="Filter" />
|
||||
</form>
|
||||
<menu class="SelectMenu-list">
|
||||
<div class="SelectMenu-loading">
|
||||
<%= octicon "octoface", class: "anim-pulse", width: 32 %>
|
||||
<!-- <%= octicon "octoface", class: "anim-pulse", width: 32 %> -->
|
||||
<svg
|
||||
width="32 "
|
||||
height="32"
|
||||
viewBox="0 0 16 16"
|
||||
class="octicon octicon-octoface anim-pulse"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</menu>
|
||||
<footer class="SelectMenu-footer">Loading...</footer>
|
||||
@ -361,15 +465,15 @@ When fetching large lists, consider showing a `.SelectMenu-loading` animation.
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"> <!-- min height for < sm --> </div>
|
||||
<div class="d-none d-sm-block" style="height: 220px"> <!-- min height for > sm --> </div>
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 220px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Blankslate
|
||||
|
||||
Sometimes a Select Menu needs to communicate a "blank slate" where there's no content in the menu's list. Usually these include a clear call to action to add said content to the list. Swap out the contents of a `.SelectMenu-list` with a `.SelectMenu-blankslate` and customize its contents as needed.
|
||||
|
||||
```erb
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" type="button" aria-haspopup="true" aria-expanded="true">
|
||||
Choose an item
|
||||
@ -379,12 +483,24 @@ Sometimes a Select Menu needs to communicate a "blank slate" where there's no co
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<%= octicon "x" %>
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<menu class="SelectMenu-list">
|
||||
<div class="SelectMenu-blankslate">
|
||||
<%= octicon "repo", class: "color-gray-3", width: 24 %>
|
||||
<!-- <%= octicon "repo", class: "color-gray-3", width: 24 %> -->
|
||||
<svg width="24 " height="32" viewBox="0 0 12 16" class="octicon octicon-repo color-gray-3" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"
|
||||
/>
|
||||
</svg>
|
||||
<h4 class="my-2">No repositories</h4>
|
||||
<p class="mb-3 text-gray">We didn’t find any matching repositories that you can commit to.</p>
|
||||
<button type="button" class="btn btn-sm btn-primary">Create a repository</button>
|
||||
@ -394,8 +510,8 @@ Sometimes a Select Menu needs to communicate a "blank slate" where there's no co
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"> <!-- min height for < sm --> </div>
|
||||
<div class="d-none d-sm-block" style="height: 260px"> <!-- min height for > sm --> </div>
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 260px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## github.com usage
|
||||
@ -12,7 +12,7 @@ The basic Subhead consists of a `.Subhead` container, which has a light gray bot
|
||||
|
||||
Use a heading element whenever possible as they can be used as navigation for assistive technologies, and avoid skipping levels.
|
||||
|
||||
```html title="Subhead"
|
||||
```html live title="Subhead"
|
||||
<div class="Subhead">
|
||||
<div class="Subhead-heading">Plain subhead</div>
|
||||
</div>
|
||||
@ -20,7 +20,7 @@ Use a heading element whenever possible as they can be used as navigation for as
|
||||
|
||||
To add a top margin to the Subhead, use `.Subhead--spacious`. This is useful for separating sections on a settings page.
|
||||
|
||||
```html title="Spacious Subhead"
|
||||
```html live title="Spacious Subhead"
|
||||
<div class="Subhead Subhead--spacious">
|
||||
<div class="Subhead-heading">Spacious subhead</div>
|
||||
</div>
|
||||
@ -28,7 +28,7 @@ To add a top margin to the Subhead, use `.Subhead--spacious`. This is useful for
|
||||
|
||||
You can add a one line description to the subhead with `.Subhead-description`.
|
||||
|
||||
```html title="Subhead with description"
|
||||
```html live title="Subhead with description"
|
||||
<div class="Subhead">
|
||||
<div class="Subhead-heading">Subhead with description</div>
|
||||
<div class="Subhead-description">The subhead is a subdued header style with a light bottom border.</div>
|
||||
@ -37,7 +37,7 @@ You can add a one line description to the subhead with `.Subhead-description`.
|
||||
|
||||
For longer descriptions, it is recommended that you use a paragraph below the Subhead.
|
||||
|
||||
```html title="Subhead with longer description"
|
||||
```html live title="Subhead with longer description"
|
||||
<div class="Subhead">
|
||||
<div class="Subhead-heading">Plain subhead</div>
|
||||
</div>
|
||||
@ -48,7 +48,7 @@ For longer descriptions, it is recommended that you use a paragraph below the Su
|
||||
|
||||
You can add a button or something to the right of `.Subhead-heading` with the `.Subhead-actions` element.
|
||||
|
||||
```html title="Subhead with actions"
|
||||
```html live title="Subhead with actions"
|
||||
<div class="Subhead">
|
||||
<div class="Subhead-heading">Subhead with button</div>
|
||||
<div class="Subhead-actions"><a href="#url" class="btn btn-sm btn-primary" role="button">Action</a></div>
|
||||
@ -62,7 +62,7 @@ You can add a button or something to the right of `.Subhead-heading` with the `.
|
||||
|
||||
Use all the elements together to create a Subhead with actions and a description.
|
||||
|
||||
```html title="Subhead with actions and description"
|
||||
```html live title="Subhead with actions and description"
|
||||
<div class="Subhead">
|
||||
<div class="Subhead-heading">Subhead with actions and description</div>
|
||||
<div class="Subhead-actions"><a href="#url" class="btn btn-sm btn-primary" role="button">Action</a></div>
|
||||
@ -72,7 +72,7 @@ Use all the elements together to create a Subhead with actions and a description
|
||||
|
||||
Use the `.Subhead-heading--danger` modifier to make the text bold and red. This is useful for warning users.
|
||||
|
||||
```html title="Subhead danger"
|
||||
```html live title="Subhead danger"
|
||||
<div class="Subhead">
|
||||
<div class="Subhead-heading Subhead-heading--danger">Danger zone</div>
|
||||
</div>
|
||||
227
docs/content/components/toasts.md
Normal file
227
docs/content/components/toasts.md
Normal file
@ -0,0 +1,227 @@
|
||||
---
|
||||
title: Toasts
|
||||
path: components/toasts
|
||||
status: Experimental
|
||||
status_issue: 'https://github.com/github/design-systems/issues/101'
|
||||
source: ''
|
||||
bundle: toasts
|
||||
---
|
||||
|
||||
Toasts are used to show live, time-sensitive feedback to users.
|
||||
|
||||
## Default
|
||||
|
||||
To create a default toast, use `.Toast`. Always use the `info` icon for default messages.
|
||||
|
||||
```html live
|
||||
<div class="p-1">
|
||||
<div class="Toast">
|
||||
<span class="Toast-icon">
|
||||
<!-- <%= octicon "info" %>-->
|
||||
<svg width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="Toast-content">Toast message goes here</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
The Toast content is formattable. We recommend keeping your message under 140 characters.
|
||||
|
||||
```html live
|
||||
<div class="p-1">
|
||||
<div class="Toast">
|
||||
<span class="Toast-icon">
|
||||
<!-- <%= octicon "info" %> -->
|
||||
<svg width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="Toast-content">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
<strong>Aenean commodo ligula eget dolor.</strong> Aenean massa. Cum sociis <em>natoque</em> penatibus et ma
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Variations
|
||||
|
||||
Use the success, warning, and error modifiers to communicate different states.
|
||||
|
||||
Always use the `check` octicon for success states.
|
||||
|
||||
```html live
|
||||
<div class="p-1">
|
||||
<div class="Toast Toast--success">
|
||||
<span class="Toast-icon">
|
||||
<!-- <%= octicon "check" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-check" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="Toast-content">Success message goes here.</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Always use the `alert` octicon for warning states.
|
||||
|
||||
```html live
|
||||
<div class="p-1">
|
||||
<div class="Toast Toast--warning">
|
||||
<span class="Toast-icon">
|
||||
<!-- <%= octicon "alert" %> -->
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-alert" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="Toast-content">Warning message goes here.</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Always use the `stop` octicon for error states.
|
||||
|
||||
```html live
|
||||
<div class="p-1">
|
||||
<div class="Toast Toast--error">
|
||||
<span class="Toast-icon">
|
||||
<!-- <%= octicon "stop" %> -->
|
||||
<svg width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-stop" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10 1H4L0 5v6l4 4h6l4-4V5l-4-4zm3 9.5L9.5 14h-5L1 10.5v-5L4.5 2h5L13 5.5v5zM6 4h2v5H6V4zm0 6h2v2H6v-2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="Toast-content">Error message goes here</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Toast with dismiss
|
||||
|
||||
Use `.Toast-dismissButton` to allow a user to explicitly dismiss a Toast.
|
||||
|
||||
```html live
|
||||
<div class="p-1">
|
||||
<div class="Toast">
|
||||
<span class="Toast-icon">
|
||||
<!-- <%= octicon "info" %> -->
|
||||
<svg width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="Toast-content">This toast is dismissable.</span>
|
||||
<button class="Toast-dismissButton">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Toast with link
|
||||
|
||||
Include a link to allow users to take actions within a Toast.
|
||||
|
||||
```html live
|
||||
<div class="p-1">
|
||||
<div class="Toast">
|
||||
<span class="Toast-icon">
|
||||
<!-- <%= octicon "info" %> -->
|
||||
<svg width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="Toast-content">Toast message goes here </strong><a href="#">Action.</a></span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Toast animation in
|
||||
|
||||
The `Toast--animateIn` and `Toast--animateOut` modifier classes can be used to animate the toast in and out from the bottom.
|
||||
|
||||
```html live
|
||||
<div class="p-1">
|
||||
<div class="Toast Toast--animateIn">
|
||||
<span class="Toast-icon">
|
||||
<!-- <%= octicon "info" %> -->
|
||||
<svg width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="Toast-content">Toast message goes here.</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Toast with loading animation
|
||||
|
||||
Add the `Toast--spinner` modifier class on the `Toast-icon` `svg` to communicate a loading state.
|
||||
|
||||
```html live
|
||||
<div class="p-1">
|
||||
<div class="Toast Toast--loading">
|
||||
<span class="Toast-icon">
|
||||
<svg class="Toast--spinner" viewBox="0 0 32 32" width="18" height="18">
|
||||
<path
|
||||
fill="#959da5"
|
||||
d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"
|
||||
/>
|
||||
<path fill="#ffffff" d="M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="Toast-content">Toast message goes here.</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Toast position
|
||||
|
||||
Use the `position-fixed bottom-0 left-0` utility classes on a wrapper element to position Toasts at the **bottom left** of the viewport.
|
||||
|
||||
```html live
|
||||
<div style="height:150px">
|
||||
<div class="position-fixed bottom-0 left-0 mb-3 ml-3">
|
||||
<div class="Toast">
|
||||
<span class="Toast-icon">
|
||||
<!-- <%= octicon "info" %> -->
|
||||
<svg width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="Toast-content">Toast message goes here.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -9,7 +9,7 @@ bundle: tooltips
|
||||
|
||||
Add tooltips built entirely in CSS to nearly any element.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
|
||||
## Implementation and accessibility
|
||||
|
||||
@ -24,7 +24,7 @@ Before adding a tooltip, please consider: Is this information essential and nece
|
||||
## Tooltip direction
|
||||
Specify the direction of a tooltip with north, south, east, and west directions:
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="d-flex flex-justify-center pt-4">
|
||||
<span class="tooltipped tooltipped-nw m-2 p-2 border" aria-label="This is the tooltip on the North West side.">
|
||||
.tooltipped-nw
|
||||
@ -60,7 +60,7 @@ Specify the direction of a tooltip with north, south, east, and west directions:
|
||||
## Tooltip alignment
|
||||
Align tooltips to the left or right of an element, combined with a directional class to specify north or south. Use a modifier of `1` or `2` to choose how much the tooltip's arrow is indented.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="d-flex flex-justify-center pt-4">
|
||||
<span class="tooltipped tooltipped-nw tooltipped-align-right-1 m-2 p-2 border" aria-label="Tooltipped NW and aligned right.">
|
||||
.tooltipped-nw .tooltipped-align-right-1
|
||||
@ -99,7 +99,7 @@ Align tooltips to the left or right of an element, combined with a directional c
|
||||
Use `.tooltipped-multiline` when you have long content. This style has some limitations: you cannot pre-format the text with newlines, and tooltips are limited to a max-width of `250px`.
|
||||
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="d-flex flex-justify-center pt-6">
|
||||
<span class="tooltipped tooltipped-n tooltipped-multiline m-2 p-2 border" aria-label="This is the tooltip with multiple lines. This is the tooltip with multiple lines.">
|
||||
.tooltipped-multiline
|
||||
@ -111,7 +111,7 @@ Use `.tooltipped-multiline` when you have long content. This style has some limi
|
||||
|
||||
By default the tooltips have a slight delay before appearing. This is to keep multiple tooltips in the UI from being distracting. There is a `.tooltipped-no-delay` modifier class you can use to override this.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="d-flex flex-justify-center pt-4">
|
||||
<span class="tooltipped tooltipped-n tooltipped-no-delay m-2 p-2 border" aria-label="This is the tooltip on the no delay side.">
|
||||
.tooltipped-no-delay
|
||||
@ -9,7 +9,7 @@ bundle: truncate
|
||||
|
||||
`.css-truncate` will shorten text with an ellipsis. The maximum width of the truncated text can be changed by overriding the max-width of `.css-truncate-target`. Unless the full text is so long that it affects performace, always add `title` to the truncated element so the full text can still be seen.
|
||||
|
||||
```html title="Truncate"
|
||||
```html live title="Truncate"
|
||||
<span class="branch-ref css-truncate css-truncate-target" title="really-long-branch-name">
|
||||
really-long-branch-name
|
||||
</span>
|
||||
@ -17,7 +17,7 @@ bundle: truncate
|
||||
|
||||
You can reveal the entire string on hover with the addition of `.expandable`.
|
||||
|
||||
```html title="Truncate Expandable"
|
||||
```html live title="Truncate Expandable"
|
||||
<span class="css-truncate expandable">
|
||||
<span class="branch-ref css-truncate-target">this-is-a-really-long-branch-name</span>
|
||||
</span>
|
||||
99
docs/content/getting-started/contributing.md
Normal file
99
docs/content/getting-started/contributing.md
Normal file
@ -0,0 +1,99 @@
|
||||
---
|
||||
title: Contributing
|
||||
description: Guidelines for contributing to GitHub's CSS
|
||||
---
|
||||
|
||||
## Decision process for adding new styles
|
||||
|
||||
### Components
|
||||
|
||||
[Components](/css/components) are frequently used visual patterns we've abstracted into a set of convenient styles, that would be otherwise difficult to achieve with utilities and layout objects.
|
||||
|
||||
Making a decision on whether new components should be added is done on a case by case basis. It's not always easy to make that decision but here are some questions you should ask yourself before moving forward with a pull request. The design systems team will help you make this decision.
|
||||
|
||||
- How often is this pattern used across the site?
|
||||
- Could these styles be achieved with existing components, objects, and utilities?
|
||||
- If your design is difficult to compose with current styles, does this highlight problems with existing components (such as overly-specific components, or missing objects and utilities)?
|
||||
- Is this a totally new pattern or should it be an extension of an existing component?
|
||||
- How is this pattern being implemented currently - have you identified problems with it’s current implementation that can be improved with adding a new pattern?
|
||||
- Is the desire for this new pattern a side-effect of lacking documentation or mis-understandings of use with current styles?
|
||||
- Are there special factors that need to be considered as to why the this pattern needs it’s own styles? Such legal issues, usability issues, or branding and trademarks?
|
||||
- Is this something that would be better handled by other front-end code rather than CSS?
|
||||
- Every new addition of CSS means we ask our users to download a larger CSS file, and we increase the maintenance work of our CSS framework. Does the convenience of adding these new styles outweigh those costs?
|
||||
|
||||
### Objects and utilities
|
||||
|
||||
Many of the same questions can be applied to objects and utilities, however the purpose of these styles is different:
|
||||
|
||||
- [Objects](/css/objects) aren't concerned with thematic styles. They are for common display and positioning styles we find in page layouts and common content types.
|
||||
- [Utilities](/css/utilities) do one thing well and one thing only. These styles are immutable and therefore often use the `!important` tag. For this reason we aim not to change the properties of utilities very often. They often form the building blocks of our pages and when we introduce new ones we need to do so with care as we'll likely need to live with these styles for a long time. When assessing whether there is a need to add a new utility, consider these additional questions:
|
||||
- How does this new utility fit within our existing set of utilities? If it is an addition to an existing set then it should follow the same naming convention.
|
||||
- Is it for a property that would likely need to be changed at different breakpoints? If so it may need responsive options.
|
||||
- If this style is part of a family of properties, do we need to consider adding the full set? Reasons for adding a full set could be that the other property values are often used, or that there would be a need to switch the property on and off (such as display or visibility).
|
||||
- Does introducing this new utility cause any clashes or potential confusion with the use of existing utilities? If so, what steps can we take to avoid those issues.
|
||||
- Does the utility have a connection with a set of variables? If so do the corresponding variables need to be updated?
|
||||
|
||||
## Step-by-step instructions for adding new styles
|
||||
|
||||
### Step 1: Open an issue
|
||||
|
||||
It's usually better to open an issue before investing time in spiking out a new pattern. This gives the design systems team a heads up and allows other designers to share thoughts. Here's an outline of what's helpful to include in a new style issue:
|
||||
|
||||
1. What the pattern is and how it's being used across the site - post screenshots and urls where possible. If you need help identifying where the pattern is being used, call that out here and cc the relevant team and/or cc `@product-design` to help.
|
||||
2. Why you think a new pattern is needed (this should answer the relevant questions above).
|
||||
3. If you intend to work on these new styles yourself, let us know what your timeline and next steps are. If you need help and this is a dependency for shipping another project, please make that clear here and what the timeline is.
|
||||
4. Add the `type: new styles` label, or `type: refactor` where appropriate.
|
||||
|
||||
### Step 2: Design and build the new styles
|
||||
|
||||
- You may want to explore the visual design for a new component before spiking it out in code. If so, continue in the issue and post your design mockups. Using our [CodePen template](https://codepen.io/team/GitHub/pen/xYLdZd) could also be a good option, it pulls in Primer CSS so you can explore options in isolation before jumping into production code.
|
||||
- When you're ready, spike out a branch and build out your new component, object, or utilities according to the style guide principles, ensuring you follow our naming convention for each of the styles.
|
||||
- Refactor parts of the product where you think those new styles could be used to test they work for each use case. This does not mean for every instance, but enough of the key use cases to be sure the styles are flexible enough. To avoid blowing out your initial pull request we recommend you do larger amounts of refactoring in an additional branch.
|
||||
- When you're ready for review, add the `status: review needed` and the `design-systems` labels to your pull request. Follow the [ship checklist](#ship-checklist) for additional shipping steps.
|
||||
|
||||
### Step 3: Follow up with refactoring
|
||||
|
||||
New styles we add should be used in as many places as makes sense to in production. Often it takes time to refactor all instances to use the new styles in one pr, but you should ensure this is followed up on.
|
||||
|
||||
- Add a tracking issue to the design systems repo with the label `type: refactor`. Add a task list with links to the code or pages that need updating. If you need help, request help in this issue.
|
||||
- Follow up with as many refactoring pull requests as you can make time for. This is an important part of the process and helps us reduce CSS bloat. Think of it as the project isn't finished until the new styles are being used everywhere they should be in production.
|
||||
|
||||
### Step 4: Feel awesome
|
||||
|
||||
If you get to this step you've helped contribute to a style guide that many of your colleagues use on a daily basis, you've contributed to an open source project that's referenced and used by many others, and you've helped improve the usability and consistency of GitHub for our users. Thank you!
|
||||
|
||||
Let the [design systems team](https://github.com/github/design-systems) know if we can improve these guidelines and make following this process any easier.
|
||||
|
||||
## Documentation structure
|
||||
|
||||
- Our documentation site for Primer CSS is built using [Doctocat](https://primer.style/doctocat) and deployed with [Now](https://zeit.co/now). Our site is built from the `docs` folder and uses [MDX](https://mdxjs.com) to render markdown.
|
||||
|
||||
- Documentation for Primer CSS modules should live in the corresponding `.md` or `.mdx` file for that module in the `/docs/content` folder.
|
||||
|
||||
- There are separate folders in `/docs/content` for component, object, support, and utilities docs, as well as separate folders for more general documentation such as principles and tooling.
|
||||
|
||||
- Documents in `docs/content/` automatically become pages with URLs based on their path relative to `content/`. For example, `docs/content/components/box.md` creates a `/components/box` page.
|
||||
|
||||
- To add new documentation, locate the appropriate folder and create a new `.md` or `.mdx` file. Be sure to include the proper front matter (at minimum, title and status). For example:
|
||||
|
||||
```
|
||||
---
|
||||
title: Alerts
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/master/src/alerts'
|
||||
---
|
||||
```
|
||||
|
||||
### Table of contents
|
||||
|
||||
A table of contents is automatically inserted at the top of every page published on [primer.style/css](https://primer.style/css).
|
||||
|
||||
### Live code
|
||||
|
||||
Check out Doctocat's [live code](https://primer.style/doctocat/usage/live-code) documentation for more information about creating live code examples.
|
||||
|
||||
### Versioning
|
||||
|
||||
Primer CSS follows [semantic versioning](http://semver.org/) conventions. This helps others know when a change is a patch, minor, or breaking change.
|
||||
|
||||
To understand what choice to make, you'll need to understand semver and know if one of the changes shown is a major, minor, or patch. Semver is confusing at first, so I recommend reviewing [semver](http://semver.org/) and/or ask in [#design-systems](https://github.slack.com/archives/design-systems) or and experienced open-source contributor.
|
||||
@ -21,28 +21,28 @@ Begin by initializing your project with a `package.json` file. You can read more
|
||||
|
||||
Install the Primer CSS npm package modules by running `npm install @primer/css`. This will install all of the SCSS source files into the `node_modules/@primer/css` directory.
|
||||
|
||||
```
|
||||
```shell
|
||||
npm install @primer/css --save
|
||||
```
|
||||
|
||||
### Paths
|
||||
|
||||
Here's what you need to know about how the files are structured in both git and in the published npm module:
|
||||
|
||||
* In git, all of the SCSS source files live in the `src/` directory.
|
||||
* When published, all of the files in `src/` are "hoisted" to the package root so that you can import, say, utilities with:
|
||||
- In git, all of the SCSS source files live in the `src/` directory.
|
||||
- When published, all of the files in `src/` are "hoisted" to the package root so that you can import, say, utilities with:
|
||||
|
||||
```scss
|
||||
@import "@primer/css/utilities/index.scss";
|
||||
```
|
||||
|
||||
* All bundle interdependencies within Primer CSS are defined as relative imports (e.g. with `../`), so everything should work fine as long as the `@primer/css` directory is in one of your Sass include paths (i.e. `node_modules`).
|
||||
```scss
|
||||
@import '@primer/css/utilities/index.scss';
|
||||
```
|
||||
|
||||
- All bundle interdependencies within Primer CSS are defined as relative imports (e.g. with `../`), so everything should work fine as long as the `@primer/css` directory is in one of your Sass include paths (i.e. `node_modules`).
|
||||
|
||||
### For a Jekyll site
|
||||
|
||||
Make sure you have [Jekyll](https://jekyllrb.com/) version `3.3.1` or greater with:
|
||||
|
||||
```
|
||||
```shell
|
||||
jekyll -v
|
||||
```
|
||||
|
||||
@ -62,25 +62,25 @@ sass:
|
||||
It's best practice to import all of this scss into one file, usually named `index.scss`. From this file you'll import one or more Primer CSS bundles and any other custom code you write.
|
||||
|
||||
```scss
|
||||
@import "@primer/css/core/index.scss";
|
||||
@import '@primer/css/core/index.scss';
|
||||
// These files live in the same directory as the index file.
|
||||
@import "./custom-1.scss";
|
||||
@import "./custom-2.scss";
|
||||
@import './custom-1.scss';
|
||||
@import './custom-2.scss';
|
||||
```
|
||||
|
||||
Here's an example of how it might look if you installed only a few Primer CSS components with some custom variable overrides. The `$blue` uses the default primer blue in the text utilities, then the new blue in `"custom-that-uses-primer-variables.scss"` and `.foo`.
|
||||
|
||||
```scss
|
||||
@import "@primer/css/utilities/index.scss";
|
||||
@import "primer-buttons/index.scss";
|
||||
@import '@primer/css/utilities/index.scss';
|
||||
@import 'primer-buttons/index.scss';
|
||||
|
||||
// Import color variables for custom code
|
||||
@import "primer-support/index.scss";
|
||||
@import 'primer-support/index.scss';
|
||||
|
||||
// Override default blue
|
||||
$blue: #0000ff;
|
||||
|
||||
@import "./custom-that-uses-primer-variables.scss";
|
||||
@import './custom-that-uses-primer-variables.scss';
|
||||
|
||||
.foo {
|
||||
background: $blue;
|
||||
@ -91,14 +91,14 @@ $blue: #0000ff;
|
||||
|
||||
Don't forget to add the compiled CSS to the `<head>` section of your page.
|
||||
|
||||
```html inert=true
|
||||
<link href="path/to/style.css" rel="stylesheet">
|
||||
```html
|
||||
<link href="path/to/style.css" rel="stylesheet" />
|
||||
```
|
||||
|
||||
## Using Primer CSS on a static site
|
||||
|
||||
You won't need to install any node modules or Sass compilers for a static site; you can use the built CSS. The best thing to do is to [download the built CSS](https://unpkg.com/@primer/css/dist/primer.css) from the [unpkg.com](https://unpkg.com) and host it yourself. If that's not an option, you can include a CDN link in your HTML:
|
||||
|
||||
```html inert=true
|
||||
<link href="https://unpkg.com/primer/build/build.css" rel="stylesheet">
|
||||
```html
|
||||
<link href="https://unpkg.com/primer/build/build.css" rel="stylesheet" />
|
||||
```
|
||||
100
docs/content/index.mdx
Normal file
100
docs/content/index.mdx
Normal file
@ -0,0 +1,100 @@
|
||||
---
|
||||
title: Primer CSS
|
||||
---
|
||||
|
||||
import {HeroLayout} from '@primer/gatsby-theme-doctocat'
|
||||
import {Grid, Box, Heading, Text, ButtonOutline, BorderBox} from '@primer/components'
|
||||
import {Link} from 'gatsby'
|
||||
import utilitiesImage from '../src/utilities-image.svg'
|
||||
import objectsImage from '../src/objects-image.svg'
|
||||
import componentsImage from '../src/components-image.svg'
|
||||
import typographyImage from '../src/typography-image.png'
|
||||
import colorImage from '../src/color-image.svg'
|
||||
import spacingImage from '../src/spacing-image.svg'
|
||||
|
||||
export default HeroLayout
|
||||
|
||||
# Introduction
|
||||
|
||||
Our goal is to create a system that enables us to build consistent user experiences with ease, yet with enough flexibility to support the broad spectrum of GitHub websites. This goal is embedded in our design and code decisions. Our approach to CSS is influenced by Object Oriented CSS principles, functional CSS, and BEM architecture.
|
||||
|
||||
## Highly reusable, flexible styles
|
||||
|
||||
Styles can be mixed and matched to achieve many different layouts, independent of their location. These styles fall into three categories:
|
||||
|
||||
<Grid gridTemplateColumns={['1fr', '1fr', 'repeat(3, 1fr)']} gridGap={5} my={5}>
|
||||
{[
|
||||
{
|
||||
name: 'Utilities',
|
||||
description: 'Single purpose, immutable styles, that do one thing well.',
|
||||
image: utilitiesImage
|
||||
},
|
||||
{name: 'Objects', description: 'Scaffolding for common page and content layouts.', image: objectsImage},
|
||||
{name: 'Components', description: 'Abstracted patterns for frequently used visual styles.', image: componentsImage}
|
||||
].map(({name, description, image}) => (
|
||||
<Box>
|
||||
<img src={image} alt={name} height="60" />
|
||||
<Heading as="h3" pt={3} pb={2} fontSize={3}>
|
||||
{name}
|
||||
</Heading>
|
||||
<p>{description}</p>
|
||||
</Box>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
## Systematically designed for GitHub
|
||||
|
||||
Primer CSS is built upon systems that form the foundation of our styles such as spacing, typography, and color. This systematic approach helps ensure our styles are consistent and interoperable with each other.
|
||||
|
||||
<Box my={5}>
|
||||
{[
|
||||
{
|
||||
name: 'Highly composable spacing scale',
|
||||
description:
|
||||
'The base-8 spacing scale is highly composable and works with the density of GitHub’s content. Margin and padding spacers bring consistency to vertical and horizontal rhythm, while remaining flexible so you can tweak layouts to work for every context.',
|
||||
image: spacingImage
|
||||
},
|
||||
{
|
||||
name: 'Customizable typography',
|
||||
description:
|
||||
'Font size and line-height options work together to result in more sensible numbers. Font styles come in a range of weights and sizes so that we can style appropriately for content and readability. Type utilities allow us to change the visual styles while keeping markup semantic.',
|
||||
image: typographyImage
|
||||
},
|
||||
{
|
||||
name: 'Meaningful color',
|
||||
description:
|
||||
'The color system allows us to add meaningful signals to content and interactions. Color variables and utilities offer thematic styling options without being tied to structure. Text and background colors come in a range of accessible combinations to ensure we build inclusive interfaces.',
|
||||
image: colorImage
|
||||
}
|
||||
].map(({name, description, image}) => (
|
||||
<Grid gridTemplateColumns={['1fr', '1fr', '70px 1fr']} gridGap={5} mb={4} style={{alignItems: 'center'}}>
|
||||
<img src={image} width="70" alt={name} />
|
||||
<Box>
|
||||
<Heading as="h3" pb={2} fontSize={3}>
|
||||
{name}
|
||||
</Heading>
|
||||
<p>{description}</p>
|
||||
</Box>
|
||||
</Grid>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
## Structure
|
||||
|
||||
Primer CSS is published to npm as `@primer/css`. Each of Primer CSS's "modules" lives in a subfolder under `src/` with an `index.scss` in it. Generally speaking, the styles are divided into three primary themes:
|
||||
|
||||
- **Core** styles (in `core/`) are common dependencies, which include support variables, native element and typography styles, buttons, navigation, tooltips, etc.
|
||||
- **Product** styles (in `product/`) are specific to github.com, and include components such as avatars, labels, markdown styles, popovers, and progress indicators.
|
||||
- **Marketing** styles (in `marketing/`) are specific to GitHub marketing efforts, including international and event-focused sites as well as the more design-heavy feature pages on github.com. Marketing styles include new colors and button styles, and extend the core typography and whitespace scales.
|
||||
|
||||
<BorderBox bg="gray.1" p={5} mt={5}>
|
||||
<Heading as="h2" fontSize={3} pb={2}>
|
||||
Use Primer CSS in your project
|
||||
</Heading>
|
||||
<Text as="p" m={0}>
|
||||
Pick and choose what you need. Install the entire Primer CSS bundle or import individual folders.
|
||||
</Text>
|
||||
<ButtonOutline as={Link} to="/getting-started" mt={4} style={{textDecoration: 'none'}}>
|
||||
Installation instructions
|
||||
</ButtonOutline>
|
||||
</BorderBox>
|
||||
@ -9,13 +9,11 @@ bundle: layout
|
||||
|
||||
The grid is 12 columns and percentage-based. The number of columns a container spans can be adjusted across breakpoints for responsive layouts. The grid system works with a variety of layout utilities to achieve different results.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
## Float based grid
|
||||
|
||||
Use `.clearfix` on the container and float utilities with columns for a floated grid layout.
|
||||
|
||||
```html title="Float based grid"
|
||||
```html live title="Float based grid"
|
||||
<div class="container-lg clearfix">
|
||||
<div class="col-4 float-left border p-4">
|
||||
My column
|
||||
@ -33,7 +31,7 @@ Use `.clearfix` on the container and float utilities with columns for a floated
|
||||
|
||||
To reverse the order of columns, use `float-right` to float columns to the right.
|
||||
|
||||
```html title="Float grid reversed"
|
||||
```html live title="Float grid reversed"
|
||||
<div class="container-lg clearfix">
|
||||
<div class="col-4 float-right border p-4">
|
||||
One
|
||||
@ -48,9 +46,10 @@ To reverse the order of columns, use `float-right` to float columns to the right
|
||||
```
|
||||
|
||||
## Nesting
|
||||
|
||||
You can infinitely nest grid layouts within other columns since the column widths are percentage based. With great flexibility comes great responsibility - be sensible with how far you nest!
|
||||
|
||||
```html title="Nesting grids"
|
||||
```html live title="Nesting grids"
|
||||
<div class="clearfix">
|
||||
<div class="col-6 float-left px-1">
|
||||
<div class="border p-1">Unnested</div>
|
||||
@ -77,7 +76,7 @@ You can infinitely nest grid layouts within other columns since the column width
|
||||
|
||||
Use `.mx-auto` to center columns within a container.
|
||||
|
||||
```html title="Centering a column"
|
||||
```html live title="Centering a column"
|
||||
<div class="border">
|
||||
<div class="col-6 p-2 mx-auto border">
|
||||
This column is the center of my world.
|
||||
@ -85,8 +84,8 @@ Use `.mx-auto` to center columns within a container.
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
## Column widths
|
||||
|
||||
Column widths can be used with any other block or inline-block elements to add percentage-based widths.
|
||||
|
||||
```erb title="Column widths"
|
||||
@ -102,7 +101,7 @@ Column widths can be used with any other block or inline-block elements to add p
|
||||
|
||||
Using column offset classes can push a div over X number of columns. They work responsively using the [breakpoints outlined below](#responsive-grids).
|
||||
|
||||
```html title="Offset columns"
|
||||
```html live title="Offset columns"
|
||||
<div class="clearfix">
|
||||
<div class="offset-1 col-3 border p-3">.offset-1</div>
|
||||
<div class="offset-2 col-3 border p-3">.offset-2</div>
|
||||
@ -110,9 +109,10 @@ Using column offset classes can push a div over X number of columns. They work r
|
||||
```
|
||||
|
||||
## Gutters
|
||||
|
||||
Use gutter styles or padding utilities to create gutters. You can use the default gutter style, `gutter`, or either of its modifiers, `gutter-condensed` or `gutter-spacious`. Gutter styles also support responsive breakpoint modifiers. Gutter styles add padding to the left and right side of each column and apply a negative margin to the container to ensure content inside each column lines up with content outside of the grid.
|
||||
|
||||
```html title="Gutters"
|
||||
```html live title="Gutters"
|
||||
<div class="clearfix gutter-md-spacious border">
|
||||
<div class="col-3 float-left">
|
||||
<div class="border p-3">.col-md-3</div>
|
||||
@ -131,7 +131,7 @@ Use gutter styles or padding utilities to create gutters. You can use the defaul
|
||||
|
||||
Use padding utilities to create gutters for more customized layouts.
|
||||
|
||||
```html title="Gutters with padding"
|
||||
```html live title="Gutters with padding"
|
||||
<div class="container-lg clearfix">
|
||||
<div class="col-3 float-left pr-2 mb-3">
|
||||
<div class="border bg-gray-light">.pr-2</div>
|
||||
@ -156,60 +156,100 @@ Use padding utilities to create gutters for more customized layouts.
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
## Inline-block grids
|
||||
|
||||
Use column widths with `d-inline-block` as an alternative to floated grids.
|
||||
|
||||
```html title="Inline-block grid"
|
||||
```html live title="Inline-block grid"
|
||||
<div>
|
||||
<div class="col-4 d-inline-block border">
|
||||
.col-4 .d-inline-block
|
||||
</div><!--
|
||||
--><div class="col-4 d-inline-block border">
|
||||
</div>
|
||||
<!--
|
||||
-->
|
||||
<div class="col-4 d-inline-block border">
|
||||
.col-4 .d-inline-block
|
||||
</div><!--
|
||||
--><div class="col-4 d-inline-block border">
|
||||
</div>
|
||||
<!--
|
||||
-->
|
||||
<div class="col-4 d-inline-block border">
|
||||
.col-4 .d-inline-block
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
You can use column widths and other utilities on elements such as lists to create the layout you need while keeping the markup semantically correct.
|
||||
```html title="Inline-block grid list"
|
||||
|
||||
```html live title="Inline-block grid list"
|
||||
<ul class="list-style-none">
|
||||
<li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="https://github.com/broccolini.png" alt="broccolini" /></li><!--
|
||||
--><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="https://github.com/jonrohan.png" alt="jonrohan" /></li><!--
|
||||
--><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="https://github.com/muan.png" alt="muan" /></li><!--
|
||||
--><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="https://github.com/pmarsceill.png" alt="pmarsceill" /></li><!--
|
||||
--><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="https://github.com/sophshep.png" alt="sophshep" /></li><!--
|
||||
--><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="https://github.com/cmwinters.png" alt="cmwinters" /></li><!--
|
||||
--><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="https://github.com/jeejkang.png" alt="jeejkang" /></li><!--
|
||||
--><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="https://github.com/mdo.png" alt="mdo" /></li>
|
||||
<li class="d-inline-block col-2 p-2">
|
||||
<img class="width-full avatar" src="https://github.com/broccolini.png" alt="broccolini" />
|
||||
</li>
|
||||
<!--
|
||||
-->
|
||||
<li class="d-inline-block col-2 p-2">
|
||||
<img class="width-full avatar" src="https://github.com/jonrohan.png" alt="jonrohan" />
|
||||
</li>
|
||||
<!--
|
||||
-->
|
||||
<li class="d-inline-block col-2 p-2">
|
||||
<img class="width-full avatar" src="https://github.com/muan.png" alt="muan" />
|
||||
</li>
|
||||
<!--
|
||||
-->
|
||||
<li class="d-inline-block col-2 p-2">
|
||||
<img class="width-full avatar" src="https://github.com/pmarsceill.png" alt="pmarsceill" />
|
||||
</li>
|
||||
<!--
|
||||
-->
|
||||
<li class="d-inline-block col-2 p-2">
|
||||
<img class="width-full avatar" src="https://github.com/sophshep.png" alt="sophshep" />
|
||||
</li>
|
||||
<!--
|
||||
-->
|
||||
<li class="d-inline-block col-2 p-2">
|
||||
<img class="width-full avatar" src="https://github.com/cmwinters.png" alt="cmwinters" />
|
||||
</li>
|
||||
<!--
|
||||
-->
|
||||
<li class="d-inline-block col-2 p-2">
|
||||
<img class="width-full avatar" src="https://github.com/jeejkang.png" alt="jeejkang" />
|
||||
</li>
|
||||
<!--
|
||||
-->
|
||||
<li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="https://github.com/mdo.png" alt="mdo" /></li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
|
||||
## Display table grids
|
||||
|
||||
Using [display table utilities](/css/utilities/layout#display) with columns gives you some alternative layout options.
|
||||
|
||||
A useful example is being able to keep the height of the container equal across a row when the length of content may differ.
|
||||
|
||||
```html title="Table grid"
|
||||
```html live title="Table grid"
|
||||
<div class="d-table col-12">
|
||||
<div class="col-4 d-table-cell border p-2">
|
||||
Bacon ipsum dolor amet leberkas pork pig kielbasa shankle ribeye meatball, salami alcatra venison.
|
||||
</div><!--
|
||||
--><div class="col-4 d-table-cell border p-2">
|
||||
Pork chop cupim cow turkey frankfurter, landjaeger fatback hamburger meatball salami spare ribs. Rump tenderloin salami, hamburger frankfurter landjaeger andouille.
|
||||
</div><!--
|
||||
--><div class="col-4 d-table-cell border p-2">
|
||||
Brisket tongue frankfurter cupim strip steak rump picanha pancetta pork pig kevin pastrami biltong. Shankle venison meatball swine sausage ground round. Tail pork loin ribeye kielbasa short ribs pork chop.
|
||||
</div>
|
||||
<!--
|
||||
-->
|
||||
<div class="col-4 d-table-cell border p-2">
|
||||
Pork chop cupim cow turkey frankfurter, landjaeger fatback hamburger meatball salami spare ribs. Rump tenderloin
|
||||
salami, hamburger frankfurter landjaeger andouille.
|
||||
</div>
|
||||
<!--
|
||||
-->
|
||||
<div class="col-4 d-table-cell border p-2">
|
||||
Brisket tongue frankfurter cupim strip steak rump picanha pancetta pork pig kevin pastrami biltong. Shankle venison
|
||||
meatball swine sausage ground round. Tail pork loin ribeye kielbasa short ribs pork chop.
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
You can also create an alternative [media object](/css/utilities/layout#the-media-object) layout with `.display-table` and column widths.
|
||||
|
||||
```html title="Table grid alternative"
|
||||
```html live title="Table grid alternative"
|
||||
<div class="d-table col-12">
|
||||
<div class="col-2 d-table-cell v-align-middle">
|
||||
<img class="width-full avatar" src="https://github.com/github.png" alt="github" />
|
||||
@ -224,15 +264,19 @@ You can also create an alternative [media object](/css/utilities/layout#the-medi
|
||||
|
||||
Note that table cells will fill the width of their container even when the total columns doesn't add up to 12.
|
||||
|
||||
```html title="Table grid cells"
|
||||
```html live title="Table grid cells"
|
||||
<div class="d-table col-12">
|
||||
<div class="col-4 d-table-cell border">
|
||||
.col-4 .d-table-cell
|
||||
</div><!--
|
||||
--><div class="col-4 d-table-cell border">
|
||||
</div>
|
||||
<!--
|
||||
-->
|
||||
<div class="col-4 d-table-cell border">
|
||||
.col-4 .d-table-cell
|
||||
</div><!--
|
||||
--><div class="col-2 d-table-cell border">
|
||||
</div>
|
||||
<!--
|
||||
-->
|
||||
<div class="col-2 d-table-cell border">
|
||||
.col-2 .d-table-cell
|
||||
</div>
|
||||
</div>
|
||||
@ -244,7 +288,7 @@ You can use [flex utilities](/css/utilities/flexbox) on the container and column
|
||||
|
||||
This can be useful for keeping columns the same height, justifying content and vertically aligning items. The flexbox grid is also great for working with responsive layouts.
|
||||
|
||||
```html title="Flexbox grid"
|
||||
```html live title="Flexbox grid"
|
||||
<div class="d-flex flex-column flex-md-row flex-items-center flex-md-items-center">
|
||||
<div class="col-2 d-flex flex-items-center flex-items-center flex-md-items-start">
|
||||
<img class="width-full avatar mb-2 mb-md-0" src="https://github.com/github.png" alt="github" />
|
||||
@ -257,19 +301,20 @@ This can be useful for keeping columns the same height, justifying content and v
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
## Responsive grids
|
||||
|
||||
All the column width classes can be set per breakpoint to create responsive grid layouts. Each responsive style is applied to the specified breakpoint and up.
|
||||
|
||||
### Breakpoints
|
||||
|
||||
We use abbreviations for each breakpoint to keep the class names concise.
|
||||
|
||||
| Shorthand | Description |
|
||||
| --- | --- |
|
||||
| sm | min-width: 544px |
|
||||
| md | min-width: 768px |
|
||||
| lg | min-width: 1004px |
|
||||
| xl | min-width: 1280px |
|
||||
| Shorthand | Description |
|
||||
| --------- | ----------------- |
|
||||
| sm | min-width: 544px |
|
||||
| md | min-width: 768px |
|
||||
| lg | min-width: 1004px |
|
||||
| xl | min-width: 1280px |
|
||||
|
||||
**Note:** The `lg` breakpoint matches our current page width of `980px` including left and right padding of `12px`. This is so that content doesn't touch the edges of the window when resized.
|
||||
|
||||
@ -277,7 +322,7 @@ We use abbreviations for each breakpoint to keep the class names concise.
|
||||
|
||||
In this example at the `sm` breakpoint 2 columns will show, at the `md` breakpoint 4 columns will show, and at the `lg` breakpoint 6 columns will show.
|
||||
|
||||
```html title="Responsive grid"
|
||||
```html live title="Responsive grid"
|
||||
<div class="container-lg clearfix">
|
||||
<div class="col-sm-6 col-md-3 col-lg-2 float-left p-2 border">
|
||||
.col-sm-6 .col-md-3 .col-lg-2
|
||||
@ -302,7 +347,7 @@ In this example at the `sm` breakpoint 2 columns will show, at the `md` breakpoi
|
||||
|
||||
For demonstration, this is how the above example would look at the `sm` breakpoint.
|
||||
|
||||
```html title="Responsive grid small"
|
||||
```html live title="Responsive grid small"
|
||||
<div class="container-lg clearfix">
|
||||
<div class="col-sm-6 float-left p-2 border">
|
||||
.col-sm-6
|
||||
@ -324,9 +369,10 @@ For demonstration, this is how the above example would look at the `sm` breakpoi
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
This is how that same example would look at the `md` breakpoint.
|
||||
|
||||
```html title="Responsive grid medium"
|
||||
```html live title="Responsive grid medium"
|
||||
<div class="container-lg clearfix">
|
||||
<div class="col-md-3 float-left p-2 border">
|
||||
.col-md-3
|
||||
@ -351,7 +397,7 @@ This is how that same example would look at the `md` breakpoint.
|
||||
|
||||
This is how that example would look at the `lg` breakpoint.
|
||||
|
||||
```html title="Responsive grid large"
|
||||
```html live title="Responsive grid large"
|
||||
<div class="container-lg clearfix">
|
||||
<div class="col-lg-2 float-left p-2 border">
|
||||
.col-lg-2
|
||||
@ -375,9 +421,10 @@ This is how that example would look at the `lg` breakpoint.
|
||||
```
|
||||
|
||||
## Containers
|
||||
|
||||
Container widths match our breakpoints and are available at a `sm`, `md`, `lg`, and `xl` size. Containers apply a max-width rather than a fixed width for responsive layouts, and they center the container.
|
||||
|
||||
```html title="Containers sized"
|
||||
```html live title="Containers sized"
|
||||
<div class="container-sm border">
|
||||
.container-sm, max-width 544px
|
||||
</div>
|
||||
@ -7,7 +7,6 @@ source: 'https://github.com/primer/css/tree/master/src/layout'
|
||||
bundle: layout
|
||||
---
|
||||
|
||||
|
||||
Primer CSS's layout includes basic page containers and a single-tiered, fraction-based grid system. That sounds more complicated than it really is though—it's just containers, rows, and columns.
|
||||
|
||||
You can find all the below styles in `_layout.scss`.
|
||||
@ -16,7 +15,7 @@ You can find all the below styles in `_layout.scss`.
|
||||
|
||||
Center your page's contents with a `.container`.
|
||||
|
||||
```html title="Container"
|
||||
```html live title="Container"
|
||||
<div class="container border">
|
||||
Container
|
||||
</div>
|
||||
@ -39,7 +38,7 @@ The grid is pretty standard—you create rows with `.columns` and individual col
|
||||
|
||||
In practice, your columns will look like the example below.
|
||||
|
||||
```html title="Grid columns"
|
||||
```html live title="Grid columns"
|
||||
<div class="container">
|
||||
<div class="columns mb-1">
|
||||
<div class="one-fifth column block-blue p-3 border">
|
||||
@ -83,7 +82,7 @@ In practice, your columns will look like the example below.
|
||||
|
||||
Columns can be centered by adding `.centered` to the `.column` class.
|
||||
|
||||
```html title="Grid centered"
|
||||
```html live title="Grid centered"
|
||||
<div class="columns">
|
||||
<div class="one-half column centered block-blue border p-3">
|
||||
.one-half
|
||||
@ -6,19 +6,22 @@ source: 'https://github.com/primer/css/tree/master/src/table-object'
|
||||
bundle: table-object
|
||||
---
|
||||
|
||||
|
||||
The table object is a module for creating dynamically resizable elements that always sit on the same horizontal line (e.g., they never break to a new line). Using table styles in our CSS means it's cross browser friendly back to at least IE9.
|
||||
|
||||
Additional `margin` or `padding` may be required to properly space content.
|
||||
|
||||
```html title="Table object"
|
||||
```html live title="Table object"
|
||||
<div class="TableObject">
|
||||
<div class="TableObject-item TableObject-item--primary">
|
||||
<input class="input-block form-control" type="text" placeholder="Long elastic input form" aria-label="Long elastic input form">
|
||||
<input
|
||||
class="input-block form-control"
|
||||
type="text"
|
||||
placeholder="Long elastic input form"
|
||||
aria-label="Long elastic input form"
|
||||
/>
|
||||
</div>
|
||||
<div class="TableObject-item">
|
||||
<button class="btn ml-2" type="button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -5,7 +5,7 @@ path: principles/accessibility
|
||||
|
||||
Accessibility is everyone’s responsibility, and the purpose of this document is to provide general accessibility guidelines to developers and designers.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
|
||||
## Overview
|
||||
|
||||
@ -3,7 +3,7 @@ title: HTML
|
||||
path: principles/html
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
|
||||
|
||||
## General formatting
|
||||
|
||||
@ -5,7 +5,7 @@ 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.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
|
||||
|
||||
## Styleguide driven design and development
|
||||
@ -3,7 +3,7 @@ title: SCSS
|
||||
path: priniciples/scss
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
|
||||
|
||||
## Spacing
|
||||
|
||||
@ -6,18 +6,16 @@ source: 'https://github.com/primer/css/blob/master/src/support/variables/layout.
|
||||
bundle: support
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
|
||||
Our breakpoints are based on screen widths where our content starts to break. Since most of GitHub is currently a fixed-width with we use pixel widths to make it easy for us to match page widths for responsive and non-responsive pages. **Our breakpoints may change as we move more of the product into responsive layouts.**
|
||||
|
||||
We use abbreviations for each breakpoint to keep the class names concise. This abbreviated syntax is used consistently across responsive styles. Responsive styles allow you to change the styles properties at each breakpoint. For example, when using column widths for grid layouts, you can change specify that the width is 12 columns wide at the small breakpoint, and 6 columns wide from the large breakpoint: `<div class="col-sm-12 col-lg-6">...</div>`
|
||||
|
||||
| Breakpoint | Syntax | Description |
|
||||
| --- | --- | --- |
|
||||
| Small | sm | min-width: 544px |
|
||||
| Medium | md | min-width: 768px |
|
||||
| Large | lg | min-width: 1012px |
|
||||
| Extra-large | xl | min-width: 1280px |
|
||||
| Breakpoint | Syntax | Description |
|
||||
| ----------- | ------ | ----------------- |
|
||||
| Small | sm | min-width: 544px |
|
||||
| Medium | md | min-width: 768px |
|
||||
| Large | lg | min-width: 1012px |
|
||||
| Extra-large | xl | min-width: 1280px |
|
||||
|
||||
**Note:** The `lg` breakpoint matches our current page width of `980px` including left and right padding of `16px` (`$spacer-3`). This is so that content doesn't touch the edges of the window when resized.
|
||||
|
||||
@ -37,17 +35,18 @@ $width-xl: 1280px;
|
||||
|
||||
$breakpoints: (
|
||||
// Small screen / phone
|
||||
sm: $width-sm,
|
||||
sm: $width-sm,
|
||||
// Medium screen / tablet
|
||||
md: $width-md,
|
||||
md: $width-md,
|
||||
// Large screen / desktop (980 + (12 * 2)) <= container + gutters
|
||||
lg: $width-lg,
|
||||
lg: $width-lg,
|
||||
// Extra large screen / wide desktop
|
||||
xl: $width-xl
|
||||
xl: $width-xl
|
||||
) !default;
|
||||
```
|
||||
|
||||
## Media query mixins
|
||||
|
||||
Use media query mixins when you want to change CSS properties at a particular breakpoint. The media query mixin works by passing in a breakpoint value, such as `breakpoint(md)`.
|
||||
|
||||
Media queries are scoped from each breakpoint and upwards. In the example below, the font size is `28px` until the viewport size meets the `lg` breakpoint, from there upwards—including through the `xl` breakpoint—the font size will be `32px`.
|
||||
@ -55,18 +54,23 @@ Media queries are scoped from each breakpoint and upwards. In the example below,
|
||||
```scss
|
||||
.styles {
|
||||
font-size: 28px;
|
||||
@include breakpoint(md) { font-size: 32px; }
|
||||
@include breakpoint(md) {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Responsive variants
|
||||
|
||||
The `$responsive-variants` variable is a mapping of breakpoints to classname variants, and should be used like so:
|
||||
|
||||
```scss
|
||||
@each $breakpoint, $variant in $responsive-variants {
|
||||
@include breakpoint($breakpoint) {
|
||||
// Note: the first iteration gets `$variant == ""`
|
||||
.overflow#{$variant}-auto { overflow: auto; }
|
||||
.overflow#{$variant}-auto {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -74,13 +78,32 @@ The `$responsive-variants` variable is a mapping of breakpoints to classname var
|
||||
The resulting CSS would be:
|
||||
|
||||
```css
|
||||
.overflow-auto { overflow: auto; }
|
||||
@media (min-width: 544px) { .overflow-sm-auto { overflow: auto; } }
|
||||
@media (min-width: 768px) { .overflow-md-auto { overflow: auto; } }
|
||||
@media (min-width: 1012px) { .overflow-lg-auto { overflow: auto; } }
|
||||
@media (min-width: 1280px) { .overflow-xl-auto { overflow: auto; } }
|
||||
.overflow-auto {
|
||||
overflow: auto;
|
||||
}
|
||||
@media (min-width: 544px) {
|
||||
.overflow-sm-auto {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.overflow-md-auto {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1012px) {
|
||||
.overflow-lg-auto {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.overflow-xl-auto {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Caution!
|
||||
**Caution!**
|
||||
|
||||
1. Don't precede the `#{$variation}` interpolation with a hyphen because the first value of `$variant` will be an empty string.
|
||||
1. For consistency, please put the `@include breakpoint($breakpoint)` call directly inside the `$responsive-variants` loop. This will help keep file sizes small by "batching" selectors in shared `@media` queries.
|
||||
75
docs/content/support/color-system.mdx
Normal file
75
docs/content/support/color-system.mdx
Normal file
@ -0,0 +1,75 @@
|
||||
---
|
||||
title: Color system
|
||||
description: 'Sass variables, mixins, and functions for use in our components.'
|
||||
status: Stable
|
||||
status_issue: 'https://github.com/github/design-systems/issues/301'
|
||||
---
|
||||
|
||||
import colors from 'primer-colors'
|
||||
import {Box, Flex, Heading, Link, StyledOcticon} from '@primer/components'
|
||||
import {Link as LinkIcon} from '@primer/octicons-react'
|
||||
import {palettes, variables} from '../../src/color-variables'
|
||||
import {PaletteTable, PaletteCell, overlayColor} from '../../src/color-system'
|
||||
|
||||
## Color palette
|
||||
|
||||
<Flex flexWrap="wrap" mr={-2}>
|
||||
{palettes
|
||||
.concat(
|
||||
{title: 'Black', name: 'black', value: colors.gray[9]},
|
||||
{title: 'White', name: 'white', value: colors.white, props: {className: 'border'}}
|
||||
)
|
||||
.map(({name, title, value, props = {}}) => (
|
||||
<Flex.Item
|
||||
as={Link}
|
||||
href={`#${name}`}
|
||||
color={overlayColor(value)}
|
||||
flex="1 1 auto"
|
||||
bg={value}
|
||||
p={3}
|
||||
mr={2}
|
||||
mb={2}
|
||||
fontWeight="bold"
|
||||
key={name}
|
||||
{...props}
|
||||
>
|
||||
{title}
|
||||
</Flex.Item>
|
||||
))}
|
||||
</Flex>
|
||||
|
||||
## Color variables
|
||||
|
||||
<Flex flexWrap="wrap" mr={[0, 0, -4]}>
|
||||
{palettes.map(({name, title, value, values}) => (
|
||||
<Flex id={name} flexDirection="column" width={[1, 1, 1 / 2]} pr={[0, 0, 4]} mb={4}>
|
||||
<Flex
|
||||
as={Link}
|
||||
href={`#${name}`}
|
||||
bg={value}
|
||||
color={overlayColor(value)}
|
||||
px={3}
|
||||
pt={4}
|
||||
style={{borderBottom: `1px solid ${overlayColor(value)}`}}
|
||||
alignItems="center"
|
||||
>
|
||||
<Flex.Item color="inherit !important" flex="1 1 auto">
|
||||
<Heading as="div" fontSize={4} pb={1}>
|
||||
{title}
|
||||
</Heading>
|
||||
</Flex.Item>
|
||||
<StyledOcticon icon={LinkIcon} color="inherit !important" height={20} />
|
||||
</Flex>
|
||||
<PaletteTable
|
||||
columns={['variable', 'value']}
|
||||
values={[{variable: name, value, slug: name}].concat(values)}
|
||||
hasHeader={false}
|
||||
cellPadding="8px 16px"
|
||||
/>
|
||||
</Flex>
|
||||
))}
|
||||
</Flex>
|
||||
|
||||
## Color utilities
|
||||
|
||||
There are [utility classes](/utilities/colors) for every color in our system except fades.
|
||||
@ -6,37 +6,39 @@ source: 'https://github.com/primer/css/blob/master/src/support/variables/layout.
|
||||
bundle: support
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
import {Text} from '@primer/components'
|
||||
|
||||
## Spacing scale
|
||||
|
||||
The spacing scale is a **base-8** scale. We chose a base-8 scale because eight is a highly composable number (it can be divided and multiplied many times and result in whole numbers), yet allows spacing dense enough for GitHub's UI. The scale's exception is that it begins at 4px to allow smaller padding and margin for denser parts of the site, from there on it steps up consistently in equal values of `8px`.
|
||||
|
||||
| Variable | Scale | Value |
|
||||
| --- | --- | --- |
|
||||
| $spacer-0 | 0 | 0 |
|
||||
| $spacer-1 | 1 | 4px |
|
||||
| $spacer-2 | 2 | 8px |
|
||||
| $spacer-3 | 3 | 16px |
|
||||
| $spacer-4 | 4 | 24px |
|
||||
| $spacer-5 | 5 | 32px |
|
||||
| $spacer-6 | 6 | 40px |
|
||||
| Variable | Scale | Value |
|
||||
| ----------- | ----- | ----- |
|
||||
| `$spacer-0` | 0 | 0 |
|
||||
| `$spacer-1` | 1 | 4px |
|
||||
| `$spacer-2` | 2 | 8px |
|
||||
| `$spacer-3` | 3 | 16px |
|
||||
| `$spacer-4` | 4 | 24px |
|
||||
| `$spacer-5` | 5 | 32px |
|
||||
| `$spacer-6` | 6 | 40px |
|
||||
|
||||
These variables are encouraged to be used within components and custom CSS. The spacing scale is also used for [margin](/css/utilities/margin) and [padding](/css/utilities/padding) utilities.
|
||||
|
||||
See [primer-marketing-support](/css/support/marketing-variables) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](/css/utilities/marketing-margin) and [padding](/css/utilities/marketing-padding).
|
||||
|
||||
## Em-based spacing
|
||||
|
||||
Ems are used for spacing within components such as buttons and form elements. We stick to common fractions for em values (and powers of 2 where possible) so that , in combination with typography and line-height, the total height lands on sensible numbers.
|
||||
|
||||
We aim for whole numbers, however, GitHub's body font-size is 14px which is difficult to work with, so we sometimes can't achieve a whole number. Less desirable values are highlighted in <span class="text-red">red</span> below.
|
||||
We aim for whole numbers, however, GitHub's body font-size is 14px which is difficult to work with, so we sometimes can't achieve a whole number. Less desirable values are highlighted in <Text color="red.5">red</Text> below.
|
||||
|
||||
| Variable | Fraction | Y Padding (em) | Total height at 14px | Total height at 16px |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| $em-spacer-1 | 1/16 | .0625 | <span class="text-red">22.75</span> | 26 |
|
||||
| $em-spacer-2 | 1/8 | .125 | <span class="text-red">24.5</span> | 28 |
|
||||
| $em-spacer-3 | 1/4 | .25 | 28 | 32 |
|
||||
| $em-spacer-4 | 3/8 | .375 | <span class="text-red">31.5</span> | 36 |
|
||||
| $em-spacer-5 | 1/2 | .5 | 35 | 40 |
|
||||
| $em-spacer-6 | 3/4 | .75 | 42 | 48 |
|
||||
| Variable | Fraction | Y Padding (em) | Total height at 14px | Total height at 16px |
|
||||
| -------------- | -------- | -------------- | -------------------------------- | -------------------- |
|
||||
| `$em-spacer-1` | 1/16 | .0625 | <Text color="red.5">22.75</Text> | 26 |
|
||||
| `$em-spacer-2` | 1/8 | .125 | <Text color="red.5">24.5</Text> | 28 |
|
||||
| `$em-spacer-3` | 1/4 | .25 | 28 | 32 |
|
||||
| `$em-spacer-4` | 3/8 | .375 | <Text color="red.5">31.5</Text> | 36 |
|
||||
| `$em-spacer-5` | 1/2 | .5 | 35 | 40 |
|
||||
| `$em-spacer-6` | 3/4 | .75 | 42 | 48 |
|
||||
|
||||
The variables listed above are preferred for use within components and custom CSS. To calculate values with other font-sizes or em values, we suggest using [Formula](http://jxnblk.com/formula/).
|
||||
@ -7,8 +7,6 @@ source: 'https://github.com/primer/css/blob/master/src/support/variables/typogra
|
||||
bundle: support
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
|
||||
## Type Scale
|
||||
|
||||
The typography scale is designed to work for GitHub's product UI and marketing sites. Font sizes are designed to work in combination with line-height values so as to result in more sensible numbers wherever possible.
|
||||
@ -16,21 +14,22 @@ The typography scale is designed to work for GitHub's product UI and marketing s
|
||||
Font sizes are smaller on mobile and scale up at the `md` [breakpoint](./breakpoints) to be larger on desktop.
|
||||
|
||||
| Scale | Font size: mobile | Font size: desktop | 1.25 line height | 1.5 line height |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 00 | 40px | 48px | 60 | 72 |
|
||||
| 0 | 32px | 40px | 50 | 60 |
|
||||
| 1 | 26px | 32px | 40 | 48 |
|
||||
| 2 | 22px | 24px | 30 | 36 |
|
||||
| 3 | 18px | 20px | 25 | 30 |
|
||||
| 4 | 16px | 16px | 20 | 24 |
|
||||
| 5 | 14px | 14px | 17.5 | 21 |
|
||||
| 6 | 12px | 12px | 15 | 18 |
|
||||
| ----- | ----------------- | ------------------ | ---------------- | --------------- |
|
||||
| 00 | 40px | 48px | 60 | 72 |
|
||||
| 0 | 32px | 40px | 50 | 60 |
|
||||
| 1 | 26px | 32px | 40 | 48 |
|
||||
| 2 | 22px | 24px | 30 | 36 |
|
||||
| 3 | 18px | 20px | 25 | 30 |
|
||||
| 4 | 16px | 16px | 20 | 24 |
|
||||
| 5 | 14px | 14px | 17.5 | 21 |
|
||||
| 6 | 12px | 12px | 15 | 18 |
|
||||
|
||||
The typography scale is used to create [typography utilities](/css/utilities/typography).
|
||||
|
||||
## Typography variables
|
||||
|
||||
#### Font size variables
|
||||
### Font size variables
|
||||
|
||||
```scss
|
||||
// Heading sizes - mobile
|
||||
// h4—h6 remain the same size on both mobile & desktop
|
||||
@ -51,13 +50,15 @@ $h5-size: 14px;
|
||||
$h6-size: 12px;
|
||||
```
|
||||
|
||||
#### Font weight variables
|
||||
### Font weight variables
|
||||
|
||||
```scss
|
||||
$font-weight-bold: 600 !default;
|
||||
$font-weight-light: 300 !default;
|
||||
```
|
||||
|
||||
#### Line height variables
|
||||
### Line height variables
|
||||
|
||||
```scss
|
||||
$lh-condensed-ultra: 1 !default;
|
||||
$lh-condensed: 1.25 !default;
|
||||
@ -65,6 +66,7 @@ $lh-default: 1.5 !default;
|
||||
```
|
||||
|
||||
## Typography Mixins
|
||||
|
||||
Typography mixins are available for heading styles and for our type scale. They can be used within components or custom CSS. The same styles are also available as [utilities](/css/utilities/typography#heading-utilities). which requires no additional CSS.
|
||||
|
||||
Heading mixins are available for `h1` through to `h6`, this includes the font-size and font-weight. Example:
|
||||
@ -11,8 +11,6 @@ We keep a list of suggested packages in our [atom-packages repository](https://g
|
||||
apm install $(curl -L https://raw.githubusercontent.com/primer/atom-packages/master/packages)
|
||||
```
|
||||
|
||||
## Table of Contents
|
||||
|
||||
## Autocomplete Primer
|
||||
|
||||
The [Autocomplete Primer package](https://atom.io/packages/autocomplete-primer) is a custom [Primer](https://github.com/primer) package that autocompletes class names for [utilities](/css/utilities) and Rails helper tags for [Octicons](https://github.com/primer/octicons/tree/master/lib/octicons_helper#readme).
|
||||
@ -9,8 +9,6 @@ For teams working on `github/github` this configuration is all setup for you. Wh
|
||||
|
||||
For everyone else we encourage you to adopt all or some of these tools in your workflow.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
## CSS
|
||||
|
||||
We use [stylelint](http://stylelint.io/) to lint our CSS. If you are working on `github/github` you don't need to do any setup because stylelint comes bundled within the repository. If you are working on other properties, you may need to setup stylelint. You can install stylelint via npm:
|
||||
@ -56,11 +54,13 @@ To disable a linter, place a `// stylelint-disable` comment around the specific
|
||||
```scss
|
||||
// When a branch name is a link
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
a.branch-name { color: $brand-blue; }
|
||||
a.branch-name {
|
||||
color: $brand-blue;
|
||||
}
|
||||
// stylelint-enable selector-no-qualifying-type
|
||||
```
|
||||
|
||||
#### If you choose to disable a linting rule...
|
||||
**If you choose to disable a linting rule...**
|
||||
|
||||
1. You'll need to specify a reason for disabling the lint.
|
||||
2. Say what lint you're disabling, this example has `selector-no-qualifying-type`.
|
||||
@ -74,7 +74,7 @@ While linters shouldn't be disabled without consideration, essentially they act
|
||||
|
||||
Our linter runs on every commit, but finding you have a lint error after a push can be frustrating and waste time. To avoid this, a [collection of editor plugins](http://stylelint.io/user-guide/complementary-tools/) are available to help you lint while you code..
|
||||
|
||||
The Design Systems team recommends using [Atom](https://atom.io/) with the [linter-stylelint](https://github.com/AtomLinter/linter-stylelint) package installed.
|
||||
The Design Systems team recommends using [Atom](https://atom.io/) with the [linter-stylelint](https://github.com/AtomLinter/linter-stylelint) package installed.
|
||||
|
||||
|
||||
|
||||
@ -8,25 +8,25 @@ You're welcome to use whatever prototyping tool suits your needs, however we've
|
||||
The power of prototyping in code is that you can create clickable mocks that can be shared via a URL. This can be useful for exploring designs and interactions or for user research sessions. Prototypes can be throw-away, or part of your process for building out new features since you can work with the same CSS we use in production.
|
||||
|
||||
## Simple HTML prototype with Primer CSS
|
||||
|
||||
Copy the code below and paste it in a HTML file. The CDN link is always linked to the most up to date version of Primer CSS and includes all of the modules in the core, product, and marketing packages.
|
||||
|
||||
This method requires no dev environment set up and is useful for when you want to create simple prototypes using Primer CSS.
|
||||
|
||||
```
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<HEAD>
|
||||
<title> </title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="https://unpkg.com/primer/build/build.css">
|
||||
</HEAD>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
<head>
|
||||
<title></title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/primer/build/build.css" />
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Jekyll prototyping with GitHub CSS and JavaScript
|
||||
|
||||
The [Jekyll](http://jekyllrb.com) based prototyping tool pulls in all of GitHub's CSS, which includes all the Primer CSS modules as well as custom CSS modules. It includes GitHub JavaScript and octicons too.
|
||||
|
||||
This tool is useful for when you want to build a more complex prototype with multiple pages, interactions and flows, or need to work with GitHub CSS. You can take advantage of everything you get with [Jekyll](http://jekyllrb.com/docs/home/), such as layout templates, includes, and collections.
|
||||
@ -9,7 +9,7 @@ bundle: utilities
|
||||
|
||||
Animations are reusable animation classes that you can use to emphasize an element. All of these animations will animate if you toggle their visibility using the "Toggle" button.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
|
||||
## Fade In
|
||||
|
||||
@ -55,7 +55,7 @@ The `.anim-scale-in` class will scale the element in. This is useful on menus wh
|
||||
|
||||
The `.anim-grow-x` class will grow an element width from 0-:100: real quick.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="anim-grow-x py-2 bg-green"></div>
|
||||
```
|
||||
|
||||
@ -7,10 +7,8 @@ source: 'https://github.com/primer/css/tree/master/src/utilities/borders.scss'
|
||||
bundle: utilities
|
||||
---
|
||||
|
||||
import {MarkdownHeading} from '@primer/blueprints'
|
||||
import {palettes, borders} from '../../../docs/color-variables'
|
||||
import {PaletteTable, PaletteCell, PaletteValue} from '../../../docs/color-system'
|
||||
|
||||
import {palettes, borders} from '../../src/color-variables'
|
||||
import {PaletteTable, PaletteCell, PaletteValue} from '../../src/color-system'
|
||||
|
||||
Utilities for borders, border radius, and box shadows.
|
||||
|
||||
@ -20,7 +18,7 @@ Utilities for borders, border radius, and box shadows.
|
||||
|
||||
The default border utility applies a solid, 1px border, with a default gray color.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="border">
|
||||
.border
|
||||
</div>
|
||||
@ -28,7 +26,7 @@ The default border utility applies a solid, 1px border, with a default gray colo
|
||||
|
||||
Borders can be applied to a specific edge or to the X and Y axes individually:
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="d-flex mb-3">
|
||||
<div class="border-left col-3">
|
||||
.border-left
|
||||
@ -53,7 +51,7 @@ Borders can be applied to a specific edge or to the X and Y axes individually:
|
||||
|
||||
Remove borders from all sides or a single side with `.border-0`, `.border-top-0`, `.border-right-0`, `.border-bottom-0`, `.border-left-0`.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="Box border-top-0">
|
||||
.border-top-0
|
||||
</div>
|
||||
@ -63,7 +61,7 @@ Remove borders from all sides or a single side with `.border-0`, `.border-top-0`
|
||||
|
||||
Override default border colors with blue, green, red, purple, yellow, and gray border color utilities.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="border border-blue mb-2">
|
||||
.border-blue
|
||||
</div>
|
||||
@ -100,7 +98,7 @@ Override default border colors with blue, green, red, purple, yellow, and gray b
|
||||
|
||||
Use `border-black-fade` to add an rgba black border with an alpha transparency of `0.15`. This is useful when you want a border that tints the background color. The shade of black we use matches the hue of the GitHub dark header and our gray color palette: `rgba(27,31,35, 0.15)`.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="border border-black-fade bg-blue-light p-2 mb-2">
|
||||
.border-black-fade .bg-blue-light
|
||||
</div>
|
||||
@ -111,7 +109,7 @@ Use `border-black-fade` to add an rgba black border with an alpha transparency o
|
||||
|
||||
On dark backgrounds use `border-white-fade` instead. It adds an rgba white border with an alpha transparency of `0.15`.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="bg-gray-dark text-white p-3">
|
||||
<div class="border border-white-fade p-2">
|
||||
.border-white-fade
|
||||
@ -121,7 +119,7 @@ On dark backgrounds use `border-white-fade` instead. It adds an rgba white borde
|
||||
|
||||
Use `.border-white-fade-xx` to add a white border with various levels of alpha transparency.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="bg-gray-dark text-white p-3 mb-3">
|
||||
<div class="border-bottom border-white-fade-15 p-2 mb-2">
|
||||
.border-white-fade-15
|
||||
@ -162,7 +160,7 @@ Use `.border-white-fade-xx` to add a white border with various levels of alpha t
|
||||
|
||||
Use `border-dashed` to give an element a dashed border.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="border border-dashed p-2">
|
||||
.border-dashed
|
||||
</div>
|
||||
@ -172,7 +170,7 @@ Use `border-dashed` to give an element a dashed border.
|
||||
|
||||
Use the following utilities to add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1` applies a border radius of 3px, `rounded-2` applies a border radius of 6px. `.circle` applies a border radius of 50%, which turns square elements into perfect circles.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="Box rounded-0 mb-2">
|
||||
.rounded-0
|
||||
</div>
|
||||
@ -189,7 +187,7 @@ Use the following utilities to add or remove rounded corners: `rounded-0` remove
|
||||
|
||||
You can also add rounded corners to each edge (top, right, bottom, left) with the following utilities:
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="border rounded-top-1 mb-2">
|
||||
.rounded-top-1
|
||||
</div>
|
||||
@ -208,13 +206,13 @@ You can also add rounded corners to each edge (top, right, bottom, left) with th
|
||||
|
||||
You can adjust border widths on all sides or each side individually with responsive border utilities:
|
||||
|
||||
* `border-(sm|md|lg|xl)` adds borders on all sides at and above the breakpoint. The `border-(sm|md|lg|xl)` shorthand is also supported.
|
||||
* `border-(sm|md|lg|xl)-0` removes borders from all sides at and above the breakpoint.
|
||||
* `border-(sm|md|lg|xl)-(top|right|bottom|left)` adds a border on the given side at and above the breakpoint.
|
||||
* `border-(sm|md|lg|xl)-(top|right|bottom|left)-0` the border from the given side at and above the breakpoint.
|
||||
- `border-(sm|md|lg|xl)` adds borders on all sides at and above the breakpoint. The `border-(sm|md|lg|xl)` shorthand is also supported.
|
||||
- `border-(sm|md|lg|xl)-0` removes borders from all sides at and above the breakpoint.
|
||||
- `border-(sm|md|lg|xl)-(top|right|bottom|left)` adds a border on the given side at and above the breakpoint.
|
||||
- `border-(sm|md|lg|xl)-(top|right|bottom|left)-0` the border from the given side at and above the breakpoint.
|
||||
|
||||
```html
|
||||
<div class="border-top border-sm-right border-md-bottom border-md-top-0">
|
||||
```html live
|
||||
<div class="border-top border-sm-right border-md-bottom border-md-top-0">
|
||||
.border-top
|
||||
<span class="d-none d-sm-inline">.border-sm-right </span>
|
||||
<span class="d-none d-md-inline">.border-md-bottom </span>
|
||||
@ -223,6 +221,7 @@ You can adjust border widths on all sides or each side individually with respons
|
||||
```
|
||||
|
||||
## Border color utilities
|
||||
|
||||
<PaletteTable
|
||||
values={borders}
|
||||
prefix="bg"
|
||||
@ -231,4 +230,5 @@ You can adjust border widths on all sides or each side individually with respons
|
||||
'variable',
|
||||
'value'
|
||||
]}
|
||||
style={{borderSpacing: '0 4px'}} />
|
||||
style={{borderSpacing: '0 4px'}}
|
||||
/>
|
||||
@ -9,13 +9,11 @@ bundle: utilities
|
||||
|
||||
Box shadows are used to make content appear elevated. They are typically applied to containers of content that users need to pay attention to or content that appears on top of (overlapping) other elements on the page (like a pop-over or modal).
|
||||
|
||||
## Table of Contents
|
||||
|
||||
## Default
|
||||
|
||||
Default shadows are mainly used on things that need to appear slightly elevated, like pricing cards or UI elements containing important information.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="box-shadow p-3">
|
||||
.box-shadow
|
||||
</div>
|
||||
@ -23,19 +21,22 @@ Default shadows are mainly used on things that need to appear slightly elevated,
|
||||
|
||||
These types of shadows are typically applied to elements with borders, such as the [Box component](/css/components/box).
|
||||
|
||||
```html
|
||||
<div class="col-5">
|
||||
```html live
|
||||
<div class="col-6">
|
||||
<div class="Box box-shadow">
|
||||
<div class="Box-row">
|
||||
<h3 class="m-0">Organization</h3>
|
||||
</div>
|
||||
<div class="Box-row">
|
||||
<p class="mb-0 text-gray">
|
||||
Taxidermy live-edge mixtape, keytar tumeric locavore meh selvage deep v letterpress vexillologist lo-fi tousled church-key thundercats. Brooklyn bicycle rights tousled, marfa actually.
|
||||
Taxidermy live-edge mixtape, keytar tumeric locavore meh selvage deep v letterpress vexillologist lo-fi tousled
|
||||
church-key thundercats. Brooklyn bicycle rights tousled, marfa actually.
|
||||
</p>
|
||||
</div>
|
||||
<div class="Box-row">
|
||||
<button type="button" name="Create an organization" class="btn btn-primary btn-block">Create an organization</button>
|
||||
<button type="button" name="Create an organization" class="btn btn-primary btn-block">
|
||||
Create an organization
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -45,7 +46,7 @@ These types of shadows are typically applied to elements with borders, such as t
|
||||
|
||||
Medium box shadows are more diffused and slightly larger than small box shadows.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="box-shadow-medium p-3">
|
||||
.box-shadow-medium
|
||||
</div>
|
||||
@ -73,7 +74,7 @@ Medium box shadows are typically used on editorialized content that needs to app
|
||||
|
||||
Large box shadows are very diffused and used sparingly in the product UI.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="box-shadow-large p-3">
|
||||
.box-shadow-large
|
||||
</div>
|
||||
@ -81,9 +82,9 @@ Large box shadows are very diffused and used sparingly in the product UI.
|
||||
|
||||
These shadows are used for marketing content, UI screenshots, and content that appears on top of other page elements.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="box-shadow-large rounded-2 overflow-hidden">
|
||||
<img src="https://github.com/nasa.png" class="img-responsive" alt="NASA is on GitHub">
|
||||
<img src="https://github.com/nasa.png" class="img-responsive" alt="NASA is on GitHub" />
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -91,7 +92,7 @@ These shadows are used for marketing content, UI screenshots, and content that a
|
||||
|
||||
Extra large box shadows are even more diffused.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="box-shadow-extra-large p-3">
|
||||
.box-shadow-extra-large
|
||||
</div>
|
||||
@ -103,7 +104,7 @@ These shadows are used for marketing content and content that appears on top of
|
||||
|
||||
Additionally there is a `box-shadow-none` class that removes `box-shadow`:
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="box-shadow-large box-shadow-none p-3">
|
||||
.box-shadow-none
|
||||
</div>
|
||||
@ -6,21 +6,19 @@ status_issue: 'https://github.com/github/design-systems/issues/97'
|
||||
---
|
||||
|
||||
import {Box, BorderBox} from '@primer/components'
|
||||
import {MarkdownHeading as Heading} from '@primer/blueprints'
|
||||
import {palettes, allColors} from '../../../docs/color-variables'
|
||||
import {PaletteTable, PaletteTableFragment, PaletteHeading, PaletteCell, PaletteValue} from '../../../docs/color-system'
|
||||
import {palettes, allColors} from '../../src/color-variables'
|
||||
import {PaletteTable, PaletteTableFragment, PaletteHeading, PaletteCell, PaletteValue} from '../../src/color-system'
|
||||
const textColumns = [
|
||||
{title: 'Alias', Cell: props => <PaletteCell.Alias {...props} style={{borderBottom: `1px solid ${props.value} !important`}} />},
|
||||
// {title: 'Class', Cell: props => <PaletteCell.Text {...props} style={{borderBottom: props.aliases.text ? `1px solid ${props.value} !important` : null}} />, Value: PaletteValue.PrefixedClass},
|
||||
{
|
||||
title: 'Alias',
|
||||
Cell: props => <PaletteCell.Alias {...props} style={{borderBottom: `1px solid ${props.value} !important`}} />
|
||||
},
|
||||
'variable',
|
||||
{title: 'Value', Cell: PaletteCell.Background, Value: PaletteValue.Value},
|
||||
{title: 'Value', Cell: PaletteCell.Background, Value: PaletteValue.Value}
|
||||
]
|
||||
|
||||
Use color utilities to apply color to the background of elements, text, and borders.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
|
||||
## Background colors
|
||||
|
||||
Background colors are most commonly used for filling large blocks of content or areas with a color. When selecting a background color, make sure the foreground color contrast passes a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). Meeting these standards ensures that content is accessible by everyone, regardless of disability or user device. You can [check your color combination with this demo site](http://jxnblk.com/colorable/demos/text/). For more information, read our [accessibility standards](../principles/accessibility).
|
||||
@ -49,15 +47,13 @@ These are our most common text with background color combinations. They don't al
|
||||
|
||||
You can set the color inheritance on an element by using the `text-inherit` class.
|
||||
|
||||
```html
|
||||
<div class="text-purple">
|
||||
This text is purple, <a href="#" class="text-inherit">including the link</a>
|
||||
</div>
|
||||
```html live
|
||||
<div class="text-purple">This text is purple, <a href="#" class="text-inherit">including the link</a></div>
|
||||
```
|
||||
|
||||
### Text on white background
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="text-blue mb-2">
|
||||
.text-blue on white
|
||||
</div>
|
||||
@ -74,7 +70,7 @@ You can set the color inheritance on an element by using the `text-inherit` clas
|
||||
.text-orange on white
|
||||
</div>
|
||||
<div class="text-orange-light mb-2">
|
||||
.text-orange-light on white
|
||||
.text-orange-light on white
|
||||
<span class="tooltipped tooltipped-n" aria-label="Does not meet accessibility standards">⚠️</span>
|
||||
</div>
|
||||
<div class="text-yellow mb-2">
|
||||
@ -90,10 +86,9 @@ You can set the color inheritance on an element by using the `text-inherit` clas
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
### Text on colored backgrounds
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="text-white bg-blue mb-2">
|
||||
.text-white on .bg-blue
|
||||
</div>
|
||||
@ -147,7 +142,7 @@ You can set the color inheritance on an element by using the `text-inherit` clas
|
||||
|
||||
You can make a background explicitly white (`#fff`) with the `bg-white` utility:
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="bg-gray-dark p-2">
|
||||
<span class="bg-white">.bg-white over .bg-gray-dark</span>
|
||||
</div>
|
||||
@ -159,25 +154,25 @@ Base link styles turn links blue and apply an underline on hover. You can overri
|
||||
|
||||
Use `link-gray` to turn the link color to `$text-gray` and remain hover on blue.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<a class="link-gray" href="#url">link-gray</a>
|
||||
```
|
||||
|
||||
Use `link-gray-dark` to turn the link color to `$text-gray-dark` and remain hover on blue.
|
||||
|
||||
```html
|
||||
<a class="link-gray-dark" href="#url">link-gray-dark</a>
|
||||
```html live
|
||||
<a class="link-gray-dark" href="#url">link-gray-dark</a>
|
||||
```
|
||||
|
||||
Use `.muted-link` to turn the link light gray in color, and blue on hover or focus with no underline.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<a class="muted-link" href="#url">muted-link</a>
|
||||
```
|
||||
|
||||
Use `link-hover-blue` to make any text color used with links to turn blue on hover. This is useful when you want only part of a link to turn blue on hover.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<a class="text-gray-dark no-underline" href="#url">
|
||||
A link with only part of it is <span class="link-hover-blue">blue on hover</span>.
|
||||
</a>
|
||||
@ -8,13 +8,13 @@ bundle: utilities
|
||||
|
||||
Details classes are created to enhance the native behaviors of `<details>`.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
|
||||
## Fullscreen click area
|
||||
|
||||
Use `.details-overlay` to expand the click area of `<summary>` to cover the full screen, so user can click anywhere on a page to close `<details>`.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<details class="details-overlay">
|
||||
<summary class="btn">More</summary>
|
||||
<div class="position-relative bg-white p-3 border" style="z-index: 100">Hidden text</div>
|
||||
@ -25,7 +25,7 @@ Use `.details-overlay` to expand the click area of `<summary>` to cover the full
|
||||
|
||||
Use `.details-overlay-dark` darken the click area overlay. Useful for modals.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<details class="details-overlay details-overlay-dark">
|
||||
<summary class="btn">More</summary>
|
||||
<div class="position-relative bg-white p-3 border" style="z-index: 100">Hidden text</div>
|
||||
@ -9,7 +9,7 @@ bundle: utilities
|
||||
|
||||
Flex utilities can be used to apply `flexbox` behaviors to elements by using utility classes.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
|
||||
## Required reading
|
||||
|
||||
@ -37,7 +37,7 @@ Use these classes to make an element lay out its content using the flexbox model
|
||||
|
||||
#### Example using `.d-flex`
|
||||
|
||||
```html
|
||||
```html live
|
||||
<!-- flex container -->
|
||||
<div class="border d-flex">
|
||||
<div class="p-5 border bg-gray-light">flex item 1</div>
|
||||
@ -48,7 +48,7 @@ Use these classes to make an element lay out its content using the flexbox model
|
||||
|
||||
#### Example using `.d-inline-flex`
|
||||
|
||||
```html
|
||||
```html live
|
||||
<!-- inline-flex container -->
|
||||
<div class="border d-inline-flex">
|
||||
<div class="p-5 border bg-gray-light">flex item 1</div>
|
||||
@ -79,7 +79,7 @@ Use these classes to define the orientation of the main axis (`row` or `column`)
|
||||
|
||||
#### Example using `.flex-column`
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="border d-flex flex-column">
|
||||
<div class="p-5 border bg-gray-light">Item 1</div>
|
||||
<div class="p-5 border bg-gray-light">Item 2</div>
|
||||
@ -91,7 +91,7 @@ Use these classes to define the orientation of the main axis (`row` or `column`)
|
||||
|
||||
This example uses the responsive variant `.flex-md-row` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="border d-flex flex-column flex-md-row">
|
||||
<div class="p-5 border bg-gray-light">Item 1</div>
|
||||
<div class="p-5 border bg-gray-light">Item 2</div>
|
||||
@ -103,7 +103,7 @@ This example uses the responsive variant `.flex-md-row` to override `.flex-colum
|
||||
|
||||
This example uses the responsive variant `.flex-md-row-reverse` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="border d-flex flex-column flex-md-row-reverse">
|
||||
<div class="p-5 border bg-gray-light">Item 1</div>
|
||||
<div class="p-5 border bg-gray-light">Item 2</div>
|
||||
@ -131,7 +131,7 @@ You can choose whether flex items are forced into a single line or wrapped onto
|
||||
|
||||
#### `flex-wrap` example
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="border d-flex flex-wrap">
|
||||
<div class="p-5 px-6 border bg-gray-light">1</div>
|
||||
<div class="p-5 px-6 border bg-gray-light">2</div>
|
||||
@ -147,7 +147,7 @@ You can choose whether flex items are forced into a single line or wrapped onto
|
||||
|
||||
#### `flex-nowrap` example
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="border d-flex flex-nowrap">
|
||||
<div class="p-5 px-6 border bg-gray-light">1</div>
|
||||
<div class="p-5 px-6 border bg-gray-light">2</div>
|
||||
@ -189,7 +189,7 @@ Use these classes to distribute space between and around flex items along the **
|
||||
|
||||
Use `.flex-justify-start` to align items to the start line. By default this will be on the left side of the container. If you are using `.flex-column`, the end line will be at the top of the container.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="border d-flex flex-justify-start">
|
||||
<div class="p-5 border bg-gray-light">1</div>
|
||||
<div class="p-5 border bg-gray-light">2</div>
|
||||
@ -201,7 +201,7 @@ Use `.flex-justify-start` to align items to the start line. By default this will
|
||||
|
||||
Use `.flex-justify-end` to align items to the end line. By default this will be on the right side of the container. If you are using `.flex-column`, the end line will be at the bottom of the container.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="border d-flex flex-justify-end">
|
||||
<div class="p-5 border bg-gray-light">1</div>
|
||||
<div class="p-5 border bg-gray-light">2</div>
|
||||
@ -213,7 +213,7 @@ Use `.flex-justify-end` to align items to the end line. By default this will be
|
||||
|
||||
Use `.flex-justify-center` to align items in the middle of the container.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="border d-flex flex-justify-center">
|
||||
<div class="p-5 border bg-gray-light">1</div>
|
||||
<div class="p-5 border bg-gray-light">2</div>
|
||||
@ -225,7 +225,7 @@ Use `.flex-justify-center` to align items in the middle of the container.
|
||||
|
||||
Use `.flex-justify-between` to distribute items evenly in the container. The first items will be on the start line and the last item will be on the end line.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="border d-flex flex-justify-between">
|
||||
<div class="p-5 border bg-gray-light">1</div>
|
||||
<div class="p-5 border bg-gray-light">2</div>
|
||||
@ -237,7 +237,7 @@ Use `.flex-justify-between` to distribute items evenly in the container. The fir
|
||||
|
||||
Use `.flex-justify-around` to distribute items evenly, with an equal amount of space around them. Visually the spaces won't look equal, since each item has the same unit of space around it. For example, the first item only has one unit of space between it and the start line, but it has two units of space between it and the next item.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="border d-flex flex-justify-around">
|
||||
<div class="p-5 border bg-gray-light">1</div>
|
||||
<div class="p-5 border bg-gray-light">2</div>
|
||||
@ -273,7 +273,7 @@ The cross axis runs perpendicular to the main axis. By default the main axis run
|
||||
|
||||
#### flex-items-start
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex flex-items-start">
|
||||
<div class="p-5 border bg-gray-light">1</div>
|
||||
<div class="p-5 border bg-gray-light">2</div>
|
||||
@ -284,7 +284,7 @@ The cross axis runs perpendicular to the main axis. By default the main axis run
|
||||
|
||||
#### flex-items-end
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex flex-items-end">
|
||||
<div class="p-5 border bg-gray-light">1</div>
|
||||
<div class="p-5 border bg-gray-light">2</div>
|
||||
@ -295,7 +295,7 @@ The cross axis runs perpendicular to the main axis. By default the main axis run
|
||||
|
||||
#### flex-items-center
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex flex-items-center">
|
||||
<div class="p-5 border bg-gray-light">1</div>
|
||||
<div class="p-5 border bg-gray-light">2</div>
|
||||
@ -308,7 +308,7 @@ The cross axis runs perpendicular to the main axis. By default the main axis run
|
||||
|
||||
With `.flex-items-baseline`, items will be aligned along their baselines even if they have different font sizes.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex flex-items-baseline">
|
||||
<div class="p-5 border bg-gray-light f1">1</div>
|
||||
<div class="p-5 border bg-gray-light">2</div>
|
||||
@ -319,7 +319,7 @@ With `.flex-items-baseline`, items will be aligned along their baselines even if
|
||||
|
||||
#### flex-items-stretch
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex flex-items-stretch">
|
||||
<div class="p-5 border bg-gray-light">1</div>
|
||||
<div class="p-5 border bg-gray-light">2</div>
|
||||
@ -356,7 +356,7 @@ When the main axis wraps, this creates multiple main axis lines and adds extra s
|
||||
|
||||
#### flex-content-start
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-start">
|
||||
<div class="p-5 border bg-gray-light">1</div>
|
||||
<div class="p-5 border bg-gray-light">2</div>
|
||||
@ -375,7 +375,7 @@ When the main axis wraps, this creates multiple main axis lines and adds extra s
|
||||
|
||||
#### flex-content-end
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-end">
|
||||
<div class="p-5 border bg-gray-light">1</div>
|
||||
<div class="p-5 border bg-gray-light">2</div>
|
||||
@ -394,7 +394,7 @@ When the main axis wraps, this creates multiple main axis lines and adds extra s
|
||||
|
||||
#### flex-content-center
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-center">
|
||||
<div class="p-5 border bg-gray-light">1</div>
|
||||
<div class="p-5 border bg-gray-light">2</div>
|
||||
@ -413,7 +413,7 @@ When the main axis wraps, this creates multiple main axis lines and adds extra s
|
||||
|
||||
#### flex-content-between
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-between">
|
||||
<div class="p-5 border bg-gray-light">1</div>
|
||||
<div class="p-5 border bg-gray-light">2</div>
|
||||
@ -432,7 +432,7 @@ When the main axis wraps, this creates multiple main axis lines and adds extra s
|
||||
|
||||
#### flex-content-around
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-around">
|
||||
<div class="p-5 border bg-gray-light">1</div>
|
||||
<div class="p-5 border bg-gray-light">2</div>
|
||||
@ -451,7 +451,7 @@ When the main axis wraps, this creates multiple main axis lines and adds extra s
|
||||
|
||||
#### flex-content-stretch
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-stretch">
|
||||
<div class="p-5 border bg-gray-light">1</div>
|
||||
<div class="p-5 border bg-gray-light">2</div>
|
||||
@ -486,7 +486,7 @@ Use this class to specify the ability of a flex item to alter its dimensions to
|
||||
|
||||
#### flex-auto
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="border d-flex">
|
||||
<div class="p-5 border bg-gray-light flex-auto">.flex-auto</div>
|
||||
<div class="p-5 border bg-gray-light flex-auto">.flex-auto</div>
|
||||
@ -496,7 +496,7 @@ Use this class to specify the ability of a flex item to alter its dimensions to
|
||||
|
||||
#### flex-grow-0
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="border d-flex">
|
||||
<div class="p-5 border bg-gray-light flex-auto">.flex-auto</div>
|
||||
<div class="p-5 border bg-gray-light flex-auto flex-grow-0">.flex-auto .flex-grow-0</div>
|
||||
@ -506,7 +506,7 @@ Use this class to specify the ability of a flex item to alter its dimensions to
|
||||
|
||||
#### flex-shrink-0
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="border d-flex" style="width: 450px">
|
||||
<div class="p-5 border bg-gray-light flex-auto">.flex-auto</div>
|
||||
<div class="p-5 border bg-gray-light flex-auto flex-shrink-0">.flex-auto .flex-shrink-0</div>
|
||||
@ -542,7 +542,7 @@ Use these classes to adjust the alignment of an individual flex item on the cros
|
||||
|
||||
#### flex-self-auto
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex">
|
||||
<div class="p-5 border bg-gray-light flex-self-auto">.flex-self-auto</div>
|
||||
<div class="p-5 border bg-gray-light"> </div>
|
||||
@ -552,7 +552,7 @@ Use these classes to adjust the alignment of an individual flex item on the cros
|
||||
|
||||
#### flex-self-start
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex">
|
||||
<div class="p-5 border bg-gray-light flex-self-start">.flex-self-start</div>
|
||||
<div class="p-5 border bg-gray-light"> </div>
|
||||
@ -562,7 +562,7 @@ Use these classes to adjust the alignment of an individual flex item on the cros
|
||||
|
||||
#### flex-self-end
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex">
|
||||
<div class="p-5 border bg-gray-light flex-self-end">.flex-self-end</div>
|
||||
<div class="p-5 border bg-gray-light"> </div>
|
||||
@ -572,7 +572,7 @@ Use these classes to adjust the alignment of an individual flex item on the cros
|
||||
|
||||
#### flex-self-center
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex">
|
||||
<div class="p-5 border bg-gray-light flex-self-center">.flex-self-center</div>
|
||||
<div class="p-5 border bg-gray-light"> </div>
|
||||
@ -582,7 +582,7 @@ Use these classes to adjust the alignment of an individual flex item on the cros
|
||||
|
||||
#### flex-self-baseline
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex flex-items-end">
|
||||
<div class="p-5 border bg-gray-light flex-self-baseline f4">.flex-self-baseline</div>
|
||||
<div class="p-5 border bg-gray-light f1">item</div>
|
||||
@ -592,7 +592,7 @@ Use these classes to adjust the alignment of an individual flex item on the cros
|
||||
|
||||
#### flex-self-stretch
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex flex-items-start">
|
||||
<div class="p-5 border bg-gray-light flex-self-stretch">.flex-self-stretch</div>
|
||||
<div class="p-5 border bg-gray-light"> </div>
|
||||
@ -623,7 +623,7 @@ Use these classes to change the order of flex items. Keep in mind that it won't
|
||||
|
||||
#### flex-order (1+2)
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="border d-flex">
|
||||
<div class="p-5 border bg-gray-light flex-order-2">1. .flex-order-2</div>
|
||||
<div class="p-5 border bg-gray-light">2.</div>
|
||||
@ -635,7 +635,7 @@ Use these classes to change the order of flex items. Keep in mind that it won't
|
||||
|
||||
Resize window to see the effect.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="border d-flex">
|
||||
<div class="p-5 border bg-gray-light flex-order-1 flex-md-order-none">1. .flex-order-1 .flex-md-order-none</div>
|
||||
<div class="p-5 border bg-gray-light">2.</div>
|
||||
@ -676,7 +676,7 @@ Each responsive style is applied to the specified breakpoint and up.
|
||||
|
||||
Mixing flex properties:
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex flex-items-start flex-md-items-center flex-justify-start flex-lg-justify-between">
|
||||
<div class="p-5 border bg-gray-light flex-md-self-stretch">.flex-self-stretch</div>
|
||||
<div class="p-5 border bg-gray-light"> </div>
|
||||
@ -686,7 +686,7 @@ Mixing flex properties:
|
||||
|
||||
Using the equal width, equal height utilities:
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="border d-flex">
|
||||
<div class="flex-md-item-equal p-3 border bg-gray-light">Stuff and things</div>
|
||||
<div class="flex-md-item-equal p-3 border bg-gray-light">More stuff<br> on multiple lines</div>
|
||||
@ -702,7 +702,7 @@ The flex utilities can be used to create a number of components. Here are some e
|
||||
|
||||
You can use flex utilities to make a simple media object, like this:
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="border d-flex flex-items-center p-4">
|
||||
<div class="p-5 border bg-gray-light">image</div>
|
||||
<p class="pl-4 m-0"><b>Body</b> Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
|
||||
@ -8,12 +8,12 @@ bundle: utilities
|
||||
|
||||
Change the document layout with display, float, alignment, and other utilities.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
|
||||
## Display
|
||||
Adjust the display of an element with `.d-block`, `.d-none`, `.d-inline`, `.d-inline-block`, `.d-table`, `.d-table-cell` utilities.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="d-inline border">
|
||||
.d-inline
|
||||
<div class="d-inline-block border">
|
||||
@ -56,7 +56,7 @@ element.classList.toggle('d-inline', visible)
|
||||
|
||||
There are known issues with using `display:table` and wrapping long strings, particularly in Firefox. You may need to use `table-fixed` on elements with `d-table` and apply column widths to table cells, which you can do with our [column width styles](/css/objects/grid#column-widths).
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="d-table table-fixed width-full">
|
||||
<div class="d-table-cell border">
|
||||
.d-table-cell
|
||||
@ -72,7 +72,7 @@ A selection of display utilities are able to be applied or changed per [breakpoi
|
||||
|
||||
In the following example, the `ul` element switches from `display: block` on mobile to `display: inline-block` at the `md` breakpoint, while the list items remain inline.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<h5 class="d-md-inline-block">.d-md-inline-block</h5>
|
||||
<ul class="d-md-inline-block border">
|
||||
<li class="d-inline border">.d-inline</li>
|
||||
@ -90,7 +90,7 @@ Hide utilities are able to be applied or changed per breakpoint using the follow
|
||||
| -lg | 768px—1011px |
|
||||
| -xl | 1012px and above |
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div>
|
||||
<h3>Potato update</h3>
|
||||
<span class="hide-sm hide-md">Opened by <a href="#url">broccolini</a></span>
|
||||
@ -120,7 +120,7 @@ Overflow utilities can also target x- and y-axes independently via:
|
||||
|
||||
## Floats
|
||||
Use `.float-left` and `.float-right` to set floats, and `.clearfix` to clear.
|
||||
```html
|
||||
```html live
|
||||
<div class="clearfix border border-gray">
|
||||
<div class="float-left border border-gray">
|
||||
.float-left
|
||||
@ -135,7 +135,7 @@ Float utilities can be applied or changed per [breakpoint](/css/objects/grid#bre
|
||||
|
||||
Each responsive float utility is applied to the specified breakpoint and up, using the following formula: `float-[breakpoint]-[property]`. For example: `float-md-left`. Remember to use `.clearfix` to clear.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="clearfix border border-gray">
|
||||
<div class="float-md-left border border-gray">
|
||||
.float-md-left
|
||||
@ -149,7 +149,7 @@ Each responsive float utility is applied to the specified breakpoint and up, usi
|
||||
## Alignment
|
||||
Adjust the alignment of an element with `.v-align-baseline`, `.v-align-top`, `.v-align-middle` or `.v-align-bottom`. The vertical-align property only applies to inline or table-cell boxes.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="d-table border border-gray">
|
||||
<div class="d-table-cell"><h1>Potatoes</h1></div>
|
||||
<div class="d-table-cell v-align-baseline">.v-align-baseline</div>
|
||||
@ -161,7 +161,7 @@ Adjust the alignment of an element with `.v-align-baseline`, `.v-align-top`, `.v
|
||||
|
||||
Use `v-align-text-top` or `v-align-text-bottom` to adjust the alignment of an element with the top or bottom of the parent element's font.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="border border-gray">
|
||||
<h1 class="mr-1">Potatoes
|
||||
<span class="f4 v-align-text-top mr-1">.v-align-text-top</span>
|
||||
@ -174,7 +174,7 @@ Use `v-align-text-top` or `v-align-text-bottom` to adjust the alignment of an el
|
||||
|
||||
Use `.width-fit` to set max-width 100%.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="one-fourth column">
|
||||
<img class="width-fit bg-gray" src="https://github.com/github.png" alt="width fitted octocat" />
|
||||
</div>
|
||||
@ -182,7 +182,7 @@ Use `.width-fit` to set max-width 100%.
|
||||
|
||||
Use `.width-full` to set width to 100%.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="d-table width-full">
|
||||
<div class="d-table-cell">
|
||||
<input class="form-control width-full" type="text" value="Full width form field" aria-label="Sample full width form field">
|
||||
@ -192,7 +192,7 @@ Use `.width-full` to set width to 100%.
|
||||
|
||||
Use `.width-auto` to reset width to `auto` (initial value). Typically used with **responsive variants**. Resize the window to see the effect in the example below.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="d-table width-full width-md-auto">
|
||||
<div class="d-table-cell">
|
||||
<input class="form-control width-full" type="text" value="Responsive width form field" aria-label="Sample full responsive width form field">
|
||||
@ -202,7 +202,7 @@ Use `.width-auto` to reset width to `auto` (initial value). Typically used with
|
||||
|
||||
Use `.height-fit` to set max-height 100%.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="one-fourth column" style="height: 100px; overflow: auto;">
|
||||
<div class="p-3 height-fit border">
|
||||
Bacon ipsum dolor amet meatball flank beef tail pig boudin ham hock chicken capicola. Shoulder ham spare ribs turducken pork tongue. Bresaola corned beef sausage jowl ribeye kielbasa tenderloin andouille leberkas tongue. Ribeye tri-tip tenderloin pig, chuck ground round chicken tongue corned beef biltong.
|
||||
@ -230,7 +230,7 @@ Use `.position-relative` to create a new stacking context.
|
||||
|
||||
_Note how the other elements are displayed as if "Two" were in its normal position and taking up space._
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="d-inline-block float-left bg-blue text-white m-3" style="width:100px; height:100px;">
|
||||
One
|
||||
</div>
|
||||
@ -247,7 +247,7 @@ _Note how the other elements are displayed as if "Two" were in its normal positi
|
||||
|
||||
Use `.position-absolute` to take elements out of the normal document flow.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="position-relative" style="height:116px;">
|
||||
<button type="button" class="btn mb-1">Button</button>
|
||||
<div class="position-absolute border border-gray p-2">
|
||||
@ -261,7 +261,7 @@ Use `.position-fixed` to position an element relative to the viewport. **Be care
|
||||
|
||||
_Note: This example is shown in an `<iframe>` and therefore will not be positioned to the viewport of this page._
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div style="height: 64px;">
|
||||
<div class="position-fixed right-0 bottom-0 bg-gray-light border p-2">
|
||||
.position-fixed
|
||||
@ -271,7 +271,7 @@ _Note: This example is shown in an `<iframe>` and therefore will not be position
|
||||
|
||||
Use `top-0`, `right-0`, `bottom-0`, and `left-0` with `position-absolute`, `position-fixed`, or `position-relative` to further specify an elements position.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div style="height: 64px;">
|
||||
<div class="border position-absolute top-0 left-0">
|
||||
.top-0 .left-0
|
||||
@ -292,7 +292,7 @@ To fill an entire width or height, use opposing directions.
|
||||
|
||||
_Note: fixed positioning has been disabled here for demonstration only._
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="position-fixed left-0 right-0 p-3 bg-gray-dark text-white">
|
||||
.position-fixed .left-0 .right-0
|
||||
</div>
|
||||
@ -302,7 +302,7 @@ _Note: fixed positioning has been disabled here for demonstration only._
|
||||
|
||||
Position utilities can be applied or changed per breakpoint in responsive layouts. Each responsive position utility is applied to the specified breakpoint and up, using the following formula: `position-[breakpoint]-[property]`. For example: `position-md-absolute`.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div style="height: 64px;">
|
||||
<div class="border position-md-absolute top-0 right-0">
|
||||
.position-md-absolute .top-0 .right-0
|
||||
@ -314,7 +314,7 @@ Position utilities can be applied or changed per breakpoint in responsive layout
|
||||
|
||||
Use `.sr-only` to position an element outside of the viewport for screen reader access only. **Even though the element can't be seen, make sure it still has a sensible tab order.**
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="js-details-container Details">
|
||||
<button type="button" class="btn">Tab once from this button, and press enter</button>
|
||||
<button type="button" class="sr-only js-details-target">
|
||||
@ -330,7 +330,7 @@ Use `.sr-only` to position an element outside of the viewport for screen reader
|
||||
|
||||
Create a media object with utilities.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="clearfix p-3 border">
|
||||
<div class="float-left p-3 mr-3 bg-gray">
|
||||
Image
|
||||
@ -342,7 +342,7 @@ Create a media object with utilities.
|
||||
```
|
||||
Create a double-sided media object for a container with a flexible center.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="clearfix p-3 border border-gray">
|
||||
<div class="float-left p-3 mr-3 bg-gray">
|
||||
Image
|
||||
@ -8,7 +8,7 @@ bundle: utilities
|
||||
|
||||
Margin utilities are based on a global [spacing scale](/css/support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that share the same properties, and allows to achieve many different page layouts using the same styles.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
|
||||
## Naming convention
|
||||
|
||||
@ -38,7 +38,7 @@ _**Note:** The blue in the examples represents the element, and the orange repre
|
||||
|
||||
Use uniform spacing utilities to apply equal margin to all sides of an element. These utilities can change or override default margins, and can be used with a spacing scale from 0-6.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="margin-orange d-inline-block">
|
||||
<div class="d-inline-block block-blue m-0">.m-0</div>
|
||||
</div>
|
||||
@ -66,7 +66,7 @@ Use uniform spacing utilities to apply equal margin to all sides of an element.
|
||||
|
||||
Use directional utilities to apply margin to an individual side, or the X and Y axis of an element. Directional utilities can change or override default margins, and can be used with a spacing scale of 0-6.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="margin-orange d-inline-block">
|
||||
<div class="d-inline-block block-blue mt-3">.mt-3</div>
|
||||
</div>
|
||||
@ -91,7 +91,7 @@ Use directional utilities to apply margin to an individual side, or the X and Y
|
||||
|
||||
Use `mx-auto`to center block elements with a set width.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="margin-orange">
|
||||
<div class="block-blue mx-auto text-center" style="width: 5rem;">.mx-auto</div>
|
||||
</div>
|
||||
@ -100,7 +100,7 @@ Use `mx-auto`to center block elements with a set width.
|
||||
## Reset margins
|
||||
Reset margins built into typography elements or other components with `m-0`, `mt-0`, `mr-0`, `mb-0`, `ml-0`, `mx-0`, and `my-0`.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<p class="mb-0 block-blue">No bottom margin on this paragraph.</p>
|
||||
```
|
||||
|
||||
@ -108,7 +108,7 @@ Reset margins built into typography elements or other components with `m-0`, `mt
|
||||
|
||||
All margin utilities, except `mx-auto`, can be adjusted per [breakpoint](/css/objects/grid#breakpoints) using the following formula: `m[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="d-inline-block margin-orange">
|
||||
<div class="mx-sm-2 mx-lg-4 d-inline-block block-blue">
|
||||
.mx-sm-2 .mx-lg-4
|
||||
@ -120,7 +120,7 @@ All margin utilities, except `mx-auto`, can be adjusted per [breakpoint](/css/ob
|
||||
|
||||
You can add negative margins to the top, right, bottom, or left of an item by adding a negative margin utility. The formula for this is: `m[direction]-n[spacer]`. This also works responsively, with the following formula: `m[direction]-[breakpoint]-n[spacer]`.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="d-inline-block margin-orange p-3">
|
||||
<div class="d-inline-block block-blue mt-n4 mr-lg-n4">
|
||||
.mt-n4 .mr-lg-n6
|
||||
@ -17,6 +17,6 @@ Filter utility classes can be applied to divs or images to apply visual effects.
|
||||
|
||||
Applying `.grayscale` to an element will remove all of its colors, and make it render in black and white.
|
||||
|
||||
```html
|
||||
<img src="https://github.com/probot.png" class="img-responsive grayscale" alt="">
|
||||
```html live
|
||||
<img src="https://github.com/probot.png" class="img-responsive grayscale" alt="" />
|
||||
```
|
||||
@ -9,7 +9,7 @@ bundle: marketing-utilities
|
||||
|
||||
Marketing layout utilities build on top of [primer-core utilities](/css/utilities/layout#position), adding the option of responsive positioning.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
|
||||
## Position elements with spacing utilities
|
||||
|
||||
@ -19,7 +19,7 @@ Use these with `.position-absolute` to position decorative assets and shapes on
|
||||
|
||||
In an effort to reduce the size of our CSS, responsive breakpoints are only supported for `md` and `lg` breakpoints. **There is no support for `sm` and `xl` breakpoints.**
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="position-relative p-6 bg-gray">
|
||||
<div class="border bg-white position-absolute top-2">.top-2</div>
|
||||
<div class="border bg-white position-absolute position-lg-static right-md-4">.right-md-4</div>
|
||||
@ -31,7 +31,7 @@ In an effort to reduce the size of our CSS, responsive breakpoints are only supp
|
||||
|
||||
Using column offset classes can pull a div over X number of columns to the left. Negative offsets are available in [spacings from 1](../support/spacing/#spacing-scale) [to 7](../support/marketing-variables/).
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="mx-auto border" style="width: 300px">
|
||||
<div class="offset-n1 col-4 border p-3">.offset-n1</div>
|
||||
<div class="offset-n2 col-4 border p-3">.offset-n2</div>
|
||||
@ -15,7 +15,7 @@ Marketing margin utilities extend [core margin utilities](/css/support/spacing)
|
||||
|
||||
Use marketing margin utilities to apply margin to top, bottom, or both y-axis of an element. These utilities can change or override default margins, and can be used with a spacing scale of 7-12.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="margin-orange d-inline-block">
|
||||
<div class="d-inline-block block-blue mt-7">.mt-7</div>
|
||||
</div>
|
||||
@ -31,7 +31,7 @@ Use marketing margin utilities to apply margin to top, bottom, or both y-axis of
|
||||
|
||||
All marketing margin utilities can be adjusted per [breakpoint](/css/objects/grid#breakpoints) using the following formula: `m[y-direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="d-inline-block margin-orange">
|
||||
<div class="my-sm-7 mb-lg-9 d-inline-block block-blue">
|
||||
.my-sm-7 .mb-lg-9
|
||||
@ -14,7 +14,7 @@ Marketing padding utilities extend [core margin utilities](/css/utilities/margin
|
||||
|
||||
Use marketing padding utilities to apply padding to top, right, bottom, left, x-axis, or y axis of an element. These utilities can change or override default padding, and can be used with a spacing scale of 7-12.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="margin-orange d-inline-block">
|
||||
<div class="d-inline-block block-blue pt-7">.pt-7</div>
|
||||
</div>
|
||||
@ -39,7 +39,7 @@ Use marketing padding utilities to apply padding to top, right, bottom, left, x-
|
||||
|
||||
All marketing padding utilities can be adjusted per [breakpoint](/css/objects/grid#breakpoints) using the following formula: `p[y-direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="d-inline-block margin-orange">
|
||||
<div class="py-sm-7 pb-lg-9 d-inline-block block-blue">
|
||||
.py-sm-7 .pb-lg-9
|
||||
@ -1,21 +1,18 @@
|
||||
---
|
||||
title: Marketing Typography
|
||||
path: utilities/marketing-type
|
||||
status: New Release
|
||||
status: New
|
||||
source: 'https://github.com/primer/css/tree/master/src/marketing/type'
|
||||
bundle: marketing-type
|
||||
---
|
||||
|
||||
|
||||
The typography for our marketing pages differs slightly from what is in Primer CSS's core--it is responsive, on a slightly different scale, and headlines are in a different font (Roboto).
|
||||
|
||||
|
||||
## Heading Utilities
|
||||
|
||||
Use `.h000-mktg` – `.h6-mktg` to change an element's font, size, and weight on marketing pages.
|
||||
|
||||
```html title="Heading Utilities"
|
||||
|
||||
```html live title="Heading Utilities"
|
||||
<p class="h000-mktg">Heading 000</p>
|
||||
<p class="h00-mktg">Heading 00</p>
|
||||
<p class="h0-mktg">Heading 0</p>
|
||||
@ -25,17 +22,17 @@ Use `.h000-mktg` – `.h6-mktg` to change an element's font, size, and weight on
|
||||
<p class="h4-mktg">Heading 4</p>
|
||||
<p class="h5-mktg">Heading 5</p>
|
||||
<p class="h6-mktg">Heading 6</p>
|
||||
|
||||
```
|
||||
|
||||
## Typographic Utilities
|
||||
|
||||
These utilities are meant to be used in addition to Primer CSS's core utilities.
|
||||
|
||||
```html title="Typographic Utilities"
|
||||
|
||||
<p class="lead-mktg text-gray">I'm a lead paragraph. Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.</p>
|
||||
```html live title="Typographic Utilities"
|
||||
<p class="lead-mktg text-gray">
|
||||
I'm a lead paragraph. Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round
|
||||
prosciutto hamburger porchetta sausage alcatra tail.
|
||||
</p>
|
||||
|
||||
<p class="pullquote">I'm a pullquote. Someone said these words in real life, and now they're on the internet</p>
|
||||
|
||||
```
|
||||
@ -8,7 +8,7 @@ bundle: utilities
|
||||
|
||||
Padding utilities are based on a global [spacing scale](/css/support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that could share the same properties, and allows to achieve many different page layouts using the same styles.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
|
||||
## Shorthand
|
||||
|
||||
@ -37,7 +37,7 @@ _**Note:** The blue in the examples below represents the element, and the green
|
||||
|
||||
Use uniform spacing utilities to apply equal padding to all sides of an element. These utilities can be used with a spacing scale from 0-6.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="padding-green d-inline-block p-0">
|
||||
<div class="d-inline-block block-blue">.p-0</div>
|
||||
</div>
|
||||
@ -65,7 +65,7 @@ Use uniform spacing utilities to apply equal padding to all sides of an element.
|
||||
|
||||
Use directional utilities to apply padding to an individual side, or the X and Y axis of an element. Directional utilities can change or override default padding, and can be used with a spacing scale of 0-6.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="padding-green d-inline-block pt-3">
|
||||
<div class="d-inline-block block-blue">.pt-3</div>
|
||||
</div>
|
||||
@ -90,7 +90,7 @@ Use directional utilities to apply padding to an individual side, or the X and Y
|
||||
|
||||
All padding utilities can be adjusted per [breakpoint](/css/support/breakpoints) using the following formula: <br /> `p-[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="px-sm-2 px-lg-4 d-inline-block padding-green">
|
||||
<div class="d-inline-block block-blue">
|
||||
.px-sm-2 .px-lg-4
|
||||
@ -104,7 +104,7 @@ All padding utilities can be adjusted per [breakpoint](/css/support/breakpoints)
|
||||
|
||||
It is intended to be used with [container styles](/css/objects/grid#containers)
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="container-lg p-responsive">
|
||||
<div class="border">
|
||||
.container-lg .p-responsive
|
||||
@ -8,7 +8,7 @@ bundle: utilities
|
||||
|
||||
Type utilities are designed to work in combination with line-height utilities so as to result in more sensible numbers wherever possible. These also exist as [variables](/css/support/typography#typography-variables) that you can use in components or custom CSS.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
|
||||
Font sizes are smaller on mobile and scale up at the `md` [breakpoint](/css/support/breakpoints) to be larger on desktop.
|
||||
|
||||
@ -28,7 +28,7 @@ Font sizes are smaller on mobile and scale up at the `md` [breakpoint](/css/supp
|
||||
|
||||
Use `.h1` – `.h6` to change an elements font size and weight to match our heading styles.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<p class="h1">Pizza 1</p>
|
||||
<p class="h2">Pizza 2</p>
|
||||
<p class="h3">Pizza 3</p>
|
||||
@ -39,7 +39,7 @@ Use `.h1` – `.h6` to change an elements font size and weight to match our head
|
||||
|
||||
These are particularly useful for changing the visual appearance while keeping the markup semantically correct. Be sure you keep the hierarchy appropriate for the page.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<h2 class="h1">Looks like a heading 1, semantically a heading 2</h2>
|
||||
```
|
||||
|
||||
@ -47,7 +47,7 @@ These are particularly useful for changing the visual appearance while keeping t
|
||||
|
||||
Use `.f1` – `.f6` to change an elements font size while keeping inline with our type scale.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<p class="f1">Focaccia</p>
|
||||
<p class="f2">Focaccia</p>
|
||||
<p class="f3">Focaccia</p>
|
||||
@ -58,7 +58,7 @@ Use `.f1` – `.f6` to change an elements font size while keeping inline with ou
|
||||
|
||||
Lighter font-weight utilities are available in a limited range. Lighter font-weights reduce the legibility of text, particularly at small font sizes, so the scale only goes down to `f3` at 20px. The larger sizes`f0` and `f00` allow for lighter and larger type that is in keeping with our marketing styles.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<h1 class="f00-light">Potato chips</h1>
|
||||
<h1 class="f0-light">Potato chips</h1>
|
||||
<h1 class="f1-light">Potato chips</h1>
|
||||
@ -69,7 +69,7 @@ Lighter font-weight utilities are available in a limited range. Lighter font-wei
|
||||
## Line height styles
|
||||
Change the line height density with these utilities.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<p class="lh-default">
|
||||
Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail. Jowl chuck biltong flank meatball, beef short ribs. Jowl tenderloin ground round, short loin tri-tip ribeye picanha filet mignon pig chicken kielbasa t-bone fatback. Beef ribs meatball chicken corned beef salami.
|
||||
</p>
|
||||
@ -86,7 +86,7 @@ The `lh-0` utility class sets `line-height: 0 !important`, and can be used to re
|
||||
## Typographic styles
|
||||
Change the font weight, styles, and alignment with these utilities.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<p class="text-normal">Normal</p>
|
||||
<p class="text-italic">Italic</p>
|
||||
<p class="text-bold">Bold</p>
|
||||
@ -107,7 +107,7 @@ Change the font weight, styles, and alignment with these utilities.
|
||||
|
||||
Use text alignment utilities to left align, center, or right align text.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<p class="text-left">Left align</p>
|
||||
<p class="text-center">Center</p>
|
||||
<p class="text-right">Right align</p>
|
||||
@ -116,7 +116,7 @@ Change the font weight, styles, and alignment with these utilities.
|
||||
|
||||
Use the following formula to make a text alignment utility responsive: `.text-[breakpoint]-[alignment]`
|
||||
|
||||
```html
|
||||
```html live
|
||||
<p class="text-left text-sm-center text-lg-right">Left in a small viewport, centered in mid-sized viewports, and right aligned in larger viewports</p>
|
||||
```
|
||||
|
||||
@ -124,7 +124,7 @@ Use the following formula to make a text alignment utility responsive: `.text-[b
|
||||
|
||||
Remove bullets from an unordered list or numbers from an ordered list by applying `.list-style-none` to the `<ul>`.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<ul class="list-style-none">
|
||||
<li>First list item</li>
|
||||
<li>Second list item</li>
|
||||
@ -136,7 +136,7 @@ Remove bullets from an unordered list or numbers from an ordered list by applyin
|
||||
|
||||
Text shadows can be used to help readability and to add some depth on colored backgrounds.
|
||||
|
||||
```html
|
||||
```html live
|
||||
<div class="bg-gray-dark p-5">
|
||||
<h3 class="text-white text-shadow-dark">.text-shadow-dark helps white text stand out on dark or photographic backgrounds</h3>
|
||||
</div>
|
||||
31
docs/gatsby-config.js
Normal file
31
docs/gatsby-config.js
Normal file
@ -0,0 +1,31 @@
|
||||
module.exports = {
|
||||
siteMetadata: {
|
||||
title: 'Primer CSS',
|
||||
shortName: 'CSS',
|
||||
description: "CSS for GitHub's Primer design system",
|
||||
imageUrl: 'https://user-images.githubusercontent.com/586552/47590375-121cad80-d93a-11e8-89f2-a1cf108e0548.png'
|
||||
},
|
||||
pathPrefix: '/css',
|
||||
plugins: [
|
||||
{
|
||||
resolve: '@primer/gatsby-theme-doctocat',
|
||||
options: {
|
||||
repoRootPath: '..'
|
||||
}
|
||||
},
|
||||
'gatsby-plugin-sass',
|
||||
{
|
||||
resolve: 'gatsby-plugin-svgr',
|
||||
options: {
|
||||
svgo: false
|
||||
}
|
||||
},
|
||||
{
|
||||
resolve: 'gatsby-plugin-google-analytics',
|
||||
options: {
|
||||
trackingId: 'UA-126681523-2',
|
||||
anonymize: true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
export * from './components'
|
||||
export * from './utils'
|
||||
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 73.15 55.6" class="mb-3" width="72"><title>styles</title><path d="M70.1 55.6H42.55a3 3 0 0 1-3-3v-9.46a1 1 0 0 1 2 0v9.46a1 1 0 0 0 1 1h27.6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1h-27.6a1 1 0 0 0-1 1v10.8a1 1 0 1 1-2 0V3a3 3 0 0 1 3-3h27.6a3 3 0 0 1 3 3v49.6a3 3 0 0 1-3 3h-.05zM30.55 47.8H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h27.55a3 3 0 0 1 3 3v10.8a1 1 0 0 1-2 0V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v41.8a1 1 0 0 0 1 1h27.55a1 1 0 0 0 1-1v-1.62a1 1 0 0 1 2 0v1.62a3 3 0 0 1-3 3z" fill="#79b8ff"></path><path fill="#79b8ff" d="M40.5 8.6h31v2h-31zM1.6 8.6h31v2h-31z"></path><path d="M62.3 38.15H21.9a3 3 0 0 1-3-3v-13.9a3 3 0 0 1 3-3h40.4a3 3 0 0 1 3 3v13.9a3 3 0 0 1-3 3zm-40.4-17.9a1 1 0 0 0-1 1v13.9a1 1 0 0 0 1 1h40.4a1 1 0 0 0 1-1v-13.9a1 1 0 0 0-1-1H21.9z" fill="#2088ff"></path><path d="M31.3 32.25h-3.64a2.39 2.39 0 0 1-2.11-2.3v-3.5a2.33 2.33 0 0 1 2.3-2.3h3.5a2.33 2.33 0 0 1 2.2 2.3v3.5a2.33 2.33 0 0 1-2.25 2.3zm-3.41-2h3.41a.32.32 0 0 0 .3-.3v-3.5a.32.32 0 0 0-.3-.3h-3.5a.32.32 0 0 0-.3.3v3.5a.43.43 0 0 0 .39.3zM57.1 29.15H38.7a1 1 0 0 1 0-2h18.4a1 1 0 0 1 0 2zM15.92 29.22a1 1 0 0 1-.45-.11l-.47-.2a6.86 6.86 0 0 1-.66-.26 1 1 0 0 1 .89-1.79l.47.2a6.86 6.86 0 0 1 .66.28 1 1 0 0 1-.44 1.88zM11.95 26.76a1 1 0 0 1-.71-.29 12.44 12.44 0 0 1-1.69-2.06 1 1 0 0 1 1.68-1.08A10.39 10.39 0 0 0 12.65 25a1 1 0 0 1-.7 1.76zM9.29 21.83a1 1 0 0 1-1-.76 6.13 6.13 0 0 1-.12-1.47 1 1 0 0 1 2 0 4.78 4.78 0 0 0 .06 1 1 1 0 0 1-.74 1.2z" fill="#2088ff"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 94 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 53.46 55.1" class="mb-3" width="60"><title>objects</title><path d="M38.1 41.9L2 41.8a2.08 2.08 0 0 1-2-2L.1 2a2 2 0 0 1 2-2l36.1.1a2 2 0 0 1 2 2l-.1 37.8a2 2 0 0 1-2 2zM2 39.75l36.1.16.1-37.8L2.1 2z" fill="#2088ff"></path><path d="M44.9 48.5L8 48.4a1 1 0 1 1 0-2l36.8.1.1-38.4a1 1 0 0 1 1-1 1 1 0 0 1 1 1l-.1 38.5a1.9 1.9 0 0 1-1.9 1.9z" fill="#79b8ff"></path><path d="M51.5 55.1L14.56 55a1 1 0 1 1 0-2l36.8.1.1-38.4a1 1 0 0 1 1-1 1 1 0 0 1 1 1l-.06 38.49a1.9 1.9 0 0 1-1.89 1.91z" fill="#79b8ff"></path><path d="M29.7 32.6H10.5a1 1 0 1 1 0-2h19.2a1 1 0 0 1 0 2zM29.7 25.5H10.5a1 1 0 1 1 0-2h19.2a1 1 0 0 1 0 2zM29.7 18.4H10.5a1 1 0 1 1 0-2h19.2a1 1 0 1 1 0 2zM20.1 11.3h-9.6a1 1 0 1 1 0-2h9.6a1 1 0 1 1 0 2z" fill="#2088ff"></path></svg>
|
||||
|
Before Width: | Height: | Size: 812 B |
@ -1,18 +0,0 @@
|
||||
import React from 'react'
|
||||
import dynamic from 'next/dynamic'
|
||||
import animation from './PrimerCSSAnimation.json'
|
||||
|
||||
const ReactBodymovin = dynamic(() => import('react-bodymovin'), {
|
||||
ssr: false
|
||||
})
|
||||
|
||||
const bodymovinOptions = {
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
prerender: true,
|
||||
animationData: animation
|
||||
}
|
||||
|
||||
const PrimerCSSAnimation = props => <ReactBodymovin options={bodymovinOptions} {...props} />
|
||||
|
||||
export default PrimerCSSAnimation
|
||||
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 58.5 58.7" class="mb-3" width="62"><title>utilities</title><path d="M41.6 15.6l-1.4-1.4a1 1 0 1 0-1.4 1.4l1.4 1.4a1 1 0 0 0 1.4 0 1 1 0 0 0 0-1.4zM33.9 7.9a1 1 0 1 0-1.4 1.4l1.4 1.4a1 1 0 0 0 1.4 0 1 1 0 0 0 0-1.4zM27.9 26.6a1 1 0 0 0-1.4 1.4l1.4 1.4a1 1 0 0 0 1.4 0 1 1 0 0 0 0-1.4zM21.6 20.2a1 1 0 0 0-1.4 1.4l1.4 1.4a1 1 0 0 0 1.4 0 1 1 0 0 0 0-1.4zM15.4 38.7a1 1 0 0 0-1.4 1.4l1.4 1.4a1 1 0 0 0 1.4 0 1 1 0 0 0 0-1.4zM9.3 32.7a1 1 0 1 0-1.4 1.4l1.4 1.4a1 1 0 0 0 1.4 0 1 1 0 0 0 0-1.4z" fill="#6bbcff"></path><path d="M26.6 13.4V1a.94.94 0 0 0-1-1H1a.94.94 0 0 0-1 1v24.8a.94.94 0 0 0 1 1h12.4a.94.94 0 0 0 1-1V14.4h11.2a1.08 1.08 0 0 0 1-1zm-2-1H13.4a.94.94 0 0 0-1 1v11.4H2V2h22.6v10.4zM58.2 19.9a.91.91 0 0 0-.7-.3H45.1a.94.94 0 0 0-1 1v11.3H33.9a1.9 1.9 0 0 0-1.9 1.9v10.6H21.5a1.9 1.9 0 0 0-1.9 1.9v10.5a1.9 1.9 0 0 0 1.9 1.9h36a.94.94 0 0 0 1-1V20.6a.91.91 0 0 0-.3-.7zm-1.7 1.7v22.8H46.1V21.7zM44.1 34v21.1L33.9 44.9 33.8 34h10.3zM21.5 46.4h11l10.4 10.4H21.5V46.4zm24.6 10.3V46.4h10.4v10.4z" fill="#008fff"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@ -1,184 +0,0 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import {BorderBox, Box, Flex, Heading, Link, Text} from '@primer/components'
|
||||
import {getAssetPath} from '../utils'
|
||||
import UtilitiesImage from './UtilitiesImage.svg'
|
||||
import ObjectsImage from './ObjectsImage.svg'
|
||||
import ComponentsImage from './ComponentsImage.svg'
|
||||
import SpacingImage from './SpacingImage.svg'
|
||||
import ColorImage from './ColorImage.svg'
|
||||
|
||||
export {default as PrimerCSSAnimation} from './PrimerCSSAnimation.js'
|
||||
|
||||
const OverviewTitle = props => <Heading fontSize={3} fontWeight="normal" as="div" {...props} />
|
||||
const OverviewText = props => <Text fontSize={1} {...props} />
|
||||
|
||||
export function StylesOverview(props) {
|
||||
const styleTypes = [
|
||||
{
|
||||
name: 'Utilities',
|
||||
desc: 'Single purpose, immutable styles, that do one thing well.',
|
||||
image: UtilitiesImage
|
||||
},
|
||||
{
|
||||
name: 'Objects',
|
||||
desc: 'Scaffolding for common page and content layouts.',
|
||||
image: ObjectsImage
|
||||
},
|
||||
{
|
||||
name: 'Components',
|
||||
desc: 'Abstracted patterns for frequently used visual styles.',
|
||||
image: ComponentsImage
|
||||
}
|
||||
]
|
||||
return (
|
||||
<Flex {...props}>
|
||||
{styleTypes.map(({name, desc, image}) => (
|
||||
<Flex.Item as={Text} textAlign="center" mx={4} key={name}>
|
||||
<Image src={image} height={90} mb={2} />
|
||||
<OverviewTitle>{name}</OverviewTitle>
|
||||
<OverviewText>{desc}</OverviewText>
|
||||
</Flex.Item>
|
||||
))}
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
|
||||
StylesOverview.propTypes = {
|
||||
types: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
name: PropTypes.node,
|
||||
desc: PropTypes.node,
|
||||
image: PropTypes.func
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
export function PrimitivesOverview(props) {
|
||||
const primitiveTypes = [
|
||||
{
|
||||
name: 'Highly composable spacing scale',
|
||||
desc: `The base-8 spacing scale is highly composable and works with the density of GitHub’s content. Margin and padding spacers bring consistency to vertical and horizontal rhythm, while remaining flexible so you can tweak layouts to work for every context.`,
|
||||
image: SpacingImage
|
||||
},
|
||||
{
|
||||
name: 'Customizable typography',
|
||||
desc: `Font size and line-height options work together to result in more sensible numbers. Font styles come in a range of weights and sizes so that we can style appropriately for content and readability. Type utilities allow us to change the visual styles while keeping markup semantic.`,
|
||||
image: getAssetPath('typography.png')
|
||||
},
|
||||
{
|
||||
name: 'Meaningful color',
|
||||
desc: `The color system allows us to add meaningful signals to content and interactions. Color variables and utilities offer thematic styling options without being tied to structure. Text and background colors come in a range of accessible combinations to ensure we build inclusive interfaces.`,
|
||||
image: ColorImage
|
||||
}
|
||||
]
|
||||
return (
|
||||
<Box width={['auto', 'auto', 10 / 12]} mx="auto" {...props}>
|
||||
{primitiveTypes.map(({name, desc, image}) => (
|
||||
<Flex key={name} my={6} alignItems="center">
|
||||
<Box width={300} mr={6} py={2}>
|
||||
<Image src={image} />
|
||||
</Box>
|
||||
<Box>
|
||||
<OverviewTitle>{name}</OverviewTitle>
|
||||
<OverviewText>{desc}</OverviewText>
|
||||
</Box>
|
||||
</Flex>
|
||||
))}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
PrimitivesOverview.propTypes = {
|
||||
types: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
name: PropTypes.node,
|
||||
desc: PropTypes.node,
|
||||
image: PropTypes.func
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
function Image(props) {
|
||||
const {src, ...rest} = props
|
||||
switch (typeof src) {
|
||||
case 'string':
|
||||
return <Box as="img" width="100%" alt="" {...props} />
|
||||
case 'function':
|
||||
return <Box as={src} {...rest} />
|
||||
default:
|
||||
throw new Error(`Unrecognized Image.src type: "${typeof src}"`)
|
||||
}
|
||||
}
|
||||
|
||||
export function PrimerPackageBox({count, ...rest}) {
|
||||
return (
|
||||
<Flex justifyContent="space-around" {...rest}>
|
||||
<BorderBox bg="gray.1" width="auto" px={6} py={3} my={4}>
|
||||
<Flex alignItems="center" justifyContent="space-around">
|
||||
<Text fontSize={3} fontWeight="bold" mb={2} textAlign="center">
|
||||
<Link href={bundleSourceURL('primer')} color="inherit">
|
||||
Primer
|
||||
</Link>
|
||||
</Text>
|
||||
</Flex>
|
||||
{count ? (
|
||||
<Text as="div" textAlign="center">
|
||||
This package includes all {count} Primer modules.
|
||||
</Text>
|
||||
) : null}
|
||||
</BorderBox>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
|
||||
PrimerPackageBox.propTypes = {
|
||||
count: PropTypes.number
|
||||
}
|
||||
|
||||
export function MetaPackageBox({children, meta = {}, title, ...rest}) {
|
||||
const {name, imports = []} = meta
|
||||
const bundles = imports.filter(bundle => !/support/.test(bundle))
|
||||
return (
|
||||
<Flex.Item as={BorderBox} bg="white" maxWidth={220} {...rest}>
|
||||
<BorderBox bg="gray.1" border={0} borderBottom={1} borderRadius={0} px={3} py={2}>
|
||||
<Heading as="div" fontSize={2}>
|
||||
<Link href={bundleSourceURL(name)} color="inherit">
|
||||
{title}
|
||||
</Link>
|
||||
</Heading>
|
||||
</BorderBox>
|
||||
<Text as="div" fontSize={1} p={3}>
|
||||
{children}
|
||||
<Text as="div" fontWeight="bold" mt={4} mb={2}>
|
||||
{bundles.length} bundles:
|
||||
</Text>
|
||||
<ul className="list-style-none pl-0">
|
||||
{bundles.map(bundle => (
|
||||
<li key={bundle}>
|
||||
{/* TODO: link to the actual page! */}
|
||||
<Link href={bundleURL(bundle)}>{bundle}</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Text>
|
||||
</Flex.Item>
|
||||
)
|
||||
}
|
||||
|
||||
MetaPackageBox.propTypes = {
|
||||
meta: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
imports: PropTypes.arrayOf(PropTypes.string)
|
||||
}),
|
||||
title: PropTypes.node
|
||||
}
|
||||
|
||||
function bundleURL(name) {
|
||||
return `/css/bundle?name=${name}`
|
||||
}
|
||||
|
||||
function bundleSourceURL(name, branch = 'master') {
|
||||
// TODO get this from Metalsmith or page metadata???
|
||||
return `https://github.com/primer/css/blob/${branch}/src/${name}`
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
import React from 'react'
|
||||
import {Link} from '@primer/components'
|
||||
import {MarkdownHeading} from '@primer/blueprints'
|
||||
import {CodeExample} from '@primer/blueprints/next-components'
|
||||
|
||||
export const H1 = props => <MarkdownHeading {...props} />
|
||||
export const H2 = props => <MarkdownHeading as="h2" {...props} />
|
||||
export const H3 = props => <MarkdownHeading as="h3" {...props} />
|
||||
export const H4 = props => <MarkdownHeading as="h4" {...props} />
|
||||
export const H5 = props => <MarkdownHeading as="h5" {...props} />
|
||||
|
||||
const components = {
|
||||
h1: H1,
|
||||
h2: H2,
|
||||
h3: H3,
|
||||
h4: H4,
|
||||
h5: H5,
|
||||
// render links with our component
|
||||
a: Link,
|
||||
// render code blocks with our wrapper around react-live
|
||||
code: CodeExample,
|
||||
// "unwrap" <pre> elements around <code> blocks
|
||||
pre: props => props.children
|
||||
}
|
||||
|
||||
export default components
|
||||
16986
docs/package-lock.json
generated
Normal file
16986
docs/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
40
docs/package.json
Normal file
40
docs/package.json
Normal file
@ -0,0 +1,40 @@
|
||||
{
|
||||
"name": "docs",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"clean": "gatsby clean",
|
||||
"develop": "gatsby develop -H 0.0.0.0",
|
||||
"build": "gatsby build --prefix-paths",
|
||||
"now-build": "npm run build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@loadable/component": "^5.10.2",
|
||||
"@primer/components": "^13.2.0",
|
||||
"@primer/css": "^12.4.1",
|
||||
"@primer/gatsby-theme-doctocat": "^0.11.1",
|
||||
"@primer/octicons": "^9.1.1",
|
||||
"@primer/octicons-react": "^9.1.1",
|
||||
"@svgr/webpack": "^4.3.2",
|
||||
"autoprefixer": "^9.6.1",
|
||||
"chroma-js": "^2.0.4",
|
||||
"gatsby": "^2.10.4",
|
||||
"gatsby-plugin-google-analytics": "^2.1.7",
|
||||
"gatsby-plugin-sass": "^2.1.0",
|
||||
"gatsby-plugin-svgr": "^2.0.2",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"postcss-node-sass": "^2.1.8",
|
||||
"postcss-scss": "^2.0.0",
|
||||
"primer-colors": "^1.0.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"raw-loader": "^3.1.0",
|
||||
"react": "^16.8.6",
|
||||
"react-bodymovin": "^2.0.0",
|
||||
"react-dom": "^16.8.6",
|
||||
"react-frame-component": "^4.1.1",
|
||||
"styled-components": "^4.3.2",
|
||||
"title-case": "^2.1.1"
|
||||
},
|
||||
"repository": "primer/css"
|
||||
}
|
||||
12
docs/postcss.config.js
Normal file
12
docs/postcss.config.js
Normal file
@ -0,0 +1,12 @@
|
||||
// This config file is necessary to get postcss-loader to work in
|
||||
// ./src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js.
|
||||
module.exports = {
|
||||
parser: 'postcss-scss',
|
||||
plugins: {
|
||||
'postcss-node-sass': {
|
||||
includePaths: ['node_modules'],
|
||||
outputStyle: 'compressed'
|
||||
},
|
||||
autoprefixer: {}
|
||||
}
|
||||
}
|
||||
26
docs/src/@primer/gatsby-theme-doctocat/components/hero.js
Normal file
26
docs/src/@primer/gatsby-theme-doctocat/components/hero.js
Normal file
@ -0,0 +1,26 @@
|
||||
import loadable from '@loadable/component'
|
||||
import {Box, Heading, Text} from '@primer/components'
|
||||
import {Container} from '@primer/gatsby-theme-doctocat'
|
||||
import React from 'react'
|
||||
import {version} from '../../../../../package.json'
|
||||
import {ReactComponent as HeroIllustration} from '../../../hero-illustration.svg'
|
||||
|
||||
const HeroAnimation = loadable(() => import('../../../hero-animation'), {fallback: <HeroIllustration />})
|
||||
|
||||
function Hero() {
|
||||
return (
|
||||
<Box bg="black" py={6}>
|
||||
<Container>
|
||||
<Heading color="blue.4" fontSize={7} m={0}>
|
||||
Primer CSS
|
||||
</Heading>
|
||||
<Text as="p" fontFamily="mono" mt={0} mb={2} color="blue.3" fontSize={2}>
|
||||
v{version}
|
||||
</Text>
|
||||
<HeroAnimation />
|
||||
</Container>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default Hero
|
||||
@ -0,0 +1,14 @@
|
||||
import React from 'react'
|
||||
import primerStyles from '!!raw-loader!postcss-loader!../../../../../src/index.scss'
|
||||
|
||||
function LivePreviewWrapper({children}) {
|
||||
return (
|
||||
<>
|
||||
<style>{primerStyles}</style>
|
||||
<link rel="stylesheet" href="https://github.com/site/assets/styleguide.css" />
|
||||
<div className="p-3">{children}</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default LivePreviewWrapper
|
||||
139
docs/src/@primer/gatsby-theme-doctocat/nav.yml
Normal file
139
docs/src/@primer/gatsby-theme-doctocat/nav.yml
Normal file
@ -0,0 +1,139 @@
|
||||
- title: Getting started
|
||||
url: /getting-started
|
||||
children:
|
||||
- title: Contributing
|
||||
url: /getting-started/contributing
|
||||
- title: Support
|
||||
url: /support
|
||||
children:
|
||||
- title: Breakpoints
|
||||
url: /support/breakpoints
|
||||
- title: Color system
|
||||
url: /support/color-system
|
||||
- title: Spacing
|
||||
url: /support/spacing
|
||||
- title: Typography
|
||||
url: /support/typography
|
||||
- title: Marketing support
|
||||
url: /support/marketing-variables
|
||||
- title: Utilities
|
||||
url: /utilities
|
||||
children:
|
||||
- title: Animations
|
||||
url: /utilities/animations
|
||||
- title: Borders
|
||||
url: /utilities/borders
|
||||
- title: Marketing borders
|
||||
url: /utilities/marketing-borders
|
||||
- title: Box shadow
|
||||
url: /utilities/box-shadow
|
||||
- title: Colors
|
||||
url: /utilities/colors
|
||||
- title: Details
|
||||
url: /utilities/details
|
||||
- title: Flexbox
|
||||
url: /utilities/flexbox
|
||||
- title: Layout
|
||||
url: /utilities/layout
|
||||
- title: Marketing layout
|
||||
url: /utilities/marketing-layout
|
||||
- title: Margin
|
||||
url: /utilities/margin
|
||||
- title: Marketing margin
|
||||
url: /utilities/marketing-margin
|
||||
- title: Marketing filters
|
||||
url: /utilities/marketing-filters
|
||||
- title: Padding
|
||||
url: /utilities/padding
|
||||
- title: Marketing padding
|
||||
url: /utilities/marketing-padding
|
||||
- title: Typography
|
||||
url: /utilities/typography
|
||||
- title: Marketing typography
|
||||
url: /utilities/marketing-type
|
||||
- title: Objects
|
||||
url: /objects
|
||||
children:
|
||||
- title: Grid
|
||||
url: /objects/grid
|
||||
- title: Layout
|
||||
url: /objects/layout
|
||||
- title: Table object
|
||||
url: /objects/table-object
|
||||
- title: Components
|
||||
url: /components
|
||||
children:
|
||||
- title: Alerts
|
||||
url: /components/alerts
|
||||
- title: Avatars
|
||||
url: /components/avatars
|
||||
- title: Blankslate
|
||||
url: /components/blankslate
|
||||
- title: Box overlay
|
||||
url: /components/box-overlay
|
||||
- title: Box
|
||||
url: /components/box
|
||||
- title: Boxed groups
|
||||
url: /components/boxed-groups
|
||||
- title: Branch name
|
||||
url: /components/branch-name
|
||||
- title: Breadcrumbs
|
||||
url: /components/breadcrumb
|
||||
- title: Buttons
|
||||
url: /components/buttons
|
||||
- title: Dropdown
|
||||
url: /components/dropdown
|
||||
- title: Flash banner
|
||||
url: /components/flash-banner
|
||||
- title: Forms
|
||||
url: /components/forms
|
||||
- title: Labels
|
||||
url: /components/labels
|
||||
- title: Markdown
|
||||
url: /components/markdown
|
||||
- title: Marketing buttons
|
||||
url: /components/marketing-buttons
|
||||
- title: Navigation
|
||||
url: /components/navigation
|
||||
- title: Pagehead
|
||||
url: /components/pagehead
|
||||
- title: Popover
|
||||
url: /components/popover
|
||||
- title: Progress
|
||||
url: /components/progress
|
||||
- title: Select menu
|
||||
url: /components/select-menu
|
||||
- title: Select menu (deprecated)
|
||||
url: /components/select-menu-deprecated
|
||||
- title: Subhead
|
||||
url: /components/subhead
|
||||
- title: Toasts
|
||||
url: /components/toasts
|
||||
- title: Tooltips
|
||||
url: /components/tooltips
|
||||
- title: Truncate
|
||||
url: /components/truncate
|
||||
- title: Tools
|
||||
url: /tools
|
||||
children:
|
||||
- title: Atom packages
|
||||
url: /tools/atom-packages
|
||||
- title: Docset
|
||||
url: /tools/docset
|
||||
- title: Linting
|
||||
url: /tools/linting
|
||||
- title: Local development
|
||||
url: /tools/local-primer
|
||||
- title: Prototyping
|
||||
url: /tools/prototyping
|
||||
- title: Testing resources
|
||||
url: /tools/testing
|
||||
- title: Principles
|
||||
url: /principles
|
||||
children:
|
||||
- title: Accessibility
|
||||
url: /principles/accessibility
|
||||
- title: HTML
|
||||
url: /principles/html
|
||||
- title: SCSS
|
||||
url: /principles/scss
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
@ -4,7 +4,7 @@ import chroma from 'chroma-js'
|
||||
import styled from 'styled-components'
|
||||
import {Box, Text} from '@primer/components'
|
||||
import {colors, getPaletteByName} from './color-variables'
|
||||
import Table from './Table'
|
||||
import Table from './table'
|
||||
|
||||
export function PaletteTable(props) {
|
||||
const {columns = [], hasHeader, ...rest} = props
|
||||
@ -1,8 +1,8 @@
|
||||
import titleCase from 'title-case'
|
||||
import primerColors from 'primer-colors'
|
||||
|
||||
import colorSystemSCSS from '!!raw-loader?module!../src/support/variables/color-system.scss'
|
||||
import colorVariablesSCSS from '!!raw-loader?module!../src/support/variables/colors.scss'
|
||||
import colorSystemSCSS from '!!raw-loader!../../src/support/variables/color-system.scss'
|
||||
import colorVariablesSCSS from '!!raw-loader!../../src/support/variables/colors.scss'
|
||||
|
||||
const variables = {}
|
||||
|
||||
1
docs/src/components-image.svg
Normal file
1
docs/src/components-image.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.15 55.6" width="72"><title>styles</title><path d="M70.1 55.6H42.55a3 3 0 0 1-3-3v-9.46a1 1 0 0 1 2 0v9.46a1 1 0 0 0 1 1h27.6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1h-27.6a1 1 0 0 0-1 1v10.8a1 1 0 1 1-2 0V3a3 3 0 0 1 3-3h27.6a3 3 0 0 1 3 3v49.6a3 3 0 0 1-3 3h-.05zM30.55 47.8H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h27.55a3 3 0 0 1 3 3v10.8a1 1 0 0 1-2 0V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v41.8a1 1 0 0 0 1 1h27.55a1 1 0 0 0 1-1v-1.62a1 1 0 0 1 2 0v1.62a3 3 0 0 1-3 3z" fill="#79b8ff"></path><path fill="#79b8ff" d="M40.5 8.6h31v2h-31zM1.6 8.6h31v2h-31z"></path><path d="M62.3 38.15H21.9a3 3 0 0 1-3-3v-13.9a3 3 0 0 1 3-3h40.4a3 3 0 0 1 3 3v13.9a3 3 0 0 1-3 3zm-40.4-17.9a1 1 0 0 0-1 1v13.9a1 1 0 0 0 1 1h40.4a1 1 0 0 0 1-1v-13.9a1 1 0 0 0-1-1H21.9z" fill="#2088ff"></path><path d="M31.3 32.25h-3.64a2.39 2.39 0 0 1-2.11-2.3v-3.5a2.33 2.33 0 0 1 2.3-2.3h3.5a2.33 2.33 0 0 1 2.2 2.3v3.5a2.33 2.33 0 0 1-2.25 2.3zm-3.41-2h3.41a.32.32 0 0 0 .3-.3v-3.5a.32.32 0 0 0-.3-.3h-3.5a.32.32 0 0 0-.3.3v3.5a.43.43 0 0 0 .39.3zM57.1 29.15H38.7a1 1 0 0 1 0-2h18.4a1 1 0 0 1 0 2zM15.92 29.22a1 1 0 0 1-.45-.11l-.47-.2a6.86 6.86 0 0 1-.66-.26 1 1 0 0 1 .89-1.79l.47.2a6.86 6.86 0 0 1 .66.28 1 1 0 0 1-.44 1.88zM11.95 26.76a1 1 0 0 1-.71-.29 12.44 12.44 0 0 1-1.69-2.06 1 1 0 0 1 1.68-1.08A10.39 10.39 0 0 0 12.65 25a1 1 0 0 1-.7 1.76zM9.29 21.83a1 1 0 0 1-1-.76 6.13 6.13 0 0 1-.12-1.47 1 1 0 0 1 2 0 4.78 4.78 0 0 0 .06 1 1 1 0 0 1-.74 1.2z" fill="#2088ff"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
16
docs/src/hero-animation.js
Normal file
16
docs/src/hero-animation.js
Normal file
@ -0,0 +1,16 @@
|
||||
import React from 'react'
|
||||
import ReactBodymovin from 'react-bodymovin'
|
||||
import heroAnimation from './hero-animation.json'
|
||||
|
||||
const bodymovinOptions = {
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
prerender: true,
|
||||
animationData: heroAnimation
|
||||
}
|
||||
|
||||
function HeroAnimation() {
|
||||
return <ReactBodymovin options={bodymovinOptions} />
|
||||
}
|
||||
|
||||
export default HeroAnimation
|
||||
97
docs/src/hero-illustration.svg
Normal file
97
docs/src/hero-illustration.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 75 KiB |
1
docs/src/objects-image.svg
Normal file
1
docs/src/objects-image.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.46 55.1" width="60"><title>objects</title><path d="M38.1 41.9L2 41.8a2.08 2.08 0 0 1-2-2L.1 2a2 2 0 0 1 2-2l36.1.1a2 2 0 0 1 2 2l-.1 37.8a2 2 0 0 1-2 2zM2 39.75l36.1.16.1-37.8L2.1 2z" fill="#2088ff"></path><path d="M44.9 48.5L8 48.4a1 1 0 1 1 0-2l36.8.1.1-38.4a1 1 0 0 1 1-1 1 1 0 0 1 1 1l-.1 38.5a1.9 1.9 0 0 1-1.9 1.9z" fill="#79b8ff"></path><path d="M51.5 55.1L14.56 55a1 1 0 1 1 0-2l36.8.1.1-38.4a1 1 0 0 1 1-1 1 1 0 0 1 1 1l-.06 38.49a1.9 1.9 0 0 1-1.89 1.91z" fill="#79b8ff"></path><path d="M29.7 32.6H10.5a1 1 0 1 1 0-2h19.2a1 1 0 0 1 0 2zM29.7 25.5H10.5a1 1 0 1 1 0-2h19.2a1 1 0 0 1 0 2zM29.7 18.4H10.5a1 1 0 1 1 0-2h19.2a1 1 0 1 1 0 2zM20.1 11.3h-9.6a1 1 0 1 1 0-2h9.6a1 1 0 1 1 0 2z" fill="#2088ff"></path></svg>
|
||||
|
After Width: | Height: | Size: 779 B |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
@ -1,10 +1,12 @@
|
||||
import styled from 'styled-components'
|
||||
import PropTypes from 'prop-types'
|
||||
import {Box} from '@primer/components'
|
||||
import PropTypes from 'prop-types'
|
||||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import {fontSize} from 'styled-system'
|
||||
|
||||
const Table = styled.table`
|
||||
display: table !important;
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: ${props => props.borderSpacing};
|
||||
${fontSize};
|
||||
@ -39,7 +41,7 @@ Table.defaultProps = {
|
||||
fontSize: [1, 1, 2]
|
||||
}
|
||||
|
||||
Table.Row = styled(Box).attrs({as: 'tr'})``
|
||||
Table.Cell = styled(Box).attrs({as: 'td'})``
|
||||
Table.Row = props => <Box as="tr" {...props} />
|
||||
Table.Cell = props => <Box as="td" {...props} />
|
||||
|
||||
export default Table
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user