diff --git a/packages/core/src/utilities/font-size.scss b/packages/core/src/utilities/font-size.scss
index ffa6141b5e..d91696e527 100644
--- a/packages/core/src/utilities/font-size.scss
+++ b/packages/core/src/utilities/font-size.scss
@@ -61,7 +61,7 @@ Style guide: utilities.font-size
/*
Responsive font sizes
-Use a [breakpoint prefix]({{root}}/guidelines/responsive) to change the font size at specific breakpoints.
+Use a [breakpoint prefix](/guidelines/responsive) to change the font size at specific breakpoints.
_Resize your browser to see each breakpoint in action:_
diff --git a/packages/core/src/utilities/margin.scss b/packages/core/src/utilities/margin.scss
index 1041732be0..5ee307f3bf 100644
--- a/packages/core/src/utilities/margin.scss
+++ b/packages/core/src/utilities/margin.scss
@@ -8,7 +8,7 @@ Use the margin utility to change an element's margin.
**Format**: `ds-u-margin-[x|y|bottom|left|right|top]--[MULTIPLE]`
-[Read more about how the design system approaches spacing here.]({{root}}/layout/spacing)
+[Read more about how the design system approaches spacing here.](/layout/spacing)
@hide-markup
@@ -101,7 +101,7 @@ Style guide: utilities.margin
/*
Responsive margins
-Use a [breakpoint prefix]({{root}}/guidelines/responsive) to change the margin at specific breakpoints.
+Use a [breakpoint prefix](/guidelines/responsive) to change the margin at specific breakpoints.
_Resize your browser to see each breakpoint in action:_
diff --git a/packages/core/src/utilities/padding.scss b/packages/core/src/utilities/padding.scss
index c80748148e..289fe5a4c8 100644
--- a/packages/core/src/utilities/padding.scss
+++ b/packages/core/src/utilities/padding.scss
@@ -8,7 +8,7 @@ Use the padding utility to change an element's padding.
**Format**: `ds-u-padding-[x|y|bottom|left|right|top]--[MULTIPLE]`
-[Read more about how the design system approaches spacing here.]({{root}}/layout/spacing)
+[Read more about how the design system approaches spacing here.](/layout/spacing)
@hide-markup
@@ -63,7 +63,7 @@ Style guide: utilities.padding
/*
Responsive padding
-Use a [breakpoint prefix]({{root}}/guidelines/responsive) to change the padding at specific breakpoints.
+Use a [breakpoint prefix](/guidelines/responsive) to change the padding at specific breakpoints.
_Resize your browser to see each breakpoint in action:_
diff --git a/packages/core/src/utilities/text-align.scss b/packages/core/src/utilities/text-align.scss
index 8d0c120dc3..e7c9cfe0c8 100644
--- a/packages/core/src/utilities/text-align.scss
+++ b/packages/core/src/utilities/text-align.scss
@@ -41,7 +41,7 @@ Responsive text alignment
@responsive
-Use a [breakpoint prefix]({{root}}/guidelines/responsive) to change the text alignment at specific breakpoints.
+Use a [breakpoint prefix](/guidelines/responsive) to change the text alignment at specific breakpoints.
Markup:
diff --git a/packages/docs/src/pages/guidelines/themes.md b/packages/docs/src/pages/guidelines/themes.md
index 67bf515903..9f627e5bdf 100644
--- a/packages/docs/src/pages/guidelines/themes.md
+++ b/packages/docs/src/pages/guidelines/themes.md
@@ -20,7 +20,7 @@ To override Sass variables, create a new `.sass` or `.scss` file where you will
$color-primary: #ff0000;
```
-Then, in your main stylesheet, import your overrides file _before_ you [import the design system's Sass files]({{root}}/getting-started/):
+Then, in your main stylesheet, import your overrides file _before_ you [import the design system's Sass files](/startup/sass-and-css/#sass):
```css
/* main.scss */
@@ -32,11 +32,11 @@ Then, in your main stylesheet, import your overrides file _before_ you [import t
Sass variables are documented on the relevant documentation pages, and are defined in the `@cmsgov/design-system-support` package:
-* [Breakpoints]({{root}}/guidelines/responsive/)
-* [Colors]({{root}}/style/color/)
-* [Spacing]({{root}}/layout/spacing/)
-* [Type sizes]({{root}}/style/typography/)
-* You can also [browse all Sass variable files on GitHub](https://github.com/CMSgov/design-system/tree/master/packages/support/src).
+- [Breakpoints]({{root}}/guidelines/responsive/)
+- [Colors]({{root}}/style/color/)
+- [Spacing]({{root}}/layout/spacing/)
+- [Type sizes]({{root}}/style/typography/)
+- You can also [browse all Sass variable files on GitHub](https://github.com/CMSgov/design-system/tree/master/packages/support/src).
## CSS declarations
@@ -44,5 +44,5 @@ If you're not using Sass, another way to "theme" the design system is by overrid
## Learn more
-* [Previewing and compiling themes](https://github.com/CMSgov/design-system/wiki/site-packages-and-themes)
-* [View an example project with a Sass build process](https://github.com/CMSgov/design-system/tree/master/examples/react-app)
+- [Previewing and compiling themes](https://github.com/CMSgov/design-system/wiki/site-packages-and-themes)
+- [View an example project with a Sass build process](https://github.com/CMSgov/design-system/tree/master/examples/react-app)
diff --git a/packages/docs/src/pages/startup/sass-and-css.md b/packages/docs/src/pages/startup/sass-and-css.md
index 07841528b5..6f33e51bd4 100644
--- a/packages/docs/src/pages/startup/sass-and-css.md
+++ b/packages/docs/src/pages/startup/sass-and-css.md
@@ -18,14 +18,13 @@ For example:
[View an example](https://github.com/CMSgov/design-system/blob/master/examples/article/index.html)
-
Sass
+Sass
If you're already using Sass to style your site, another way to include the design system's styles is by importing its un-minified Sass file.
1. First, make sure your build system is configured so that the `node_modules` directory is in the list of Sass [`includePaths`](https://github.com/sass/node-sass#includepaths).
2. Add the following to your Sass file:
-
```css
@import '@cmsgov/design-system-core/src/index';
```
diff --git a/packages/layout/src/index.scss b/packages/layout/src/index.scss
index c2e03a6486..fbc2320f44 100644
--- a/packages/layout/src/index.scss
+++ b/packages/layout/src/index.scss
@@ -108,7 +108,7 @@ Mobile, tablet, and desktop grids
@responsive
-Each column class can include a [breakpoint "prefix"]({{root}}/guidelines/responsive) (`sm`, `md`, `lg`, `xl`), allowing you to change the column widths based on the viewport width.
+Each column class can include a [breakpoint "prefix"](/guidelines/responsive) (`sm`, `md`, `lg`, `xl`), allowing you to change the column widths based on the viewport width.
An element with a `ds-l-{breakpoint}-col--*` class will span `*` columns at viewports matching `breakpoint` and larger.
@@ -179,7 +179,7 @@ Style guide: layout.grid.nested
/*
Offsetting columns
-Offset columns using the [margin auto utility class]({{root}}/utilities/margin):
+Offset columns using the [margin auto utility class](/utilities/margin):
Markup:
@@ -199,7 +199,7 @@ Style guide: layout.grid.offset
/*
Alignment
-Align columns horizontally or vertically using [flexbox utility classes]({{root}}/utilities/flexbox). To align columns horizontally, use the `justify-content` utility class. To align columns vertically, use the `align-items` utility class.
+Align columns horizontally or vertically using [flexbox utility classes](/utilities/flexbox). To align columns horizontally, use the `justify-content` utility class. To align columns vertically, use the `align-items` utility class.
Markup:
@@ -268,7 +268,7 @@ Style guide: layout.grid.form-row
## Guidance
- Choose a 12-column grid with flexible column widths and fixed gutters.
-- Avoid text lines longer than 75 characters. Place text in narrower columns to keep text lines from becoming too wide or use the [measure utility classes]({{root}}/utilities/measure).
+- Avoid text lines longer than 75 characters. Place text in narrower columns to keep text lines from becoming too wide or use the [measure utility classes](/utilities/measure).
## Accessibility
diff --git a/packages/support/src/settings/_variables.layout.scss b/packages/support/src/settings/_variables.layout.scss
index c431aaf93f..384bfc009b 100644
--- a/packages/support/src/settings/_variables.layout.scss
+++ b/packages/support/src/settings/_variables.layout.scss
@@ -5,7 +5,7 @@ The design system uses multiples of `8px` for all spacing values: dimensions, pa
## Usage
-- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
+- Use the [margin](/utilities/margin) and [padding](/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)
## Learn more
@@ -17,16 +17,15 @@ Style guide: layout.spacing
$multiple: 8px !default;
$spacers: (
- 0,
- $multiple,
- $multiple * 2,
- $multiple * 3,
- $multiple * 4,
- $multiple * 5,
- $multiple * 6,
- $multiple * 7
- )
- !default;
+ 0,
+ $multiple,
+ $multiple * 2,
+ $multiple * 3,
+ $multiple * 4,
+ $multiple * 5,
+ $multiple * 6,
+ $multiple * 7
+) !default;
$spacer-1: nth($spacers, 2) !default; // 8px
$spacer-2: nth($spacers, 3) !default; // 16px
@@ -47,8 +46,12 @@ $width-lg: 1024px !default;
$width-xl: 1280px !default;
// Breakpoints
-$breakpoints: (sm: $width-sm, md: $width-md, lg: $width-lg, xl: $width-xl)
- !default;
+$breakpoints: (
+ sm: $width-sm,
+ md: $width-md,
+ lg: $width-lg,
+ xl: $width-xl
+) !default;
// Borders
$border-radius-circle: 100%;