feat: add breakpoints & containers

RickEyre · RickEyre · commit 50b0c80ebb47 · 2019-10-02T18:19:13.000-04:00
diff --git a/packages/panda-san/src/index.scss b/packages/panda-san/src/index.scss
@@ -1,2 +1,4 @@
 @import 'variables/index';
+@import 'mixins/index';
 @import 'core/index';
+@import 'layout/index';
diff --git a/packages/panda-san/src/layout/container.scss b/packages/panda-san/src/layout/container.scss
@@ -0,0 +1,10 @@
+.container {
+  margin: 0 auto;
+  max-width: 1344px;
+
+  @each $breakpoint-name, $gutter in $container-gutters {
+    @include breakpoint($breakpoint-name) {
+      padding: 0 $gutter;
+    }
+  }
+}
diff --git a/packages/panda-san/src/layout/index.scss b/packages/panda-san/src/layout/index.scss
@@ -0,0 +1 @@
+@import 'container';
diff --git a/packages/panda-san/src/mixins/breakpoints.scss b/packages/panda-san/src/mixins/breakpoints.scss
@@ -0,0 +1,5 @@
+@mixin breakpoint($breakpoint-name) {
+  @media (min-width: map-get($breakpoints, $breakpoint-name)) {
+    @content;
+  }
+}
diff --git a/packages/panda-san/src/mixins/index.scss b/packages/panda-san/src/mixins/index.scss
@@ -0,0 +1 @@
+@import 'breakpoints';
diff --git a/packages/panda-san/src/variables/breakpoints.scss b/packages/panda-san/src/variables/breakpoints.scss
@@ -0,0 +1,11 @@
+$mobile: 768px;
+$tablet: 1023px;
+$desktop: 1215px;
+$widescreen: 1407px;
+
+$breakpoints: (
+  mobile: $mobile,
+  tablet: $tablet,
+  desktop: $desktop,
+  widescreen: $widescreen
+);
diff --git a/packages/panda-san/src/variables/container.scss b/packages/panda-san/src/variables/container.scss
@@ -0,0 +1,6 @@
+$container-gutters: (
+  widescreen: 32px,
+  desktop: 32px,
+  tablet: 0,
+  mobile: 0
+);
diff --git a/packages/panda-san/src/variables/index.scss b/packages/panda-san/src/variables/index.scss
@@ -1 +1,3 @@
+@import 'breakpoints';
+@import 'container';
 @import 'font';

Original file line number	Diff line number	Diff line change
`@@ -1 +1,3 @@`
	`1`	`+@import 'breakpoints';`
	`2`	`+@import 'container';`
`1`	`3`	`@import 'font';`