Merge pull request #1013 from primer/fix-links

Fix docs links

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
 <div class="Box Box--condensed">
@@ -554,7 +554,7 @@ You can put forms in boxes. Often form submission buttons are aligned to the bot
 </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.
+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
 <div class="Box Box--spacious col-6 mx-auto text-center">
@@ -575,4 +575,4 @@ When a box is all by itself centered on a page you can use [column widths](/css/
 </div>
 ```
 
-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).

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
 <span class="Progress">

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).

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
 </div>
 ```
 
-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"
 <div class="d-table col-12">
@@ -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.
 

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

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
 

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)

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).
 

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:
 

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
 

docs/content/utilities/box-shadow.md

@@ -19,7 +19,7 @@ Default shadows are mainly used on things that need to appear slightly elevated,
 </div>
 ```
 
-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
 <div class="col-6">

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

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
 <div class="d-table table-fixed width-full">
@@ -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.
 </div>
 ```
 ### 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.
 

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).

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.
 
 
 

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 |
 | --- | --- | --- | --- | --- |