From 9afed8f518be0df0ba1412f6ede29744a1ef29df Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 3 Jan 2020 15:42:34 +0900 Subject: [PATCH] Remove /css from links --- docs/content/components/box.md | 6 +++--- docs/content/components/progress.md | 2 +- docs/content/getting-started/contributing.md | 6 +++--- docs/content/objects/grid.md | 6 +++--- docs/content/principles/index.md | 2 +- docs/content/support/breakpoints.md | 2 +- docs/content/support/index.md | 8 ++++---- docs/content/support/marketing-variables.md | 2 +- docs/content/tools/atom-packages.md | 4 ++-- docs/content/tools/linting.md | 4 ++-- docs/content/utilities/box-shadow.md | 2 +- docs/content/utilities/flexbox.md | 2 +- docs/content/utilities/layout.md | 6 +++--- docs/content/utilities/marketing-borders.md | 2 +- docs/content/utilities/marketing-layout.md | 2 +- docs/content/utilities/typography.md | 4 ++-- 16 files changed, 30 insertions(+), 30 deletions(-) diff --git a/docs/content/components/box.md b/docs/content/components/box.md index f23934fa8f..3e3f94ab22 100644 --- a/docs/content/components/box.md +++ b/docs/content/components/box.md @@ -447,7 +447,7 @@ Use `Counter--gray-dark` for a counter with a dark gray background and white tex 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. +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 live
@@ -554,7 +554,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](/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. +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 live
@@ -575,4 +575,4 @@ 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). +Box patterns can also be made with, and modified with [border utilities](/utilities/borders). diff --git a/docs/content/components/progress.md b/docs/content/components/progress.md index 1bcc34086f..1d29bb077d 100644 --- a/docs/content/components/progress.md +++ b/docs/content/components/progress.md @@ -6,7 +6,7 @@ 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. +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. ```html live diff --git a/docs/content/getting-started/contributing.md b/docs/content/getting-started/contributing.md index cdd720dac1..812790a90d 100644 --- a/docs/content/getting-started/contributing.md +++ b/docs/content/getting-started/contributing.md @@ -9,7 +9,7 @@ While this contributing guide is for GitHub employees, all contributions from th ### 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. +[Components](/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. Decisions to add new components are made on a case-by-case basis, with help from the GitHub Design Systems team. Some questions that we use to guide these decisions include: @@ -27,8 +27,8 @@ Decisions to add new components are made on a case-by-case basis, with help from 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: +- [Objects](/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](/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). diff --git a/docs/content/objects/grid.md b/docs/content/objects/grid.md index d2bccca035..f0043b2b93 100644 --- a/docs/content/objects/grid.md +++ b/docs/content/objects/grid.md @@ -225,7 +225,7 @@ You can use column widths and other utilities on elements such as lists to creat ## Display table grids -Using [display table utilities](/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. @@ -249,7 +249,7 @@ A useful example is being able to keep the height of the container equal across ``` -You can also create an alternative [media object](/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 live title="Table grid alternative"
@@ -286,7 +286,7 @@ Note that table cells will fill the width of their container even when the total ## Flexbox grids -You can use [flex utilities](/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. diff --git a/docs/content/principles/index.md b/docs/content/principles/index.md index de7dc00c58..4067cd4601 100644 --- a/docs/content/principles/index.md +++ b/docs/content/principles/index.md @@ -56,7 +56,7 @@ Many designers and developers will edit and add to our CSS. Write CSS in a way t * Choose verbose over clever. A little duplication is worthwhile if it adds clarity. * Don't prioritize being DRY if it means it's hard to read and understand, creates dependencies, or hides what the code is really doing. -* Avoid overusing pre-processor features that make the code less approachable. Keep it CSS'y and limit the use of Sass features like nesting, variables, functions. For more detail on this check out our [Sass guidelines and lint rules](/css/principles/scss). +* Avoid overusing pre-processor features that make the code less approachable. Keep it CSS'y and limit the use of Sass features like nesting, variables, functions. For more detail on this check out our [Sass guidelines and lint rules](/principles/scss). ## Components diff --git a/docs/content/support/breakpoints.md b/docs/content/support/breakpoints.md index fe34466255..22c8f9c23b 100644 --- a/docs/content/support/breakpoints.md +++ b/docs/content/support/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](/css/utilities/margin#responsive-margins), [padding](/css/utilities/padding#responsive-padding), [layout](/css/utilities/layout), [flexbox](/css/utilities/flexbox#responsive-flex-utilities), and the [grid](/css/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 diff --git a/docs/content/support/index.md b/docs/content/support/index.md index a0695cb326..948e8c54c4 100644 --- a/docs/content/support/index.md +++ b/docs/content/support/index.md @@ -12,7 +12,7 @@ We use Sass variables to keep color, typography, spacing, and other foundations We've documented variables, mixins, and the systems they are built on for the following: -- [Breakpoints](/css/support/breakpoints) -- [Colors](/css/support/color-system) -- [Spacing](/css/support/spacing) -- [Typography](/css/support/typography) +- [Breakpoints](/support/breakpoints) +- [Colors](/support/color-system) +- [Spacing](/support/spacing) +- [Typography](/support/typography) diff --git a/docs/content/support/marketing-variables.md b/docs/content/support/marketing-variables.md index 154a2a23f0..b1b2d75ed3 100644 --- a/docs/content/support/marketing-variables.md +++ b/docs/content/support/marketing-variables.md @@ -21,5 +21,5 @@ Starting where the `primer-core` spacing scale ends at spacer 6, the marketing s | 11 | 112 | | 12 | 128 | -See [primer-marketing-support](https://npm.im/primer-marketing-support) 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). +See [primer-marketing-support](https://npm.im/primer-marketing-support) 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). diff --git a/docs/content/tools/atom-packages.md b/docs/content/tools/atom-packages.md index 063027536c..851ef3f9ab 100644 --- a/docs/content/tools/atom-packages.md +++ b/docs/content/tools/atom-packages.md @@ -13,7 +13,7 @@ apm install $(curl -L https://raw.githubusercontent.com/primer/atom-packages/mas ## 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). +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](/utilities) and Rails helper tags for [Octicons](https://github.com/primer/octicons/tree/master/lib/octicons_helper#readme). Install [autocomplete-primer](https://atom.io/packages/autocomplete-primer) using Atom's package manager or enter this into your terminal: @@ -43,7 +43,7 @@ apm install pigments ## Stylelint linter -We use [Stylelint](https://stylelint.io/), an extension to the [Atom linter package](https://atom.io/packages/linter), for [linting our SCSS](/css/tools/linting). To prevent linting errors during the build we recommend you install [linter-stylelint](https://atom.io/packages/linter-stylelint), which will alert you of any errors locally while you work. +We use [Stylelint](https://stylelint.io/), an extension to the [Atom linter package](https://atom.io/packages/linter), for [linting our SCSS](/tools/linting). To prevent linting errors during the build we recommend you install [linter-stylelint](https://atom.io/packages/linter-stylelint), which will alert you of any errors locally while you work. Install [linter-stylelint](https://atom.io/packages/linter-stylelint) using Atom's package manager or enter this into your terminal: diff --git a/docs/content/tools/linting.md b/docs/content/tools/linting.md index 39e36ee44d..b8f124ef5c 100644 --- a/docs/content/tools/linting.md +++ b/docs/content/tools/linting.md @@ -3,7 +3,7 @@ title: Linting path: tools/linting --- -We use linters to enforce [coding principles and standards](/css/principles). On every pull request we run the linters on the code to make sure any changes meet our standards. When a commit contains code that doesn't meet the standards, the build fails which blocks merging into master and deploying to production. +We use linters to enforce [coding principles and standards](/principles). On every pull request we run the linters on the code to make sure any changes meet our standards. When a commit contains code that doesn't meet the standards, the build fails which blocks merging into master and deploying to production. For teams working on `github/github` this configuration is all setup for you. While we do recommend you also [setup a plugin](#plugins) in your editor, this is not required. @@ -78,7 +78,7 @@ The Design Systems team recommends using [Atom](https://atom.io/) with the [lint ![image](https://cloud.githubusercontent.com/assets/54012/21456489/6a10b370-c8f6-11e6-9199-bb3709e79794.png) -We also have a [list of Atom packages](/css/tools/atom-packages) that we find useful for development. +We also have a [list of Atom packages](/tools/atom-packages) that we find useful for development. ## HTML diff --git a/docs/content/utilities/box-shadow.md b/docs/content/utilities/box-shadow.md index 9185d7989b..999f65347e 100644 --- a/docs/content/utilities/box-shadow.md +++ b/docs/content/utilities/box-shadow.md @@ -19,7 +19,7 @@ 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). +These types of shadows are typically applied to elements with borders, such as the [Box component](/components/box). ```html live
diff --git a/docs/content/utilities/flexbox.md b/docs/content/utilities/flexbox.md index 7a86317b09..abff909359 100644 --- a/docs/content/utilities/flexbox.md +++ b/docs/content/utilities/flexbox.md @@ -689,7 +689,7 @@ Resize window to see the effect. ## Responsive flex utilities -All flexbox utilities can be adjusted per [breakpoint](/css/objects/grid#breakpoints) using the following formulas: +All flexbox utilities can be adjusted 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/docs/content/utilities/layout.md b/docs/content/utilities/layout.md index 4ed35b9e6a..6035a51993 100644 --- a/docs/content/utilities/layout.md +++ b/docs/content/utilities/layout.md @@ -54,7 +54,7 @@ element.classList.toggle('d-inline', visible) ### `display:table` wrapping issues -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). +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 live
@@ -68,7 +68,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](/css/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. +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. @@ -131,7 +131,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](/css/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. +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. diff --git a/docs/content/utilities/marketing-borders.md b/docs/content/utilities/marketing-borders.md index 9d7717c49b..f49bd307ff 100644 --- a/docs/content/utilities/marketing-borders.md +++ b/docs/content/utilities/marketing-borders.md @@ -7,4 +7,4 @@ source: 'https://github.com/primer/css/blob/master/src/marketing/utilities/borde bundle: marketing-utilities --- -The `.border-white-fade` styles are now part of [core border utilities](/css/utilities/borders#border-colors). +The `.border-white-fade` styles are now part of [core border utilities](/utilities/borders#border-colors). diff --git a/docs/content/utilities/marketing-layout.md b/docs/content/utilities/marketing-layout.md index 80e6d72458..20d9637a7b 100644 --- a/docs/content/utilities/marketing-layout.md +++ b/docs/content/utilities/marketing-layout.md @@ -7,7 +7,7 @@ source: 'https://github.com/primer/css/blob/master/src/marketing/utilities/layou bundle: marketing-utilities --- -Marketing layout utilities build on top of [primer-core utilities](/css/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. diff --git a/docs/content/utilities/typography.md b/docs/content/utilities/typography.md index 2844cd03a0..ff82661e81 100644 --- a/docs/content/utilities/typography.md +++ b/docs/content/utilities/typography.md @@ -6,11 +6,11 @@ source: 'https://github.com/primer/css/tree/master/src/utilities/typography.scss 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. +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](/support/typography#typography-variables) that you can use in components or custom CSS. -Font sizes are smaller on mobile and scale up at the `md` [breakpoint](/css/support/breakpoints) to be larger on desktop. +Font sizes are smaller on mobile and scale up at the `md` [breakpoint](/support/breakpoints) to be larger on desktop. | Scale | Font size: mobile | Font size: desktop | 1.25 line height | 1.5 line height | | --- | --- | --- | --- | --- |