Skip to content

Commit beca305

Browse files
authored
Merge pull request #1056 from primer/users/yaili/css-docs-tweaks
Small text updates in docs
2 parents d2cf56a + 049e7bf commit beca305

File tree

13 files changed

+29
-29
lines changed

13 files changed

+29
-29
lines changed

docs/content/components/avatars.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the
183183
</div>
184184
```
185185

186-
## Circle Badge
186+
## Circle badge
187187

188188
`.CircleBadge` allows for the display of badge-like icons or logos. They are used mostly with Octicons or partner integration icons.
189189

docs/content/components/boxed-groups.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Boxed groups
2+
title: Boxed groups (deprecated)
33
path: components/boxed-group
44
status: Deprecated
55
source: 'https://github.com/github/github/blob/master/app/assets/stylesheets/components/boxed-groups.scss'

docs/content/components/buttons.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ Outline buttons downplay an action as they appear like boxy links. Just add `.bt
5757

5858
Use `.btn-large` to increase the padding and border radius of a button. This is useful for prominent calls to action in hero sections.
5959

60-
[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.
60+
[Type scale utilities](/support/typography#type-scale) 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.
6161

6262
```html live
6363
<button class="btn btn-large mr-2" type="button">Large button</button>

docs/content/components/loaders.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ bundle: loaders
88

99
Loaders inform users that an action is still in progress and might take a while to complete.
1010

11-
## Animated Ellipsis
11+
## Animated ellipsis
1212

1313
Add an animated ellipsis at the end of text with `<span class="AnimatedEllipsis"></span>`.
1414

docs/content/components/progress.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@ source: 'https://github.com/primer/css/tree/master/src/progress'
66
bundle: progress
77
---
88

9-
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](/utilities/colors#background-colors) and sized with inline `width` styles in percentages. Overflow is hidden, so children that overflow will be clipped.
9+
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](/utilities/colors#background-colors) and sized with inline `width` styles in percentages. Overflow is hidden, so children that overflow will be clipped.
1010

1111
```html live
1212
<span class="Progress">
1313
<span class="bg-green" style="width: 50%;"></span>
1414
</span>
1515
```
1616

17-
## Large Progress
17+
## Large progress
1818

1919
Large progress bars are slightly taller than the default.
2020

@@ -24,7 +24,7 @@ Large progress bars are slightly taller than the default.
2424
</span>
2525
```
2626

27-
## Small Progress
27+
## Small progress
2828

2929
Large progress bars are shorter than the default.
3030

@@ -34,7 +34,7 @@ Large progress bars are shorter than the default.
3434
</span>
3535
```
3636

37-
## Inline Progress
37+
## Inline progress
3838

3939
For inline progress indicators, use the `Progress` and `d-inline-flex` with an inline element such as `<span>` and add a custom `width` style:
4040

docs/content/components/select-menu.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Select Menu
2+
title: Select menu
33
status: New
44
source: 'https://github.com/primer/css/tree/master/src/select-menu'
55
bundle: select-menu
@@ -9,7 +9,7 @@ The `SelectMenu` component provides advanced support for navigation, filtering,
99

1010
## Basic example
1111

12-
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`.
12+
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`.
1313

1414
```html live
1515
<details class="details-reset details-overlay" open>
@@ -47,7 +47,7 @@ Add a `.SelectMenu-header` to house a clear title and a close button. Note that
4747

4848
## Right aligned
4949

50-
In case the Select Menu should be aligned to the right, use `SelectMenu right-0`.
50+
In case the select menu should be aligned to the right, use `SelectMenu right-0`.
5151

5252
```html live
5353
<div class="d-flex flex-justify-end position-relative">
@@ -217,7 +217,7 @@ The list of items is arguably the most important subcomponent within the menu. B
217217

218218
## Divider
219219

220-
The Select Menu's list can be divided into multiple parts by adding a `.SelectMenu-divider`.
220+
The select menu's list can be divided into multiple parts by adding a `.SelectMenu-divider`.
221221

222222
```html live
223223
<details class="details-reset details-overlay" open>
@@ -294,7 +294,7 @@ Use a `.SelectMenu-footer` at the bottom for additional information. As a side e
294294

295295
## Filter
296296

297-
If the list is expected to get long, consider adding a `.SelectMenu-filter` input. Be sure to also include the `.SelectMenu--hasFilter` modifier class. On mobile devices it will add a fixed height and anchor the Select Menu to the top of the screen. This makes sure the filter input stays at the same position while typing.
297+
If the list is expected to get long, consider adding a `.SelectMenu-filter` input. Be sure to also include the `.SelectMenu--hasFilter` modifier class. On mobile devices it will add a fixed height and anchor the select menu to the top of the screen. This makes sure the filter input stays at the same position while typing.
298298

299299
```html live
300300
<details class="details-reset details-overlay" open>
@@ -351,7 +351,7 @@ If the list is expected to get long, consider adding a `.SelectMenu-filter` inpu
351351

352352
## Tabs
353353

354-
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.
354+
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.
355355

356356
```html live
357357
<details class="details-reset details-overlay" open>
@@ -491,7 +491,7 @@ When fetching large lists, consider showing a `.SelectMenu-loading` animation.
491491

492492
## Blankslate
493493

494-
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.
494+
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.
495495

496496
```html live
497497
<details class="details-reset details-overlay" open>

docs/content/support/typography.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ source: 'https://github.com/primer/css/blob/master/src/support/variables/typogra
77
bundle: support
88
---
99

10-
## Type Scale
10+
## Type scale
1111

1212
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.
1313

@@ -65,7 +65,7 @@ $lh-condensed: 1.25 !default;
6565
$lh-default: 1.5 !default;
6666
```
6767

68-
## Typography Mixins
68+
## Typography mixins
6969

7070
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](/utilities/typography#heading-utilities). which requires no additional CSS.
7171

docs/content/utilities/animations.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ Animations are reusable animation classes that you can use to emphasize an eleme
1111

1212

1313

14-
## Fade In
14+
## Fade in
1515

1616
The `.anim-fade-in` class is used to fade in an element on the page. This will run once when the element is revealed.
1717

@@ -23,7 +23,7 @@ The `.anim-fade-in` class is used to fade in an element on the page. This will r
2323
</span>
2424
```
2525

26-
## Fade Out
26+
## Fade out
2727

2828
The `.anim-fade-out` class is used to fade out an element on the page. This will run once when the element is revealed.
2929

@@ -35,7 +35,7 @@ The `.anim-fade-out` class is used to fade out an element on the page. This will
3535
</span>
3636
```
3737

38-
## Fade Up
38+
## Fade up
3939

4040
The `.anim-fade-up` class is used to reveal an element on the page by sliding it up from below the fold. You should use this in a container with `overflow: hidden;` or on the bottom of the page.
4141

@@ -47,7 +47,7 @@ The `.anim-fade-up` class is used to reveal an element on the page by sliding it
4747
</div>
4848
```
4949

50-
## Fade Down
50+
## Fade down
5151

5252
The `.anim-fade-down` class is used to slide an element down hiding it. You should use this in a container with `overflow: hidden;` or on the bottom of the page.
5353

@@ -59,7 +59,7 @@ The `.anim-fade-down` class is used to slide an element down hiding it. You shou
5959
</div>
6060
```
6161

62-
## Scale In
62+
## Scale in
6363

6464
The `.anim-scale-in` class will scale the element in. This is useful on menus when you want them to appear more friendly.
6565

@@ -70,7 +70,7 @@ The `.anim-scale-in` class will scale the element in. This is useful on menus wh
7070
</div>
7171
```
7272

73-
## Grow X
73+
## Grow x
7474

7575
The `.anim-grow-x` class will grow an element width from 0-:100: real quick.
7676

docs/content/utilities/borders.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ bundle: utilities
1010
import {palettes, borders} from '../../src/color-variables'
1111
import {PaletteTable, PaletteCell, PaletteValue} from '../../src/color-system'
1212

13-
Utilities for borders, border radius, and box shadows.
13+
Utilities for borders, and border radius.
1414

1515
## Default border
1616

docs/content/utilities/box-shadow.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ These shadows are used for marketing content, UI screenshots, and content that a
9696
</div>
9797
```
9898

99-
## Extra Large
99+
## Extra large
100100

101101
Extra large box shadows are even more diffused.
102102

docs/content/utilities/marketing-borders.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Marketing Borders
2+
title: Marketing borders (deprecated)
33
sort_title: Borders Marketing
44
path: utilities/marketing-borders
55
status: Deprecated

docs/content/utilities/typography.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ Remove bullets from an unordered list or numbers from an ordered list by applyin
145145
</ul>
146146
```
147147

148-
## Text Shadows
148+
## Text shadows
149149

150150
Text shadows can be used to help readability and to add some depth on colored backgrounds.
151151

docs/src/@primer/gatsby-theme-doctocat/nav.yml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
url: /utilities/animations
2626
- title: Borders
2727
url: /utilities/borders
28-
- title: Marketing borders
28+
- title: Marketing borders (deprecated)
2929
url: /utilities/marketing-borders
3030
- title: Box shadow
3131
url: /utilities/box-shadow
@@ -75,7 +75,7 @@
7575
url: /components/box-overlay
7676
- title: Box
7777
url: /components/box
78-
- title: Boxed groups
78+
- title: Boxed groups (deprecated)
7979
url: /components/boxed-groups
8080
- title: Branch name
8181
url: /components/branch-name

0 commit comments

Comments
 (0)