+
+```
+
+### Reversed grid
+
+To reverse the order of columns, use `float-right` to float columns to the right.
+
+```html
+
+ My column
+
+
+ Looks better
+
+
+ Than your column
+
+
+
+```
+
+## Nesting
+You can infinitely nest grid layouts within other columns since the column widths are percentage based. With great flexibility comes great responsibility - be sensible with how far you nest!
+
+```html
+
+ One
+
+
+ Two
+
+
+ Three
+
+
+
+```
+
+## Centering a column
+
+Use `.mx-auto` to center columns within a container.
+```html
+
+
+ Unnested
+
+
+
+
+
+
+ 1 x Nested
+
+
+
+
+ 2 x Nested
+
+
+ 2 x Nested
+
+
+```
+
+
+## Column widths
+Column widths can be used with any other block or inline-block elements to add percentage-based widths.
+```html
+
+ This column is the center of my world.
+
+
+
+```
+
+## 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).
+
+```html
+
+ <%= octicon "heart" %> Don't go bacon my heart.
+
+ T-bone drumstick alcatra ribeye. Strip steak chuck andouille tenderloin bacon tri-tip ball tip beef capicola rump. Meatloaf bresaola drumstick ball tip salami. Drumstick ham bacon alcatra pig porchetta, spare ribs leberkas pork belly.
+
+
+```
+
+## Gutters
+Use gutter styles or padding utilities to create gutters. You can use the default gutter style, `gutter`, or either of its modifiers, `gutter-condensed` or `gutter-spacious`. Gutter styles also support responsive breakpoint modifiers. Gutter styles add padding to the left and right side of each column and apply a negative margin to the container to ensure content inside each column lines up with content outside of the grid.
+
+```html
+.offset-1
+ .offset-2
+
+
+```
+
+Use padding utilities to create gutters for more customized layouts.
+
+```html
+
+
+ .col-md-3
+
+
+ .col-md-3
+
+
+ .col-md-3
+
+
+.col-md-3
+
+
+
+
+ .pr-2
+
+
+ .px-2
+
+
+ .px-2
+
+
+.pl-2
+
+
+```
+
+
+## Inline-block grids
+Use column widths with `d-inline-block` as an alternative to floated grids.
+
+```html
+
+
+ .pr-2
+
+
+.pl-2
+
+
+```
+
+You can use column widths and other utilities on elements such as lists to create the layout you need while keeping the markup semantically correct.
+```html
+
+ .col-4 .d-inline-block
+
+ .col-4 .d-inline-block
+
+ .col-4 .d-inline-block
+
+-
+
+
+
+```
+You can also create an alternative [media object](/styleguide/css/utilities/layout#the-media-object) layout with `.display-table` and column widths.
+
+```html
+
+ Bacon ipsum dolor amet leberkas pork pig kielbasa shankle ribeye meatball, salami alcatra venison.
+
+ Pork chop cupim cow turkey frankfurter, landjaeger fatback hamburger meatball salami spare ribs. Rump tenderloin salami, hamburger frankfurter landjaeger andouille.
+
+ Brisket tongue frankfurter cupim strip steak rump picanha pancetta pork pig kevin pastrami biltong. Shankle venison meatball swine sausage ground round. Tail pork loin ribeye kielbasa short ribs pork chop.
+
+
+
+```
+
+Note that table cells will fill the width of their container even when the total columns doesn't add up to 12.
+
+```html
+
+ 
+
+
+
+
+
+```
+
+## Flexbox grids
+
+You can use [flex utilities](/styleguide/css/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.
+
+```html
+
+ .col-4 .d-table-cell
+
+ .col-4 .d-table-cell
+
+ .col-2 .d-table-cell
+
+
+
+```
+
+
+## Responsive grids
+All the column width classes can be set per breakpoint to create responsive grid layouts. Each responsive style is applied to the specified breakpoint and up.
+
+### Breakpoints
+We use abbreviations for each breakpoint to keep the class names concise.
+
+| Shorthand | Description |
+| --- | --- |
+| sm | min-width: 544px |
+| md | min-width: 768px |
+| lg | min-width: 1004px |
+| xl | min-width: 1280px |
+
+**Note:** The `lg` breakpoint matches our current page width of `980px` including left and right padding of `12px`. This is so that content doesn't touch the edges of the window when resized.
+
+
+
+
+
+
+ + +In this example at the `sm` breakpoint 2 columns will show, at the `md` breakpoint 4 columns will show, and at the `lg` breakpoint 6 columns will show. + +```html +
+
+```
+
+For demonstration, this is how the above example would look at the `sm` breakpoint.
+
+```html
+
+ .col-sm-6 .col-md-3 .col-lg-2
+
+
+ .col-sm-6 .col-md-3 .col-lg-2
+
+
+ .col-sm-6 .col-md-3 .col-lg-2
+
+
+ .col-sm-6 .col-md-3 .col-lg-2
+
+
+ .col-sm-6 .col-md-3 .col-lg-2
+
+
+ .col-sm-6 .col-md-3 .col-lg-2
+
+
+
+```
+This is how that same example would look at the `md` breakpoint.
+
+```html
+
+ .col-sm-6
+
+
+ .col-sm-6
+
+
+ .col-sm-6
+
+
+ .col-sm-6
+
+
+ .col-sm-6
+
+
+ .col-sm-6
+
+
+
+```
+
+This is how that example would look at the `lg` breakpoint.
+
+```html
+
+ .col-md-3
+
+
+ .col-md-3
+
+
+ .col-md-3
+
+
+ .col-md-3
+
+
+ .col-md-3
+
+
+ .col-md-3
+
+
+
+```
+
+## Containers
+Container widths match our breakpoints and are available at a `md`, `lg`, and `xl` size. Containers apply a max-width rather than a fixed width for responsive layouts, and they center the container.
+
+```html
+
+ .col-lg-2
+
+
+ .col-lg-2
+
+
+ .col-lg-2
+
+
+ .col-lg-2
+
+
+ .col-lg-2
+
+
+ .col-lg-2
+
+
+ .container-md, max-width 768px
+
+
+
+ .container-lg, max-width 1012px
+
+
+
+ .container-xl, max-width 1280px
+
+```
+
+**Note:** `.container` is being replaced with `.container-lg`. To match the current fixed page width use `.container-lg` with `px-3`. This gives the container padding on smaller screens which works better for responsive layouts.
From 51b04606dbe309b7d95c58cd1b27cab44268c111 Mon Sep 17 00:00:00 2001
From: broccolini ...
`
+
+| Breakpoint | Syntax | Description |
+| --- | --- | --- |
+| Small | sm | min-width: 544px |
+| Medium | md | min-width: 768px |
+| Large | lg | min-width: 1012px |
+| Extra-large | xl | min-width: 1280px |
+
+**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.
+
+## Breakpoint variables
+
+The above values are defined as variables, and then put into a Sass map that generates the media query mixin.
+
+```scss
+
+// breakpoints
+$width-xs: 0;
+$width-sm: 544px;
+$width-md: 768px;
+$width-lg: 1012px;
+$width-xl: 1280px;
+
+$breakpoints: (
+ // Small screen / phone
+ sm: $width-sm,
+ // Medium screen / tablet
+ md: $width-md,
+ // Large screen / desktop (980 + (12 * 2)) <= container + gutters
+ lg: $width-lg,
+ // Extra large screen / wide desktop
+ xl: $width-xl
+) !default;
+
+```
+
+## Media query mixins
+Use media query mixins when you want to change CSS properties at a particular breakpoint. The media query mixin works by passing in a breakpoint value, such as `breakpoint(md)`.
+
+Media queries are scoped from each breakpoint and upwards. In the example below, the font size is `28px` until the viewport size meets the `lg` breakpoint, from there upwards—including through the `xl` breakpoint—the font size will be `32px`.
+
+```
+.styles {
+ font-size: 28px;
+ @include breakpoint(md) { font-size: 32px; }
+}
+```
diff --git a/modules/primer-support/docs/color-system.md b/modules/primer-support/docs/color-system.md
new file mode 100644
index 0000000000..449deb81f0
--- /dev/null
+++ b/modules/primer-support/docs/color-system.md
@@ -0,0 +1,392 @@
+---
+title: Color system
+status_issue: https://github.com/github/design-systems/issues/301
+status: New release
+source: https://github.com/primer/primer-css/blob/master/modules/primer-support/lib/variables/color-system.scss
+---
+
+{:toc}
+
+## Color palette
+
+
+
+
+## Color variables
+
+
+
+ Gray
+
+
+ Blue
+
+
+ Green
+
+
+ Purple
+
+
+ Yellow
+
+
+ Orange
+
+
+ Red
+
+
+White
+
+
+
diff --git a/modules/primer-support/docs/spacing.md b/modules/primer-support/docs/spacing.md
new file mode 100644
index 0000000000..262495e639
--- /dev/null
+++ b/modules/primer-support/docs/spacing.md
@@ -0,0 +1,50 @@
+---
+title: Spacing
+status: Stable
+source: https://github.com/primer/primer-css/blob/master/modules/primer-support/lib/variables/layout.scss
+---
+
+{:toc}
+
+## Spacing scale
+The spacing scale is a **base-8** scale. We chose a base-8 scale because eight is a highly composable number (it can be divided and multiplied many times and result in whole numbers), yet allows spacing dense enough for GitHub's UI. The scale's exception is that it begins at 4px to allow smaller padding and margin for denser parts of the site, from there on it steps up consistently in equal values of `8px`.
+
+| Scale | Value |
+| --- | --- |
+| 0 | 0 |
+| 1 | 4px |
+| 2 | 8px |
+| 3 | 16px |
+| 4 | 24px |
+| 5 | 32px |
+| 6 | 40px |
+
+The spacing scale is used for [margin](./utilities/margin) and [padding](./utilities/padding) utilities, and via variables within components.
+
+## Em-based spacing
+Ems are used for spacing within components such as buttons and form elements. We stick to common fractions for em values so that, in combination with typography and line-height, the total height lands on sensible numbers.
+
+We aim for whole numbers, however, GitHub's body font-size is 14px which is difficult to work with, so we sometimes can't achieve a whole number. Less desirable values are highlighted in red below.
+
+| Fraction | Y Padding (em) | Total height at 14px | Total height at 16px |
+| --- | --- | --- | --- |
+| 3/4 | .75 | 42 | 48 |
+| 1/2 | .5 | 35 | 40 |
+| 3/8 | .375 | 31.5 | 36 |
+| 1/4 | .25 | 28 | 32 |
+| 1/8 | .125 | 24.5 | 28 |
+
+We recommend using the fractions shown above. To calculate values with other font-sizes or em values, we suggest using [Formula](http://jxnblk.com/formula/).
+
+## Spacer Variables
+
+These variables match the above scale and are encouraged to be used within components. They are also used in our [margin](./utilities/margin) and [padding utilities](./utilities/padding).
+
+```scss
+$spacer-1: 4px;
+$spacer-2: 8px;
+$spacer-3: 16px;
+$spacer-4: 24px;
+$spacer-5: 32px;
+$spacer-6: 40px;
+```
diff --git a/modules/primer-support/docs/typography.md b/modules/primer-support/docs/typography.md
new file mode 100644
index 0000000000..2eb4b9a9c7
--- /dev/null
+++ b/modules/primer-support/docs/typography.md
@@ -0,0 +1,90 @@
+---
+title: Typography
+status_issue: https://github.com/github/design-systems/issues/329
+status: New release
+source: https://github.com/primer/primer-css/blob/master/modules/primer-support/lib/variables/typography.scss
+---
+
+{:toc}
+
+## Type Scale
+
+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.
+
+| Scale | Font size: mobile | Font size: desktop | 1.25 line height | 1.5 line height |
+| --- | --- | --- | --- | --- |
+| 00 | 40px | 48px | 60 | 72 |
+| 0 | 32px | 40px | 50 | 60 |
+| 1 | 26px | 32px | 40 | 48 |
+| 2 | 22px | 24px | 30 | 36 |
+| 3 | 18px | 20px | 25 | 30 |
+| 4 | 16px | 16px | 20 | 24 |
+| 5 | 14px | 14px | 17.5 | 21 |
+| 6 | 12px | 12px | 15 | 18 |
+
+The typography scale is used to create [typography utilities](./utilities/typography).
+
+## Typography variables
+
+#### Font size variables
+```scss
+// Heading sizes - mobile
+// h4—h6 remain the same size on both mobile & desktop
+$h00-size-mobile: 40px;
+$h0-size-mobile: 32px;
+$h1-size-mobile: 26px;
+$h2-size-mobile: 22px;
+$h3-size-mobile: 18px;
+
+// Heading sizes - desktop
+$h00-size: 48px;
+$h0-size: 40px;
+$h1-size: 32px;
+$h2-size: 24px;
+$h3-size: 20px;
+$h4-size: 16px;
+$h5-size: 14px;
+$h6-size: 12px;
+```
+
+#### Font weight variables
+```scss
+$font-weight-bold: 600 !default;
+$font-weight-light: 300 !default;
+```
+
+#### Line height variables
+```scss
+$lh-condensed-ultra: 1 !default;
+$lh-condensed: 1.25 !default;
+$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.
+
+Heading mixins are available for `h1` through to `h6`, this includes the font-size and font-weight. Example:
+
+```scss
+.styles {
+ @include h1;
+}
+```
+
+Responsive heading mixins can be used to adjust the font-size between the `sm` and `lg` breakpoint. Only headings 1—3 are responsive. Heading 4—6 are small enough to remain the same between mobile and desktop. Responsive heading mixins include the font-size and font-weight as well as the media query. To use a responsive heading mixin, postfix the heading with `-responsive`:
+
+```scss
+.styles {
+ @include h1-responsive;
+}
+```
+
+Responsive type scale mixins are also available. Type scale mixins apply a font-size that gets slightly bigger at the `lg` breakpoint. They do not apply a font-weight. Like the responsive heading mixins, they are only available for size `f1` to `f3` and are postfixed with `-responsive` as in the example below:
+
+```scss
+.style {
+ @include f1-responsive;
+}
+```
From d3ce5580d07b4a2ffd62da4a288c73fef55aaada Mon Sep 17 00:00:00 2001
From: broccolini
+
+
+ Gray
+
+
+ Gray
+
+
+ $gray-500
+#6a737d
+
+
+ $gray-000
+
+
+ $gray-100
+
+
+ $gray-200
+
+
+ $gray-300
+
+
+ $gray-400
+
+
+ $gray-500
+
+
+ $gray-600
+
+
+ $gray-700
+
+
+ $gray-800
+
+
+ $gray-900
+
+
+
+ Blue
+
+
+ Blue
+
+
+ $blue-500
+#0366d6
+
+
+ $blue-000
+
+
+ $blue-100
+
+
+ $blue-200
+
+
+ $blue-300
+
+
+ $blue-400
+
+
+ $blue-500
+
+
+ $blue-600
+
+
+ $blue-700
+
+
+ $blue-800
+
+
+ $blue-900
+
+
+
+ Green
+
+
+ Green
+
+
+ $green-500
+#28a745
+
+
+ $green-000
+
+
+ $green-100
+
+
+ $green-200
+
+
+ $green-300
+
+
+ $green-400
+
+
+ $green-500
+
+
+ $green-600
+
+
+ $green-700
+
+
+ $green-800
+
+
+ $green-900
+
+
+
+ Purple
+
+
+ Purple
+
+
+ $purple-500
+#6f42c1
+
+
+ $purple-000
+
+
+ $purple-100
+
+
+ $purple-200
+
+
+ $purple-300
+
+
+ $purple-400
+
+
+ $purple-500
+
+
+ $purple-600
+
+
+ $purple-700
+
+
+ $purple-800
+
+
+ $purple-900
+
+
+
+ Yellow
+
+
+ Yellow
+
+
+ $yellow-500
+#ffd93d
+
+
+ $yellow-000
+
+
+ $yellow-100
+
+
+ $yellow-200
+
+
+ $yellow-300
+
+
+ $yellow-400
+
+
+ $yellow-500
+
+
+ $yellow-600
+
+
+ $yellow-700
+
+
+ $yellow-800
+
+
+ $yellow-900
+
+
+
+ Orange
+
+
+ Orange
+
+
+ $orange-500
+#f66a0a
+
+
+ $orange-000
+
+
+ $orange-100
+
+
+ $orange-200
+
+
+ $orange-300
+
+
+ $orange-400
+
+
+ $orange-500
+
+
+ $orange-600
+
+
+ $orange-700
+
+
+ $orange-800
+
+
+ $orange-900
+
+
+
+Red
+
+
+ Red
+
+
+ $red-500
+#dc3545
+
+
+ $red-000
+
+
+ $red-100
+
+
+ $red-200
+
+
+ $red-300
+
+
+ $red-400
+
+
+ $red-500
+
+
+ $red-600
+
+
+ $red-700
+
+
+ $red-800
+
+
+ $red-900
+
+
+
+
+
+
+
+ Black fades
+
+
+ Black
+
+
+ $black
+rgb(27,31,35) #1b1f23
Black fades apply alpha transparency to the $black variable. The black color value has a slight blue hue to match our grays.
+
+
+ $black-fade-15
+
+
+ $black-fade-30
+
+
+ $black-fade-50
+
+
+ $black-fade-70
+
+
+ $black-fade-85
+
+
+
+White fades
+
+
+ White
+
+
+ $white
+rgb(255, 255, 255) #fff
White fades apply alpha transparency to the $white variable, below these are shown overlaid on a dark gray background.
+
+
+
+
+
+
+ $white-fade-15
+
+
+ $white-fade-30
+
+
+ $white-fade-50
+
+
+ $white-fade-70
+
+
+ $white-fade-85
+