From f34b08b67d6a35a87aab781bd0d9a5dc93ada184 Mon Sep 17 00:00:00 2001 From: Ryan Wilke Date: Tue, 17 Oct 2017 18:45:07 +0200 Subject: [PATCH] Flexbox Grid (#47) * Fixed the clone URL issue * worked on the flexbox grid and documented it well * Trigger a Codeship build * Fix grid issues and document the responsive columns. * Fixed some responsive issues. * Added a tablet size for the snapshots. --- assets/stylesheets/shipyard/_components.sass | 1 - assets/stylesheets/shipyard/_utilities.sass | 1 + .../shipyard/components/_boxes.sass | 2 +- assets/stylesheets/shipyard/core/_grid.sass | 9 +- .../shipyard/utilities/_margin.sass | 7 ++ .../shipyard/utilities/_typography.sass | 8 -- ci/percy | 2 +- styleguide/_assets/css/application.sass | 1 + styleguide/_assets/css/views.sass | 2 +- styleguide/components/grid.md | 116 +++++++++++++----- 10 files changed, 107 insertions(+), 42 deletions(-) create mode 100644 assets/stylesheets/shipyard/utilities/_margin.sass diff --git a/assets/stylesheets/shipyard/_components.sass b/assets/stylesheets/shipyard/_components.sass index 6e9980dc..49e81fd9 100644 --- a/assets/stylesheets/shipyard/_components.sass +++ b/assets/stylesheets/shipyard/_components.sass @@ -1,4 +1,3 @@ -@import shipyard/components/header @import shipyard/components/code @import shipyard/components/buttons @import shipyard/components/icons diff --git a/assets/stylesheets/shipyard/_utilities.sass b/assets/stylesheets/shipyard/_utilities.sass index f25939d4..f22c6e95 100644 --- a/assets/stylesheets/shipyard/_utilities.sass +++ b/assets/stylesheets/shipyard/_utilities.sass @@ -2,3 +2,4 @@ @import shipyard/utilities/display @import shipyard/utilities/positioning @import shipyard/utilities/typography +@import shipyard/utilities/margin diff --git a/assets/stylesheets/shipyard/components/_boxes.sass b/assets/stylesheets/shipyard/components/_boxes.sass index 693dba5f..7cde5bfd 100644 --- a/assets/stylesheets/shipyard/components/_boxes.sass +++ b/assets/stylesheets/shipyard/components/_boxes.sass @@ -14,7 +14,7 @@ background: $gray-lighter &-rounded - border-radius: 50% + border-radius: 1000px &-link color: $blue diff --git a/assets/stylesheets/shipyard/core/_grid.sass b/assets/stylesheets/shipyard/core/_grid.sass index 579c7591..cd04416a 100644 --- a/assets/stylesheets/shipyard/core/_grid.sass +++ b/assets/stylesheets/shipyard/core/_grid.sass @@ -13,7 +13,8 @@ $widths: (auto, 5, 10, 15, 20, 25, 30, 33, 35, 40, 45, 50, 55, 60, 65, 66, 70, 7 @mixin column-sizes @each $width in $widths &-#{$width} - +column-style(width, $width) + +column-style(max-width, $width) + +column-style(flex-basis, $width) &-offset-#{$width} +column-style(margin-left, $width) @@ -30,11 +31,15 @@ $widths: (auto, 5, 10, 15, 20, 25, 30, 33, 35, 40, 45, 50, 55, 60, 65, 66, 70, 7 .col display: block - float: left position: relative + flex-basis: 0 + flex-grow: 1 + flex-shrink: 1 +responsive-padding(left right) &-container + display: flex + flex-wrap: wrap +clearfix +responsive-margin(left right, $divisor: -2) diff --git a/assets/stylesheets/shipyard/utilities/_margin.sass b/assets/stylesheets/shipyard/utilities/_margin.sass new file mode 100644 index 00000000..62012134 --- /dev/null +++ b/assets/stylesheets/shipyard/utilities/_margin.sass @@ -0,0 +1,7 @@ +.margin + @each $direction in (top, right, bottom, left) + &-#{$direction} + +all-media-sizes + @each $size, $value in (none: 0, xxs: 5px, xs: 10px, sm: 15px, md: 20px, lg: 30px, xl: 40px, xxl: 50px) + &-#{$size} + margin-#{$direction}: $value diff --git a/assets/stylesheets/shipyard/utilities/_typography.sass b/assets/stylesheets/shipyard/utilities/_typography.sass index e5b10740..0070c299 100644 --- a/assets/stylesheets/shipyard/utilities/_typography.sass +++ b/assets/stylesheets/shipyard/utilities/_typography.sass @@ -34,14 +34,6 @@ &-#{$value} text-align: $value -.margin - @each $direction in (top, right, bottom, left) - &-#{$direction} - +all-media-sizes - @each $size, $value in (none: 0, xxs: 5px, xs: 10px, sm: 15px, md: 20px, lg: 30px, xl: 40px, xxl: 50px) - &-#{$size} - margin-#{$direction}: $value - .text &-shadow text-shadow: 0 1px 0 rgba(#000,.08) diff --git a/ci/percy b/ci/percy index dfca5be5..b3beb56f 100644 --- a/ci/percy +++ b/ci/percy @@ -13,4 +13,4 @@ cd ../ pwd echo -e "\n\n************** Percy Snapshot **************" -bundle exec percy snapshot --widths "375,1280" styleguide/_site/ +bundle exec percy snapshot --widths "375,768,1280" styleguide/_site/ diff --git a/styleguide/_assets/css/application.sass b/styleguide/_assets/css/application.sass index c7897303..bdc260de 100644 --- a/styleguide/_assets/css/application.sass +++ b/styleguide/_assets/css/application.sass @@ -1,6 +1,7 @@ $font-family: "museo-sans-rounded", "Museo Sans Rounded", Arial, sans-serif $font-monospace: 'Roboto Mono', monospace @import shipyard +@import shipyard/components/header @import url('https://use.typekit.net/wel6tpj.css') @import url('https://fonts.googleapis.com/css?family=Roboto+Mono') diff --git a/styleguide/_assets/css/views.sass b/styleguide/_assets/css/views.sass index 04623a21..d6b8ed74 100644 --- a/styleguide/_assets/css/views.sass +++ b/styleguide/_assets/css/views.sass @@ -5,7 +5,7 @@ code @extend .code-inline div.highlighter-rouge & @extend .code-block - margin: 0 0 30px + margin: 30px 0 hr +respond-to(margin, (x0: 30px 0, x1: 40px 0, x2: 50px 0)) diff --git a/styleguide/components/grid.md b/styleguide/components/grid.md index 110311b0..fd96f6d0 100644 --- a/styleguide/components/grid.md +++ b/styleguide/components/grid.md @@ -1,66 +1,126 @@ --- title: Shipyard Grid -description: The grid is percentage-based and also entirely responsive. Each class needs the foundational `.col` class in order to function properly, and also should be contained inside the `.col-container` as well. -example_one: [10,20,25,33] -example_two: [50,55,60,65,70,75,80,85,90,95,100] -example_three: [25,35,45,50,55,60,65,70,75] +description: The Shipyard grid is a percentage-based, flexbox grid and is entirely responsive. Each class needs the foundational `.col` class in order to function properly, and also should be contained inside the `.col-container` as well. +container_classes: col-container margin-top-xs margin-top-x1-sm margin-top-x2-md +box_classes: box-secondary text-light text-sm strong align-center +example_flex_columns: [10,20,25,33,50] +example_sizes: [5,10,15,20,25,30,33,35,40,45,50,55,60,65,66,70,75,80,85,90,95,100] +example_offsets: [5,10,15,20,25,30,35,40,45,50,55,60,65,70,75] --- {% include page-heading.html page=page %} --- -{% for example in page.example_one %} -
+### Flexible Columns `.col` +

By default, the flexbox-based grid will automatically size each column inside the container.

+ +{% for example in page.example_flex_columns %} +
{% assign num = 100 | divided_by: example %} {% for i in (1..num) %} -
-
{{ example }}
+
+
{{ example }}
{% endfor %}
{% endfor %} - -
+
-
66
+
66
-
-
33
+
+
auto
+```html +
+
+
+
+
+``` + --- ### Column Sizes `.col-{ n }` +

The column sizes are percentage-based and available in any size from `5-100` in increments of 5.

-{% for i in page.example_two %} -
-
-
{{ i }}
-
- {% if i < 100 %} -
-
{{ 100 | minus: i }}
+{% for example in page.example_sizes %} +
+ {% assign num = 100 | divided_by: example %} + {% for i in (1..num) %} +
+
{{ example }}
+
+ {% endfor %} + + {% assign remainder = 100 | modulo: example %} + {% if remainder > 1 %} +
+
{{ remainder }}
{% endif %}
{% endfor %} +```html +
+
+
+
+
+``` + --- ### Offset Columns `.col-offset-{ n }` -

Useful when you need to push columns to the right to fill some empty space.

+

Useful when you need to push columns to the right to fill some empty space.

-{% for i in page.example_three %} -
-
-
{{ i }}
+{% assign example_offsets = page.example_offsets | reverse %} +{% for i in example_offsets %} +
+
+
{{ i }}
{% if i < 100 %} -
-
offset {{ 80 | minus: i }}
+
+
offset {{ 80 | minus: i }}
{% endif %}
{% endfor %} +```html +
+
+
+
+``` + +--- + +### Responsive Columns `.col-{ n }-(x1..x4)` +

Useful when you want to build a grid that works for any size of screen.

+ +
+ {% for i in (1..5) %} +
+
+ 100 + + + +
+
+ {% endfor %} +
+```html +
+
+
+
+
+
+
+```