From df7ab31938fce3a87266b3509b80ef5166ae9b4d Mon Sep 17 00:00:00 2001 From: Emily Date: Thu, 26 Apr 2018 14:32:39 -0700 Subject: [PATCH 01/40] add text-mono utility --- modules/primer-utilities/lib/typography.scss | 5 +++++ modules/primer-utilities/stories/Typography.js | 1 + 2 files changed, 6 insertions(+) diff --git a/modules/primer-utilities/lib/typography.scss b/modules/primer-utilities/lib/typography.scss index f580f596..72f3ba9b 100644 --- a/modules/primer-utilities/lib/typography.scss +++ b/modules/primer-utilities/lib/typography.scss @@ -214,3 +214,8 @@ .text-shadow-light { text-shadow: 0 1px 0 rgba($white, 0.5); } + +/* Set to monospace font */ +.text-mono { + font-family: $mono-font; +} diff --git a/modules/primer-utilities/stories/Typography.js b/modules/primer-utilities/stories/Typography.js index d618511a..c29b9b05 100644 --- a/modules/primer-utilities/stories/Typography.js +++ b/modules/primer-utilities/stories/Typography.js @@ -57,6 +57,7 @@ storiesOf('Typography utilities', module)

text-emphasized

text-small

lead

+

text-mono

)) .add('text alignment', () => ( From c4ae2ee517f6ff071cdd5076098fd7b87eeb1bcd Mon Sep 17 00:00:00 2001 From: Emily Date: Thu, 26 Apr 2018 14:38:17 -0700 Subject: [PATCH 02/40] update docs --- modules/primer-utilities/docs/typography.md | 1 + 1 file changed, 1 insertion(+) diff --git a/modules/primer-utilities/docs/typography.md b/modules/primer-utilities/docs/typography.md index eb829726..3b37f6d1 100644 --- a/modules/primer-utilities/docs/typography.md +++ b/modules/primer-utilities/docs/typography.md @@ -93,6 +93,7 @@ Change the font weight, styles, and alignment with these utilities.

Emphasized

Small

Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.

+

Monospace

``` ## Text alignment From 6c3c4f988d3a644d38ace736a5142fee437f536d Mon Sep 17 00:00:00 2001 From: Emily Date: Mon, 30 Apr 2018 11:13:36 -0700 Subject: [PATCH 03/40] change single quotes to double --- modules/primer-utilities/docs/typography.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-utilities/docs/typography.md b/modules/primer-utilities/docs/typography.md index 3b37f6d1..577b9a37 100644 --- a/modules/primer-utilities/docs/typography.md +++ b/modules/primer-utilities/docs/typography.md @@ -93,7 +93,7 @@ Change the font weight, styles, and alignment with these utilities.

Emphasized

Small

Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.

-

Monospace

+

Monospace

``` ## Text alignment From d67107460eff9d9617da919cfedcc3ce396db920 Mon Sep 17 00:00:00 2001 From: Emily Date: Fri, 4 May 2018 12:52:44 -0700 Subject: [PATCH 04/40] update utilities link --- modules/primer-support/docs/typography.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-support/docs/typography.md b/modules/primer-support/docs/typography.md index efa51762..888d1bda 100644 --- a/modules/primer-support/docs/typography.md +++ b/modules/primer-support/docs/typography.md @@ -24,7 +24,7 @@ Font sizes are smaller on mobile and scale up at the `md` [breakpoint](#breakpoi | 5 | 14px | 14px | 17.5 | 21 | | 6 | 12px | 12px | 15 | 18 | -The typography scale is used to create [typography utilities](./utilities/typography). +The typography scale is used to create [typography utilities](../../utilities/typography). ## Typography variables From 062985f10c5350b9da48fab669fde8cf77b2b7ac Mon Sep 17 00:00:00 2001 From: Emily Date: Fri, 4 May 2018 13:57:43 -0700 Subject: [PATCH 05/40] update variables link --- modules/primer-utilities/docs/typography.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-utilities/docs/typography.md b/modules/primer-utilities/docs/typography.md index eb829726..2ffde9a9 100644 --- a/modules/primer-utilities/docs/typography.md +++ b/modules/primer-utilities/docs/typography.md @@ -3,7 +3,7 @@ title: Typography status: Stable --- -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](/styleguide/css/styles/core/support/typography#typography-variables) that you can use in components or custom CSS. +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](/primer/support/typography/#typography-variables) that you can use in components or custom CSS. {:toc} From 7ecc7a79e4ca56daf90a3073837d0ed0e29e268e Mon Sep 17 00:00:00 2001 From: Emily Date: Fri, 4 May 2018 13:59:33 -0700 Subject: [PATCH 06/40] update breakpoint link --- modules/primer-utilities/docs/typography.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-utilities/docs/typography.md b/modules/primer-utilities/docs/typography.md index 2ffde9a9..d6c4a828 100644 --- a/modules/primer-utilities/docs/typography.md +++ b/modules/primer-utilities/docs/typography.md @@ -7,7 +7,7 @@ Type utilities are designed to work in combination with line-height utilities so {:toc} -Font sizes are smaller on mobile and scale up at the `md` [breakpoint](/styleguide/css/styles/core/support/breakpoints) to be larger on desktop. +Font sizes are smaller on mobile and scale up at the `md` [breakpoint](/primer/support/breakpoints) to be larger on desktop. | Scale | Font size: mobile | Font size: desktop | 1.25 line height | 1.5 line height | | --- | --- | --- | --- | --- | From e2f7959caf1fac0cdd1a960acb255d49594069f7 Mon Sep 17 00:00:00 2001 From: Emily Date: Fri, 4 May 2018 14:05:36 -0700 Subject: [PATCH 07/40] update responsive styles links --- modules/primer-support/docs/breakpoints.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-support/docs/breakpoints.md b/modules/primer-support/docs/breakpoints.md index 12f94a6b..96558bd0 100644 --- a/modules/primer-support/docs/breakpoints.md +++ b/modules/primer-support/docs/breakpoints.md @@ -19,7 +19,7 @@ We use abbreviations for each breakpoint to keep the class names concise. This a **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. -Responsive styles are available for [margin](./utilities/margin#responsive-margin), [padding](./utilities/padding#responsive-padding), [layout](./utilities/layout), [flexbox](.utilities/flexbox#responsive-flex-utilities), and the [grid](./objects/grid#responsive-grids) system. +Responsive styles are available for [margin](../../utilities/margin/#responsive-margins), [padding](../../utilities/padding#responsive-padding), [layout](../../utilities/layout), [flexbox](../../utilities/flexbox#responsive-flex-utilities), and the [grid](../../objects/grid#responsive-grids) system. ## Breakpoint variables From beeeaddcaae9394b8437f7d17bdbbffae026d87b Mon Sep 17 00:00:00 2001 From: Emily Date: Fri, 4 May 2018 14:11:14 -0700 Subject: [PATCH 08/40] fix spacing links --- modules/primer-support/docs/spacing.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/primer-support/docs/spacing.md b/modules/primer-support/docs/spacing.md index bd18ea2c..36c081fa 100644 --- a/modules/primer-support/docs/spacing.md +++ b/modules/primer-support/docs/spacing.md @@ -19,9 +19,9 @@ The spacing scale is a **base-8** scale. We chose a base-8 scale because eight i | $spacer-1 | 5 | 32px | | $spacer-1 | 6 | 40px | -These variables are encouraged to be used within components and custom CSS. The spacing scale is also used for [margin](./utilities/margin) and [padding](./utilities/padding) utilities. +These variables are encouraged to be used within components and custom CSS. The spacing scale is also used for [margin](../../utilities/margin) and [padding](../../utilities/padding) utilities. -See [primer-marketing-support](../primer-marketing-support) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](../primer-marketing-utilities/docs/margin.md) and [padding](../primer-marketing-utilities/docs/padding.md). +See [primer-marketing-support](../../support/marketing-variables/) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](../../utilities/marketing-margin) and [padding](../../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. From 6ef56b5517352b17b19d550143990bd12b9fc27c Mon Sep 17 00:00:00 2001 From: Emily Date: Fri, 4 May 2018 14:15:07 -0700 Subject: [PATCH 09/40] fix typography links --- modules/primer-support/docs/typography.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/primer-support/docs/typography.md b/modules/primer-support/docs/typography.md index 888d1bda..c6ae83fe 100644 --- a/modules/primer-support/docs/typography.md +++ b/modules/primer-support/docs/typography.md @@ -11,7 +11,7 @@ source: https://github.com/primer/primer/blob/master/modules/primer-support/lib/ 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. -Font sizes are smaller on mobile and scale up at the `md` [breakpoint](#breakpoints) to be larger on desktop. +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 | | --- | --- | --- | --- | --- | @@ -63,7 +63,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](./utilities/typography#heading-utilities) which requires no additional CSS. +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. Heading mixins are available for `h1` through to `h6`, this includes the font-size and font-weight. Example: From e9a6f0151ef4a65018bd29f8e66b28b7539c6f0d Mon Sep 17 00:00:00 2001 From: Emily Date: Fri, 4 May 2018 14:30:44 -0700 Subject: [PATCH 10/40] update marketing variables links --- modules/primer-marketing-support/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-marketing-support/README.md b/modules/primer-marketing-support/README.md index 8b3b8f03..ef3484c1 100644 --- a/modules/primer-marketing-support/README.md +++ b/modules/primer-marketing-support/README.md @@ -48,7 +48,7 @@ Starting where the `primer-core` spacing scale ends at spacer 6, the marketing s | 11 | 112 | | 12 | 128 | -See [primer-marketing-utilities](../primer-marketing-utilities) for related spacing utilities. +See [primer-marketing-support](../../support/marketing-variables/) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](../../utilities/marketing-margin) and [padding](../../utilities/marketing-padding). From da1e8bedde44e21a884b9527140622887d29c8d6 Mon Sep 17 00:00:00 2001 From: Emily Date: Fri, 4 May 2018 14:33:27 -0700 Subject: [PATCH 11/40] fix marketing border links --- modules/primer-marketing-utilities/docs/borders.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-marketing-utilities/docs/borders.md b/modules/primer-marketing-utilities/docs/borders.md index 8f4e1b83..33992a13 100644 --- a/modules/primer-marketing-utilities/docs/borders.md +++ b/modules/primer-marketing-utilities/docs/borders.md @@ -21,7 +21,7 @@ Top, right, bottom, and left border utilities are can be used responsively to ad ### White border with alpha transparency -Use `.border-white-fade` to add a white border with an alpha transparency of 0.15. This is useful when you want a border that is a lighter shade of the background color. Additional border colors are available in [primer-core border utilities](/borders/#border-colors). +Use `.border-white-fade` to add a white border with an alpha transparency of 0.15. This is useful when you want a border that is a lighter shade of the background color. Additional border colors are available in [primer-core border utilities](..//borders/#border-colors). ```html
From 5138b924141c15c81f2b69d7f0f057e27d75cef4 Mon Sep 17 00:00:00 2001 From: Emily Date: Fri, 4 May 2018 14:36:59 -0700 Subject: [PATCH 12/40] fix color links --- modules/primer-utilities/docs/colors.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/primer-utilities/docs/colors.md b/modules/primer-utilities/docs/colors.md index d66842fb..cd7af8ba 100644 --- a/modules/primer-utilities/docs/colors.md +++ b/modules/primer-utilities/docs/colors.md @@ -13,7 +13,7 @@ Use color utilities to apply color to the background of elements, text, and bord ## 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](/styleguide/css/principles/accessibility). +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](/primer/principles/accessibility). ### Gray @@ -127,7 +127,7 @@ Background colors are most commonly used for filling large blocks of content or ## Text colors -Use text color utilities to set text or [octicons](/styleguide/css/styles/core/components/octicons) to a specific color. Color contrast must pass a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). This ensures that viewers who cannot see the full color spectrum are able to read the text. To customize outside of the suggested combinations below, we recommend using this [color contrast testing tool](http://jxnblk.com/colorable/demos/text/). For more information, read our [accessibility standards](/styleguide/css/principles/accessibility). +Use text color utilities to set text or [octicons](/styleguide/css/styles/core/components/octicons) to a specific color. Color contrast must pass a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). This ensures that viewers who cannot see the full color spectrum are able to read the text. To customize outside of the suggested combinations below, we recommend using this [color contrast testing tool](http://jxnblk.com/colorable/demos/text/). For more information, read our [accessibility standards](/primer/principles/accessibility). These are our most common text with background color combinations. They don't all pass accessibility standards currently, but will be updated in the future. **Any of the combinations with a warning icon must be used with caution**. @@ -229,4 +229,4 @@ Use `link-hover-blue` to make any text color used with links to turn blue on hov ## Border colors -Border colors are documented on the [border utilities page](/styleguide/css/styles/core/utilities/borders#border-width-style-and-color-utilities). +Border colors are documented on the [border utilities page](../..//utilities/borders#border-width-style-and-color-utilities). From a7138aa5b6142b3465533437dea007e32098ccd9 Mon Sep 17 00:00:00 2001 From: Emily Date: Fri, 4 May 2018 14:52:59 -0700 Subject: [PATCH 13/40] update layout and flexbox links --- modules/primer-utilities/docs/flexbox.md | 2 +- modules/primer-utilities/docs/layout.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/primer-utilities/docs/flexbox.md b/modules/primer-utilities/docs/flexbox.md index 653d57b7..4eb5d47a 100644 --- a/modules/primer-utilities/docs/flexbox.md +++ b/modules/primer-utilities/docs/flexbox.md @@ -576,7 +576,7 @@ Use these classes to adjust the alignment of an individual flex item on the cros ## Responsive flex utilities -All flexbox utilities can be adjust per [breakpoint](/styleguide/css/modules/grid#breakpoints) using the following formulas: +All flexbox utilities can be adjust per [breakpoint](../../objects/grid#breakpoints) using the following formulas: - `d-[breakpoint]-[property]` for `display` - `flex-[breakpoint]-[property]-[behavior]` for various flex properties diff --git a/modules/primer-utilities/docs/layout.md b/modules/primer-utilities/docs/layout.md index fd4aa356..e3230caa 100644 --- a/modules/primer-utilities/docs/layout.md +++ b/modules/primer-utilities/docs/layout.md @@ -45,7 +45,7 @@ There are known issues with using `display:table` and wrapping long strings, par ``` ### Responsive display -A selection of display utilities are able to be applied or changed per [breakpoint](/styleguide/css/modules/grid#breakpoints). `.d-block`, `.d-none`, `.d-inline`, and `.d-inline-block` are available as responsive utilities using the following formula: `d-[breakpoint]-[property]`. For example: `d-md-inline-block`. Each responsive display utility is applied to the specified breakpoint and up. +A selection of display utilities are able to be applied or changed per [breakpoint](../../objects/grid#breakpoints). `.d-block`, `.d-none`, `.d-inline`, and `.d-inline-block` are available as responsive utilities using the following formula: `d-[breakpoint]-[property]`. For example: `d-md-inline-block`. Each responsive display utility is applied to the specified breakpoint and up. 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. @@ -97,7 +97,7 @@ Use `.float-left` and `.float-right` to set floats, and `.clearfix` to clear.
``` ### Responsive floats -Float utilities can be applied or changed per [breakpoint](/styleguide/css/modules/grid#breakpoints). This can be useful for responsive layouts when you want an element to be full width on mobile but floated at a larger breakpoint. +Float utilities can be applied or changed per [breakpoint](../../objects/grid#breakpoints). This can be useful for responsive layouts when you want an element to be full width on mobile but floated at a larger breakpoint. 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. From 919a4ad33b25cb2be8b7308d5c26ffccb4ecc6e2 Mon Sep 17 00:00:00 2001 From: Emily Date: Fri, 4 May 2018 14:59:33 -0700 Subject: [PATCH 14/40] fix layout links --- modules/primer-utilities/docs/layout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-utilities/docs/layout.md b/modules/primer-utilities/docs/layout.md index e3230caa..cb2082dd 100644 --- a/modules/primer-utilities/docs/layout.md +++ b/modules/primer-utilities/docs/layout.md @@ -31,7 +31,7 @@ Adjust the display of an element with `.d-block`, `.d-none`, `.d-inline`, `.d-in ``` -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](/styleguide/css/modules/grid#column-widths). +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](../../objects/grid#column-widths). ```html
From dbfe41d92ec1999198b42366d31a4f22f5e90b5f Mon Sep 17 00:00:00 2001 From: Emily Date: Fri, 4 May 2018 15:01:50 -0700 Subject: [PATCH 15/40] fix marketing layout links --- modules/primer-marketing-utilities/docs/layout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-marketing-utilities/docs/layout.md b/modules/primer-marketing-utilities/docs/layout.md index 69adc135..992a6949 100644 --- a/modules/primer-marketing-utilities/docs/layout.md +++ b/modules/primer-marketing-utilities/docs/layout.md @@ -3,7 +3,7 @@ title: Layout status: New release --- -Marketing layout utilities build on top of [primer-core utilities](/layout/#position), adding the option of responsive positioning. +Marketing layout utilities build on top of [primer-core utilities](../../utilities/layout/#position), adding the option of responsive positioning. {:toc} From 0aa1d664762565dfce844e73612032790f8afd69 Mon Sep 17 00:00:00 2001 From: Emily Date: Fri, 4 May 2018 15:05:02 -0700 Subject: [PATCH 16/40] fix margin links --- modules/primer-utilities/docs/margin.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/primer-utilities/docs/margin.md b/modules/primer-utilities/docs/margin.md index 7e8e61dd..351d1bf8 100644 --- a/modules/primer-utilities/docs/margin.md +++ b/modules/primer-utilities/docs/margin.md @@ -3,7 +3,7 @@ title: Margin status: Stable --- -Margin utilities are based on a global [spacing scale](/styleguide/css/styles/core/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. +Margin utilities are based on a global [spacing scale](../../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. {:toc} @@ -103,7 +103,7 @@ Reset margins built into typography elements or other components with `m-0`, `mt ## Responsive margins -All margin utilities, except `mx-auto`, can be adjusted per [breakpoint](/styleguide/css/modules/grid#breakpoints) using the following formula: `m[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up. +All margin utilities, except `mx-auto`, can be adjusted per [breakpoint](../../objects/grid#breakpoints) using the following formula: `m[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up. ```html
From df57376e99914164701747c3ca005ce77aea3fed Mon Sep 17 00:00:00 2001 From: Emily Date: Mon, 7 May 2018 09:21:14 -0700 Subject: [PATCH 17/40] fix marketing margin links --- modules/primer-marketing-utilities/docs/margin.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/modules/primer-marketing-utilities/docs/margin.md b/modules/primer-marketing-utilities/docs/margin.md index 12baa6d8..99c244fe 100644 --- a/modules/primer-marketing-utilities/docs/margin.md +++ b/modules/primer-marketing-utilities/docs/margin.md @@ -4,7 +4,8 @@ status: New release status_issue: https://github.com/github/design-systems/issues/378 --- -Marketing margin utilities extend [core margin utilities](../../primer-marketing-support/docs/spacing) across the y-axis only. The [marketing scale](../../primer-marketing-support) starts from spacer 7 up to 12, and steps first by `8px` for spacer 7 and continues in increments of `16px` for spacer 8 to 12. +Marketing margin utilities extend [core margin utilities](../../support/spacing) across the y-axis only. The [marketing scale](../../support/marketing-variables/#extended-spacing-scale) starts from spacer 7 up to 12, and steps first by `8px` for spacer 7 and continues in increments of `16px` for spacer 8 to 12. + ## Y-axis margin utilities @@ -24,7 +25,7 @@ Use marketing margin utilities to apply margin to top, bottom, or both y-axis of ## Responsive y-axis margin utilities -All marketing margin utilities can be adjusted per [breakpoint](/styleguide/css/modules/grid#breakpoints) using the following formula: `m[y-direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up. +All marketing margin utilities can be adjusted per [breakpoint](../../objects/grid#breakpoints) using the following formula: `m[y-direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up. ```html
From 9bad6256074bfac7f5186719736cd91ab98537a5 Mon Sep 17 00:00:00 2001 From: Emily Date: Mon, 7 May 2018 09:23:39 -0700 Subject: [PATCH 18/40] fix padding links --- modules/primer-utilities/docs/padding.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/primer-utilities/docs/padding.md b/modules/primer-utilities/docs/padding.md index 7395e25f..2d996837 100644 --- a/modules/primer-utilities/docs/padding.md +++ b/modules/primer-utilities/docs/padding.md @@ -3,7 +3,7 @@ title: Padding status: Stable --- -Padding utilities are based on a global [spacing scale](/styleguide/css/styles/core/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. +Padding utilities are based on a global [spacing scale](../../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. {:toc} @@ -85,7 +85,7 @@ Use directional utilities to apply padding to an individual side, or the X and Y ## Responsive padding -All padding utilities can be adjusted per [breakpoint](/styleguide/css/styles/core/support/breakpoints) using the following formula:
`p-[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up. +All padding utilities can be adjusted per [breakpoint](../../support/breakpoints) using the following formula:
`p-[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up. ```html
@@ -99,7 +99,7 @@ All padding utilities can be adjusted per [breakpoint](/styleguide/css/styles/co `.p-responsive` is a padding class that adds padding on the left and right sides of an element. On small screens, it gives the element padding of `$spacer-3`, on mid-sized screens it gives the element padding of `$spacer-6`, and on large screens, it gives the element padding of `$spacer-3`. -It is intended to be used with [container styles](/styleguide/css/styles/core/objects/grid#containers) +It is intended to be used with [container styles](../../objects/grid#containers) ```html
From 2e9f03208ce868aebf024e93b7c8bcf1d7d78eb9 Mon Sep 17 00:00:00 2001 From: Emily Date: Mon, 7 May 2018 09:26:16 -0700 Subject: [PATCH 19/40] fix marketing padding links --- modules/primer-marketing-utilities/docs/padding.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/primer-marketing-utilities/docs/padding.md b/modules/primer-marketing-utilities/docs/padding.md index 71ce6997..ee7ba75d 100644 --- a/modules/primer-marketing-utilities/docs/padding.md +++ b/modules/primer-marketing-utilities/docs/padding.md @@ -4,7 +4,7 @@ status: New release status_issue: https://github.com/github/design-systems/issues/378 --- -Marketing padding utilities extend [core margin utilities](../../primer-marketing-support/docs/spacing) across the y-axis only. The [marketing scale](../../primer-marketing-support) starts from spacer 7 up to 12, and steps first by `8px` for spacer 7 and continues in increments of `16px` for spacer 8 to 12. +Marketing padding utilities extend [core margin utilities](../../support/spacing) across the y-axis only. The [marketing scale](../../support/marketing-variables/#extended-spacing-scale) starts from spacer 7 up to 12, and steps first by `8px` for spacer 7 and continues in increments of `16px` for spacer 8 to 12. ## Y-axis padding utilities @@ -24,7 +24,7 @@ Use marketing padding utilities to apply padding to top, bottom, or both y-axis ## Responsive y-axis padding utilities -All marketing padding utilities can be adjusted per [breakpoint](/styleguide/css/modules/grid#breakpoints) using the following formula: `p[y-direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up. +All marketing padding utilities can be adjusted per [breakpoint](../../objects/grid#breakpoints) using the following formula: `p[y-direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up. ```html
From df116664088011fc2d4a11f7e4124250cb8df544 Mon Sep 17 00:00:00 2001 From: Emily Date: Mon, 7 May 2018 09:35:04 -0700 Subject: [PATCH 20/40] fix grid links --- modules/primer-layout/docs/grid.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/modules/primer-layout/docs/grid.md b/modules/primer-layout/docs/grid.md index a2b3c819..7888cd3f 100644 --- a/modules/primer-layout/docs/grid.md +++ b/modules/primer-layout/docs/grid.md @@ -98,7 +98,7 @@ Column widths can be used with any other block or inline-block elements to add p ## Offset columns -Using column offset classes can push a div over X number of columns. They work responsively using the [breakpoints outlined below](/styleguide/css/modules/grid#responsive-grids). +Using column offset classes can push a div over X number of columns. They work responsively using the [breakpoints outlined below](../grid#responsive-grids). ```html title="Offset columns"
@@ -188,7 +188,7 @@ You can use column widths and other utilities on elements such as lists to creat ## Display table grids -Using [display table utilities](/styleguide/css/utilities/layout#display) with columns gives you some alternative layout options. +Using [display table utilities](../../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. @@ -205,7 +205,7 @@ A useful example is being able to keep the height of the container equal across
``` -You can also create an alternative [media object](/styleguide/css/utilities/layout#the-media-object) layout with `.display-table` and column widths. +You can also create an alternative [media object](../../utilities/layout#the-media-object) layout with `.display-table` and column widths. ```html title="Table grid alternative"
@@ -238,7 +238,7 @@ Note that table cells will fill the width of their container even when the total ## Flexbox grids -You can use [flex utilities](/styleguide/css/utilities/flexbox) on the container and columns to create a flexbox grid. +You can use [flex utilities](../../utilities/flexbox) on the container and columns to create a flexbox grid. 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. From 19cbb79e781895d2008278c1651c880177f8b257 Mon Sep 17 00:00:00 2001 From: Emily Date: Mon, 7 May 2018 10:16:30 -0700 Subject: [PATCH 21/40] remove centering link --- modules/primer-layout/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-layout/README.md b/modules/primer-layout/README.md index 326fac65..105372de 100644 --- a/modules/primer-layout/README.md +++ b/modules/primer-layout/README.md @@ -115,7 +115,7 @@ In practice, your columns will look like the example below. ##### Centered -Columns can be [centered](/utilities/#centering-content) by adding `.centered` to the `.column` class. +Columns can be centered by adding `.centered` to the `.column` class. ```html title="Grid centered"
From 48196e62632ebee071343445beef36ac6f81dd72 Mon Sep 17 00:00:00 2001 From: Emily Date: Mon, 7 May 2018 10:33:06 -0700 Subject: [PATCH 22/40] update box and form links --- modules/primer-box/README.md | 10 +++++----- modules/primer-forms/README.md | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/modules/primer-box/README.md b/modules/primer-box/README.md index c8773cd4..6ddffdcb 100644 --- a/modules/primer-box/README.md +++ b/modules/primer-box/README.md @@ -259,7 +259,7 @@ 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](/styleguide/css/styles/product/components/subhead) docs for more information. +`Box-danger` is often paired with a red heading. See the [subhead](../subhead) docs for more information. ```html
@@ -356,7 +356,7 @@ Use the `border-dashed` utility to apply a dashed border to a box. ## 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. +Flash alerts come in three different colors and can be used with icons and buttons, see the [alert documentation](../alerts) for more information. ```html
@@ -455,7 +455,7 @@ 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](../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. +Use [flexbox utilities](../../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
@@ -561,7 +561,7 @@ You can put forms in boxes. Often form submission buttons are aligned to the bot
``` -When a box is all by itself centered on a page you can use [column widths](/grid) to control the width of the box. If needed, break the mold a little and use [typography utilities](../utilities/typography) instead of the built in box title styles. +When a box is all by itself centered on a page you can use [column widths](../../objects/grid) to control the width of the box. If needed, break the mold a little and use [typography utilities](../../utilities/typography) instead of the built in box title styles. ```html
@@ -582,7 +582,7 @@ When a box is all by itself centered on a page you can use [column widths](/grid
``` -Box patterns can also be made with, and modified with [border utilities](../utilities/borders). +Box patterns can also be made with, and modified with [border utilities](../../utilities/borders). diff --git a/modules/primer-forms/README.md b/modules/primer-forms/README.md index 8747063d..48f303b3 100644 --- a/modules/primer-forms/README.md +++ b/modules/primer-forms/README.md @@ -176,7 +176,7 @@ Primer adds light `height` and `vertical-align` styles to ``s to match the size of [our small buttons](/buttons/#default-buttons). +Use the `.select-sm` class to resize both default and custom ` From e5e1fc9edcd7eb0f911b27e0b8a3e8be88df54fa Mon Sep 17 00:00:00 2001 From: Emily Date: Mon, 7 May 2018 10:33:42 -0700 Subject: [PATCH 23/40] update button links --- modules/primer-buttons/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-buttons/README.md b/modules/primer-buttons/README.md index 948843ba..3ebbe61e 100644 --- a/modules/primer-buttons/README.md +++ b/modules/primer-buttons/README.md @@ -175,7 +175,7 @@ You can easily append a count to a **small button**. Add the `.with-count` class
``` -You can also use the [counter](../../product/components/labels) component within buttons: +You can also use the [counter](../labels#counters) component within buttons: ```html