summaryrefslogtreecommitdiffstats
path: root/assets/_primer/layout
diff options
context:
space:
mode:
Diffstat (limited to 'assets/_primer/layout')
-rw-r--r--assets/_primer/layout/container.scss30
-rw-r--r--assets/_primer/layout/grid.scss64
2 files changed, 94 insertions, 0 deletions
diff --git a/assets/_primer/layout/container.scss b/assets/_primer/layout/container.scss
new file mode 100644
index 0000000..7e70a6b
--- /dev/null
+++ b/assets/_primer/layout/container.scss
@@ -0,0 +1,30 @@
+// Fixed-width, centered column for site content.
+// Handy container styles that match our breakpoints
+
+// 544px
+.container-sm {
+ max-width: $width-sm;
+ margin-right: auto;
+ margin-left: auto;
+}
+
+// 768px
+.container-md {
+ max-width: $container-md;
+ margin-right: auto;
+ margin-left: auto;
+}
+
+// 1004px - this matches the current fixed width: 980px + padding: px-3
+.container-lg {
+ max-width: $container-lg;
+ margin-right: auto;
+ margin-left: auto;
+}
+
+// 1280px
+.container-xl {
+ max-width: $container-xl;
+ margin-right: auto;
+ margin-left: auto;
+}
diff --git a/assets/_primer/layout/grid.scss b/assets/_primer/layout/grid.scss
new file mode 100644
index 0000000..5126c6b
--- /dev/null
+++ b/assets/_primer/layout/grid.scss
@@ -0,0 +1,64 @@
+// GRID
+
+// Columns
+.col-1 { width: (1 / 12 * 100%); }
+.col-2 { width: (2 / 12 * 100%); }
+.col-3 { width: (3 / 12 * 100%); }
+.col-4 { width: (4 / 12 * 100%); }
+.col-5 { width: (5 / 12 * 100%); }
+.col-6 { width: (6 / 12 * 100%); }
+.col-7 { width: (7 / 12 * 100%); }
+.col-8 { width: (8 / 12 * 100%); }
+.col-9 { width: (9 / 12 * 100%); }
+.col-10 { width: (10 / 12 * 100%); }
+.col-11 { width: (11 / 12 * 100%); }
+.col-12 { width: 100%; }
+
+@each $breakpoint in map-keys($breakpoints) {
+ @include breakpoint($breakpoint) {
+ .col-#{$breakpoint}-1 { width: ( 1 / 12 * 100%); }
+ .col-#{$breakpoint}-2 { width: ( 2 / 12 * 100%); }
+ .col-#{$breakpoint}-3 { width: ( 3 / 12 * 100%); }
+ .col-#{$breakpoint}-4 { width: ( 4 / 12 * 100%); }
+ .col-#{$breakpoint}-5 { width: ( 5 / 12 * 100%); }
+ .col-#{$breakpoint}-6 { width: ( 6 / 12 * 100%); }
+ .col-#{$breakpoint}-7 { width: ( 7 / 12 * 100%); }
+ .col-#{$breakpoint}-8 { width: ( 8 / 12 * 100%); }
+ .col-#{$breakpoint}-9 { width: ( 9 / 12 * 100%); }
+ .col-#{$breakpoint}-10 { width: ( 10 / 12 * 100%); }
+ .col-#{$breakpoint}-11 { width: ( 11 / 12 * 100%); }
+ .col-#{$breakpoint}-12 { width: 100%; }
+ }
+}
+
+// Gutters
+// Apply padding and a negative margin to the outside of the container
+@mixin gutters ($gutter-width: $spacer-3) {
+ margin-right: -$gutter-width;
+ margin-left: -$gutter-width;
+
+ > [class*="col-"] {
+ padding-right: $gutter-width !important;
+ padding-left: $gutter-width !important;
+ }
+}
+
+.gutter {
+ @include gutters($spacer-3);
+}
+
+.gutter-condensed {
+ @include gutters($spacer-2);
+}
+
+.gutter-spacious {
+ @include gutters($spacer-4);
+}
+
+@each $breakpoint in map-keys($breakpoints) {
+ @include breakpoint($breakpoint) {
+ .gutter-#{$breakpoint} { @include gutters($spacer-3); }
+ .gutter-#{$breakpoint}-condensed { @include gutters($spacer-2); }
+ .gutter-#{$breakpoint}-spacious { @include gutters($spacer-4); }
+ }
+}