From 5f7221603065c85f3b881af402ac63cae1219267 Mon Sep 17 00:00:00 2001 From: James Dow Date: Thu, 3 Jan 2019 15:11:19 -0600 Subject: [PATCH] feat(grid): add full width grid modifier (#207) * feat: added fluid spacing token * docs: updated demo with fluid spacing * feat: added grid--full-width modifier * docs: updated demos to reflect new changes to grid --- .../grid/examples/basic/src/components/App.js | 4 + .../basic/src/components/ExamplesPage.js | 6 ++ .../examples/basic/src/components/Fluid.js | 23 +++++ .../basic/src/components/FullBleedPage.js | 2 +- .../basic/src/components/FullWidth.js | 94 +++++++++++++++++++ packages/grid/examples/basic/styles.scss | 1 + packages/grid/scss/_container.scss | 10 +- packages/grid/scss/grid.scss | 19 ++-- packages/layout/scss/_breakpoint.scss | 18 ++++ packages/layout/scss/_utilities.scss | 20 ++++ 10 files changed, 189 insertions(+), 8 deletions(-) create mode 100644 packages/grid/examples/basic/src/components/Fluid.js create mode 100644 packages/grid/examples/basic/src/components/FullWidth.js diff --git a/packages/grid/examples/basic/src/components/App.js b/packages/grid/examples/basic/src/components/App.js index 0d1bd93cdc7e..e7de4688ccc5 100644 --- a/packages/grid/examples/basic/src/components/App.js +++ b/packages/grid/examples/basic/src/components/App.js @@ -9,6 +9,8 @@ import CondensedPage from './CondensedPage'; import HangPage from './HangPage'; import AspectRatioPage from './AspectRatioPage'; import FullBleedPage from './FullBleedPage'; +import Fluid from './Fluid'; +import FullWidth from './FullWidth'; import NotFound from './NotFound'; const { PATH_PREFIX = '' } = process.env; @@ -18,6 +20,8 @@ export default function App() { + + diff --git a/packages/grid/examples/basic/src/components/ExamplesPage.js b/packages/grid/examples/basic/src/components/ExamplesPage.js index 421022fb5ede..5694dc5f9b0c 100644 --- a/packages/grid/examples/basic/src/components/ExamplesPage.js +++ b/packages/grid/examples/basic/src/components/ExamplesPage.js @@ -24,6 +24,12 @@ export default function ExamplesPage() {
  • Basic Usage
    • +
  • + Fluid +
    • +
  • + Full Width +
  • Offsets
    • diff --git a/packages/grid/examples/basic/src/components/Fluid.js b/packages/grid/examples/basic/src/components/Fluid.js new file mode 100644 index 000000000000..93ff98b68ced --- /dev/null +++ b/packages/grid/examples/basic/src/components/Fluid.js @@ -0,0 +1,23 @@ +import React from 'react'; +import { Grid, Row, Column } from './Grid'; +import Main from './Main'; +import ExampleContent from './ExampleContent'; + +export default function BasicUsage() { + return ( +
    +
    + + +

    Fluid example

    +

    + This example showcases the percentage based container and how it + behaves responsively before maxing out at the largest breakpoint. +

    +     +     + +
    +
    + ); +} diff --git a/packages/grid/examples/basic/src/components/FullBleedPage.js b/packages/grid/examples/basic/src/components/FullBleedPage.js index d4cd9402de51..d0d2efd203ff 100644 --- a/packages/grid/examples/basic/src/components/FullBleedPage.js +++ b/packages/grid/examples/basic/src/components/FullBleedPage.js @@ -6,7 +6,7 @@ export default function FullBleedPage() { return (
    -
    +
    +
    + + +

    Full width example

    +     +     + + +

    + This example showcases the full width modifier on the fluid grid. +

    +     +     + + +

    + Small{' '} + (4 columns @ 320px) +

    +     +     + + +
    +
    1
    +
    +     + +
    +
    1
    +
    +     + +
    +
    1
    +
    +     + +
    +
    1
    +
    +     +     +
    +
    + + +

    + This example showcases the full width modifier on the basic grid. +

    +     +     + + +

    + Small{' '} + (4 columns @ 320px) +

    +     +     + + +
    +
    1
    +
    +     + +
    +
    1
    +
    +     + +
    +
    1
    +
    +     + +
    +
    1
    +
    +     +     +
    +
    + ); +} diff --git a/packages/grid/examples/basic/styles.scss b/packages/grid/examples/basic/styles.scss index 33ee43075447..99c0b838cd74 100644 --- a/packages/grid/examples/basic/styles.scss +++ b/packages/grid/examples/basic/styles.scss @@ -43,6 +43,7 @@ h6 { outline: 1px dashed #97c1ff; } +.bx--fluid-grid, .bx--grid { outline: 1px dashed #97c1ff; } diff --git a/packages/grid/scss/_container.scss b/packages/grid/scss/_container.scss index d7b7a0ece70e..fd7d4d5e7fae 100644 --- a/packages/grid/scss/_container.scss +++ b/packages/grid/scss/_container.scss @@ -11,14 +11,16 @@ * https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss */ @import '@carbon/layout/scss/breakpoint'; +@import '@carbon/layout/scss/utilities'; /// Create the container for a grid. Will cause full-bleed for the grid unless /// max-width properties are added with `make-container-max-widths` @mixin make-container($breakpoints: $grid-breakpoints) { - width: 100%; margin-right: auto; margin-left: auto; + @include set-largest-breakpoint(); + @each $name, $value in $breakpoints { $prev-breakpoint: map-get($breakpoints, breakpoint-prev($name)); $margin: map-get($value, margin); @@ -40,6 +42,12 @@ } } +// gets the last breakpoint width, and sets it to a max-width +@mixin set-largest-breakpoint($breakpoints: $grid-breakpoints) { + $largest-breakpoint: last-map-item($breakpoints); + max-width: map-get($largest-breakpoint, 'width'); +} + /// Add in the max-widths for each breakpoint to the container @mixin make-container-max-widths($breakpoints: $grid-breakpoints) { @each $name, $value in $breakpoints { diff --git a/packages/grid/scss/grid.scss b/packages/grid/scss/grid.scss index 6dc56f6938ba..1941445d0f99 100644 --- a/packages/grid/scss/grid.scss +++ b/packages/grid/scss/grid.scss @@ -11,16 +11,23 @@ @import 'row'; @import 'col'; -// Default container class for a grid. Includes max-width for each breakpoint -.#{$prefix}--grid { +@debug $grid-breakpoints; + +// Fluid variant of the grid. +.#{$prefix}--fluid-grid { @include make-container(); - @include make-container-max-widths(); } -// Fluid variant of the grid. Will not set max-width for breakpoints and will -// full-bleed across the page. -.#{$prefix}--fluid-grid { +// Default container class for a grid. Includes max-width for all breakpoints +.#{$prefix}--grid { @include make-container(); + @include make-container-max-widths(); + + &--full-width { + @include largest-breakpoint() { + max-width: 100%; + } + } } .#{$prefix}--row { diff --git a/packages/layout/scss/_breakpoint.scss b/packages/layout/scss/_breakpoint.scss index 0fb47282f397..0d77d282a2d4 100644 --- a/packages/layout/scss/_breakpoint.scss +++ b/packages/layout/scss/_breakpoint.scss @@ -7,6 +7,7 @@ // https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss @import 'convert'; +@import 'utilities'; $grid-cell-padding: rem(16px); $grid-gutter: rem(32px); @@ -75,6 +76,14 @@ $grid-breakpoints: ( @return index(map-keys($breakpoints), $name) == 1; } +/// returns the largest breakpoint name +/// @param {string} $breakpoint +/// @content +@function largest-breakpoint-name($breakpoints: $grid-breakpoints) { + $total-breakpoints: length($breakpoints); + @return key-by-index($breakpoints, $total-breakpoints); +} + /// Get the infix for a given breakpoint in a list of breakpoints. Usesful for /// generate the size part in a selector, for example: `.prefix--col-sm-2` /// @param {String} $name - the name of the breakpoint @@ -148,6 +157,15 @@ $grid-breakpoints: ( } } +/// generate media query for the largest breakpoint +/// @param {string} $breakpoint +/// @content +@mixin largest-breakpoint($breakpoints: $grid-breakpoints) { + @include breakpoint(largest-breakpoint-name()) { + @content; + } +} + /// Generate a media query for a given breakpoint /// @param {string} $breakpoint /// @content diff --git a/packages/layout/scss/_utilities.scss b/packages/layout/scss/_utilities.scss index a4660a5fce7b..49a9cadb8579 100644 --- a/packages/layout/scss/_utilities.scss +++ b/packages/layout/scss/_utilities.scss @@ -17,3 +17,23 @@ } @return $map; } + +/// Key by Index +/// provide a $map, and $index, and get back the relevant +/// key value. +/// @param {Map} $map - Map +/// @param {Integer} $index - Key chain +/// @return {String} - Desired value +@function key-by-index($map, $index) { + $keys: map-keys($map); + @return nth($keys, $index); +} + +/// Last Map Item +/// Pass in a map, and get the last one in the list back. +/// @param {Map} $map - Map +/// @return {*} - Desired value +@function last-map-item($map) { + $total-length: length($map); + @return map-get($map, key-by-index($map, $total-length)); +}