Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
For converting Grid Spec 2 to Grid Spec 1
// ===================================================
// CSS Grid Layout Helper
//
// To convert some of the CSS Grid Spec 2 features to Spec 1
//
// Author: Sascha Fuchs
//
// ===================================================
/// Add Gap between the boxes
///
/// @group core - cssgrid
///
/// @param {list} $boxes - List with box sizes
/// @param {string} $gap - Optional column gap
@function box-gap($boxes, $gap) {
$box: ();
@for $i from 1 through length($boxes) {
$box: append($box, nth($boxes, $i), space);
// Adding Gap Between
@if $gap > 0 {
// Not last Loop
@if $i != length($boxes) {
$box: append($box, $gap, space);
}
}
}
@return $box;
}
/// To build Grid Template Columns with optional gap
///
/// @group core - cssgrid
///
/// @param {string} $gap - Optional column gap
/// @param {list} $columns - Columns sizes
///
/// @require {function} box-gap
///
/// @example scss - scss
/// .test {
/// @include grid-columns(10px 250px 1fr 50px 100px);
/// }
@mixin grid-columns($gap, $columns) {
/* autoprefixer: off */
grid-template-columns: $columns;
/* autoprefixer: on */
@if $gap > 0 {
grid-column-gap: $gap;
}
.old-grid-spec & {
-ms-grid-columns: box-gap($columns, $gap);
}
}
/// To build Grid Template Rows with optional gap
///
/// @group core - cssgrid
///
/// @param {string} $gap - Optional row gap
/// @param {list} $rows - Rows sizes
///
/// @require {function} box-gap
///
/// @example scss - scss
/// .test {
/// @include grid-rows(10px 1fr);
/// }
@mixin grid-rows($gap, $rows) {
/* autoprefixer: off */
grid-template-rows: $rows;
/* autoprefixer: on */
@if $gap > 0 {
grid-row-gap: $gap;
}
.old-grid-spec & {
-ms-grid-rows: box-gap($rows, $gap);
}
}
/// Generate a Grid Template Area from a Grid Map
///
/// @group core - cssgrid
///
/// @param {string} $area - Name of the Area
/// @param {map} $map - Map of your grid area matrix
///
/// @example scss - scss
/// $gridAreaMap: (
/// row1: ('logo', 'nav', 'nav', 'nav'),
/// row2: ('logo', 'empty', 'search', 'search')
/// );
/// @include grid-matrix($gridAreaMap);
@mixin grid-matrix($map) {
$matrix: ();
@each $index, $row in $map {
$list: null;
@for $i from 1 through length($row) {
$list: append($list, unquote(nth(($row), $i)), space);
}
$matrix: append($matrix, quote($list), space);
}
grid-template-areas: $matrix;
}
/// Generate Coordinates based on Grid Matrix and the selected area
///
/// @group core - cssgrid
///
/// @param {string} $area - Name of the Area
/// @param {map} $map - Map of your grid area matrix
/// @param {bool} $columnGap - If you use Gap for Columns
/// @param {bool} $rowGap - If you use Gap for Rows
///
/// @example scss - scss
/// $gridAreaMap: (
/// row1: ('logo', 'nav', 'nav', 'nav'),
/// row2: ('logo', 'empty', 'search', 'search')
/// );
/// @include grid-area(logo, $gridAreaMap, true);
@mixin grid-area($area, $map, $columnGap: false, $rowGap: false) {
// Init Vars
$gridColumnStart: '';
$gridColumnEnd: '';
$gridRows: ();
$gridRowHeight: '';
$areaExists: 0;
// Output regular Area
grid-area: $area;
// Generate Old Spec Coordinates based on Area
.old-grid-spec & {
// Get Width element
@for $i from 1 through length($map) {
@if sl-contain(map-get($map,row#{$i}), $area) {
$areaExists: append($areaExists, 1);
$gridRowHeight: append($gridRowHeight, $i);
$gridColumnStart: index(map-get($map,row#{$i}), $area);
$gridColumnEnd: sl-last-index(map-get($map,row#{$i}), $area);
$gridRows: append($gridRows, $i);
}
}
// If Area exists in the Map
@if length($areaExists) > 1 {
// Convert Coordinate if Column Gap is active
@if $columnGap {
-ms-grid-column: $gridColumnStart + ($gridColumnStart - 1);
-ms-grid-column-span: $gridColumnEnd - $gridColumnStart + 1 + ($gridColumnEnd - $gridColumnStart);
} @else {
-ms-grid-column: $gridColumnStart;
-ms-grid-column-span: $gridColumnEnd - $gridColumnStart + 1;
}
// Add Row Coordinates
@if $rowGap {
-ms-grid-row: nth($gridRows,1) + (nth($gridRows,1) - 1);
-ms-grid-row-span: length($gridRowHeight) - 1 + (length($gridRowHeight) - 2);
} @else {
-ms-grid-row: nth($gridRows,1);
-ms-grid-row-span: length($gridRowHeight) - 1;
}
}
}
}
@gisu

This comment has been minimized.

Copy link
Owner Author

@gisu gisu commented Jul 24, 2017

Add Bowser.js for generate Classes based on User Agents. In this case i combined, IE10 - 11 and Edge 12 - 15 to generate .old-grid-spec class as my Fallback Class.

@gisu

This comment has been minimized.

Copy link
Owner Author

@gisu gisu commented Aug 8, 2017

Example

/*
  PageFooter
  ==========
  Footer Styling
*/
.c-pageFooter {
  $api: (
    breakpoint: 'm',
    breaksizes: (
      one: glob(footer, breaksizes, one)
    ),
    grid: (
      general: (
        column-gap: 20px,
        row-gap: 20px
      ),
      setup1: (
        breakpoint: 'sm',
        columns: 1fr 1fr 1fr 230px,
        rows: 1fr 1fr,
        areas: (
          row1: ('about', 'about', 'learn', 'learn'),
          row2: ('legal', 'legal', 'social', 'social')
        )
      ),
      setup2: (
        breakpoint: 'm',
        columns: 1fr 1fr 1fr 230px,
        rows: 1fr,
        areas: (
          row1: ('about', 'learn', 'legal', 'social')
        )
      )
    ),
    background: c('black'),
    vertpadding: s(2)
  );

  // ::::::::: ROOT SELECTOR
  $root: #{&};
  $rn: str_slice($root, 4);

  // ::::::::: API GRABBER
  @function api($keys...) {
    @return map-deep-get($api, $keys...);
  }

  // ::::::::: BASE
  //background-color: api(background);
  padding-top: api(vertpadding);
  padding-bottom: api(vertpadding);
  @extend %e-container;
  position: relative;

  @include break(api(grid, setup1, breakpoint)) {
    display: grid;
    display: -ms-grid;
    @include grid-matrix(api(grid, setup1, areas));
    @include grid-columns(api(grid, general, column-gap), api(grid, setup1, columns));
    @include grid-rows(api(grid, general, row-gap), api(grid, setup1, rows));
  }

  @include break(api(grid, setup2, breakpoint)) {
    @include grid-matrix(api(grid, setup2, areas));
    @include grid-columns(api(grid, general, column-gap), api(grid, setup2, columns));
    @include grid-rows(api(grid, general, row-gap), api(grid, setup2, rows));
  }

  &:before {
    content: '';
    width: 100vw;
    display: block;
    background-color: api(background);
    height: 100%;
    position: absolute;
    top: 0;
    z-index: -1;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }

  // ::::::::: TAGS
  // ::::::::: MODIFIER
  // ::::::::: CHILDS

  // [root]__block
  &__block {
    margin-bottom: 20px;
    @include break(api(grid, setup1, breakpoint)) {
      margin-bottom: 0;
    }
  }

  // [root]__headline
  &__headline {
    color: c('white');
    font-size: rem(16);
    text-transform: uppercase;
    @include fluid(5px, 20px, margin-bottom);
  }
  // [root]__about
  &__about {
    @include grid-area(about, api(grid, setup1, areas), api(grid, general, column-gap), api(grid, general, row-gap));

    @include break(api(grid, setup2, breakpoint)) {
      @include grid-area(about, api(grid, setup2, areas), api(grid, general, column-gap), api(grid, general, row-gap));
    }
  }

  // [root]__learn
  &__learn {
    @include grid-area(learn, api(grid, setup1, areas), api(grid, general, column-gap), api(grid, general, row-gap));

    @include break(api(grid, setup2, breakpoint)) {
      @include grid-area(learn, api(grid, setup2, areas), api(grid, general, column-gap), api(grid, general, row-gap));
    }
  }

  // [root]__legal
  &__legal {
    @include grid-area(legal, api(grid, setup1, areas), api(grid, general, column-gap), api(grid, general, row-gap));

    @include break(api(grid, setup2, breakpoint)) {
      @include grid-area(legal, api(grid, setup2, areas), api(grid, general, column-gap), api(grid, general, row-gap));
    }
  }

  // [root]__social
  &__social {
    @include grid-area(social, api(grid, setup1, areas), api(grid, general, column-gap), api(grid, general, row-gap));
    //align-self: end;

    @include break(api(grid, setup2, breakpoint)) {
      @include grid-area(social, api(grid, setup2, areas), api(grid, general, column-gap), api(grid, general, row-gap));
    }
  }
}
@IamManchanda

This comment has been minimized.

Copy link

@IamManchanda IamManchanda commented Aug 12, 2017

@gisu Can you provide a codepen? Please??
This is awesome BTW?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.