Adding layout component

Co-Authored-By: Vinicius Depizzol <vdepizzol@gmail.com>

docs/gatsby-config.js

@@ -0,0 +1,36 @@
+const path = require('path')
+
+module.exports = {
+  siteMetadata: {
+    title: 'Primer CSS',
+    shortName: 'CSS',
+    description: "CSS for GitHub's Primer design system",
+    imageUrl: 'https://user-images.githubusercontent.com/586552/47590375-121cad80-d93a-11e8-89f2-a1cf108e0548.png'
+  },
+  pathPrefix: '/css',
+  plugins: [
+    {
+      resolve: '@primer/gatsby-theme-doctocat',
+      options: {
+        defaultBranch: 'main',
+        repoRootPath: '..'
+      }
+    },
+    'gatsby-plugin-sass',
+    {
+      resolve: 'gatsby-plugin-svgr',
+      options: {
+        svgo: false
+      }
+    },
+    {
+      resolve: `gatsby-plugin-alias-imports`,
+      options: {
+        alias: {
+          'styled-components': path.resolve(__dirname, 'node_modules', 'styled-components'),
+          react: path.resolve(__dirname, 'node_modules', 'react')
+        }
+      }
+    }
+  ]
+}

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -89,6 +89,8 @@
       url: /components/header
     - title: Labels
       url: /components/labels
+    - title: Layout
+      url: /components/layout
     - title: Links
       url: /components/links
     - title: Loaders

src/layout/index.scss

@@ -2,3 +2,4 @@
 @import "./container.scss";
 @import "./grid.scss";
 @import "./grid-offset.scss";
+@import "./layout.scss";

src/layout/layout.scss

@@ -0,0 +1,130 @@
+// Layout component
+
+.Layout {
+
+  display: grid;
+  grid-gap: $spacer-3;
+
+  grid-template-columns: 1fr;
+
+  .Layout-main {
+    grid-area: main;
+  }
+
+  .Layout-sidebar {
+    grid-area: sidebar;
+  }
+
+  grid-template-areas:
+    "main"
+    "sidebar";
+
+  @media (min-width: $width-sm) {
+    grid-template-areas: "main sidebar";
+  }
+
+  @each $breakpoint in map-keys($sidebar-width) {
+    @include breakpoint($breakpoint) {
+      grid-template-columns: 1fr map-get($sidebar-width, $breakpoint);
+      column-gap: map-get($gutter, $breakpoint);
+    }
+  }
+}
+
+.Layout--sidebar-narrow {
+  @each $breakpoint in map-keys($sidebar-narrow-width) {
+    @include breakpoint($breakpoint) {
+      grid-template-columns: 1fr map-get($sidebar-narrow-width, $breakpoint);
+    }
+  }
+}
+
+.Layout--sidebar-wide {
+  @each $breakpoint in map-keys($sidebar-wide-width) {
+    @include breakpoint($breakpoint) {
+      grid-template-columns: 1fr map-get($sidebar-wide-width, $breakpoint);
+    }
+  }
+}
+
+.Layout--gutter-condensed {
+  @each $breakpoint in map-keys($gutter-condensed) {
+    @include breakpoint($breakpoint) {
+      column-gap: map-get($gutter-condensed, $breakpoint);
+    }
+  }
+}
+
+.Layout--gutter-spacious {
+  @each $breakpoint in map-keys($gutter-spacious) {
+    @include breakpoint($breakpoint) {
+      column-gap: map-get($gutter-spacious, $breakpoint);
+    }
+  }
+}
+
+.Layout--sidebar-priority {
+  grid-template-areas:
+    "sidebar"
+    "main";
+}
+
+.Layout--left-sidebar {
+  @media (min-width: $width-sm) {
+    grid-template-columns: map-get($sidebar-width, "sm") 1fr;
+
+    grid-template-areas: "sidebar main";
+  }
+
+  @each $breakpoint in map-keys($sidebar-width) {
+    @include breakpoint($breakpoint) {
+      grid-template-columns: map-get($sidebar-width, $breakpoint) 1fr;
+    }
+  }
+
+  &.Layout--sidebar-narrow {
+    @each $breakpoint in map-keys($sidebar-width) {
+      @include breakpoint($breakpoint) {
+        grid-template-columns: map-get($sidebar-narrow-width, $breakpoint) 1fr;
+      }
+    }
+  }
+
+  &.Layout--sidebar-wide {
+    @each $breakpoint in map-keys($sidebar-width) {
+      @include breakpoint($breakpoint) {
+        grid-template-columns: map-get($sidebar-wide-width, $breakpoint) 1fr;
+      }
+    }
+  }
+}
+
+.Layout-center-container-md {
+  max-width: $container-md + map-get($sidebar-width, xl) + map-get($gutter, xl);
+  margin-right: auto;
+  margin-left: auto;
+
+  > .container-md {
+    margin-left: 0;
+  }
+}
+
+.Layout-center-container-lg {
+  max-width: $container-lg + map-get($sidebar-width, xl) + map-get($gutter, xl);
+  margin-right: auto;
+  margin-left: auto;
+
+  > .container-lg {
+    margin-left: 0;
+  }
+}
+
+.Layout-center-container-xl {
+  max-width: $container-xl + map-get($sidebar-width, xl) + map-get($gutter, xl);
+  margin-right: auto;
+  margin-left: auto;
+
+  > .container-xl {
+    margin-left: 0;
+  }
+}

src/support/variables/layout.scss

@@ -141,3 +141,40 @@ $responsive-positions: (
   fixed,
   sticky
 ) !default;
+
+$sidebar-width: (
+  sm: 220px,
+  md: 256px,
+  lg: 296px,
+  xl: 320px
+) !default;
+
+$sidebar-narrow-width: (
+  md: 240px,
+  lg: 256px,
+  xl: 296px
+) !default;
+
+$sidebar-wide-width: (
+  md: 296px,
+  lg: 320px,
+  xl: 344px
+) !default;
+
+$gutter: (
+  md: $spacer-3,
+  lg: $spacer-4,
+  xl: $spacer-5
+) !default;
+
+$gutter-condensed: (
+  md: $spacer-3,
+  lg: $spacer-3,
+  xl: $spacer-4
+) !default;
+
+$gutter-spacious: (
+  md: $spacer-4,
+  lg: $spacer-5,
+  xl: $spacer-6
+) !default;