As css-gridish using 100vw / 12 = 8.3333vw for each column width, rather than using 8.3333% for each one, how to make it work like a grid system that has container has max-width with auto margin on left and right side?

This update adds modern css grid support to legacy column classnames for easier transition from flexbox.

Action required to end users of your CSS Gridish grid would be that they are about to have all width behaviors attached to legacy classes also take affect in modern browsers. This means they would need to eliminate their excess CSS Grid code or make sure to overwrite the rules they did not mean to transfer over from legacy.

We are in a weird place by using semver for a build tool. This has no breaking changes for the grid-creating users of Gridish, but is a breaking change to our users’ users.

Thanks to @nilesh-chavan for starting this initiative.

I was working on css-gridish. I face an Issue a grid-layout the fallback is only for flex but not for grid layout. I am working on it please help with grid-layout.

css-gridish.json:

{
  "prefix": "dnno",
  "breakpoints": {

    "sm": {
      "breakpoint": 20,
      "columns": 2,
      "gutter": "30px",
      "margin": "15px"
    },
    "md": {
      "breakpoint": 48,
      "columns": 12,
      "gutter": "32px",
      "margin": 0
    },
    "lg": {
      "breakpoint": 63.125,
      "columns": 12,
      "gutter": "32px",
      "margin": 0
    }
  }, 
  "extraArtboards": {
    "md": 48,
    "lg": 62,
    "xl": 75
  },
  "rem": 16,
  "rowHeight": 0.5,
  "rows": 30,
  "paths": {
    "route": "styles/base/grid",
    "intro": "grid-intro.md"
  }
}

When 'sm' margin is set to 15px with other breakpoints set to 0 (or also '0px'), .dnno-container receives

padding-left: 15px; padding-right: 15px;

I can confirm that if 'lg' breakpoint is set to '12px', the padding is applied properly to the container.

Comes after #38

Adds an optional JavaScript file included at js/yourGrid-grid.js. This will adjust the grid to not go behind browser scrollbars since different browsers handle the vw unit differently. It applies to any browser that supports CSS Variables and MutationObserver.

Thoughts, @joshblack?

After talking to some first-time users, there are two small things we can change to make this documentation more readable and more easy to digest.

1. Split up the "Classes" table by "parent" and "child" classes

The class name table in the Grid'sREADME.md was a lot for a new user to take in. One user wanted to know, at a glance, which classes were suited for parent elements and which were for children.

2. Define common terms

The following terms sparked some confusion, so it might help to have a section of definitions to make sure everyone is one the same page:

• Breakpoint -- One first-time user didn't realize that this was the same thing as the values in an @media query, so they kept thinking it was a new concept/vocab unique to Gridish that they needed to understand.

• Artboards -- One first-time user was a developer who didn't seem familiar with Sketch or terminology used by designers.

Note: while these are the only 2 terms that came up, we can be on the lookout for other terms that are worth defining explicitly.

Summary

Resolves #21 This PR adds utility functions to helps consuming developers calculate and use fixed and fluid sizes within their scss. Notably, the fluid sizing is based on the breakpoint values that the consuming developer set in their css-gridish.json.

An example use case would be a consuming developer using getFluidSize() to set a component's width to be a fluid size, relative to their grid configuration (see example below in the "Test" section).

Proposed Changes

• Adds bin/src/scss/_utilities.scss, which contains the following utility functions:
  • map-deep-get - for traversing deeply nested maps like the generated $grid-values map
  • getBreakpointValue - returns a breakpoint value in rems when passed a breakpoint name (example use: @media queries)
  • getFluidSize - returns a calc() expression that represents a fluid length (example use: min-width rule)
  • getFixedSize - returns a length in rems when passed a fixed nondimensional unit
• Updates Examples (scss & Sketch files) after running npm run build-examples

Testing with the Examples

I suggest testing with the examples individually. If you try to test them all at once by adding some sample rules that use getFluidSize() or getBreakpointValue(), you will run into trouble because the Material example is using different breakpoint names ("small" instead of "sm") & the map-get() or map-deep-get() in each of those functions won't be able to find the breakpoint names you are using. If you test them all individually, you can modify the breakpoints names in your test scss rules as appropriate.

Bootstrap & Carbon

1. Add the following the bottom of the new bin/src/scss/_utilities.scss:

@media screen and (min-width: getBreakpointValue('sm')){
  .awesome-test-element {
    max-width: getFixedSize(10);
    min-width: getFluidSize('sm', 1);
  }
}

2. cd examples/bootstrap

3. node ../../bin/index.js to run just the Bootstrap example

4. view the compiled CSS and check for .awesome-test-element

5. repeat for Carbon

Material

The Material css-gridish.json is using different breakpoint names ("small" instead of "sm", for example). So the steps to test are the same as above, but modify the breakpoint names to match the full words in that example's css-gridish.json file:

@media screen and (min-width: getBreakpointValue('small')){
  .awesome-test-element {
    max-width: getFixedSize(10);
    min-width: getFluidSize('small', 1);
  }
}

As a developer with an unknown paragraph length, I want to not have to specify a specific row count for that paragraph’s DOM element.

Currently, the default rows are grid-auto-rows: $rowHeight * 1rem.

I think the behavior should be grid-auto-rows: minmax($rowHeight * 1rem, auto). However, this affects the situation when two subgrids are placed next to each other. The smaller of the two grids will stretch all of it’s children to fill the height of the larger subgrid.

Beep boop. Your images are optimized!

Your image file size has been reduced by 57% 🎉

📝docs | :octocat: repo | 🙋issues | 🏅swag | 🏪marketplace

• Adds a yourPrefix-minimal.css file that contains no column or height classes. This saves lots of kilobytes if the dev is only concerned with native CSS Grid rules
• Updated documentation to close #36 and share difference in normal, legacy, and minimal css files

Pinging @jendowns, @diego-codes, @joshblack, and @electrostaticfleece for feedback

Proposed Changes

• Remove stray line @media screen and (min-width: 20rem) { from example SCSS for get-fluid-size() function (The line is not meant to be there and doesn't reflect a correct example, in that context.)
• Update documentation and examples to reflect change

A gentle request: At the risk of revealing my ignorance, is there a step-by-step setup guide and further is there a guide for integrating this Visual Studio Code? Thank you.

It adds an extra - to the prefixing of class name so it is consistent with Carbon's prefixing standards. This is so that the $prefix value is respected in the building of sass code for Carbon users.

Hi,

I've just started using Gridish and it seems like a great tool! One thing though, when selecting --fixed-columns, I expected my Grid would stick to the specified number of columns in the config file. However, it repeat()s using the auto-fill property, which results in a behaviour which doesn't conform to Material Design's definition of a fixed grid because between breakpoints the grid keeps to the maximum width but the column count changes (Chrome 67, OSX 10.13.5).

Not that MD is the definitive style-guide, but I think this is more or less a universal standard for an 'adaptive' or 'fixed' grid.

If that isn't a bug, would it be possible to provide a config option in css-gridish.json to use repeat($columnCount) for each breakpoint, ensuring that the column quantity is preserved? At the moment I'm doing this to achieve the desired behaviour:

@import "../grid/scss/core";

/*
  Override Gridish fixed column behaviour to preserve number of columns
  at all breakpoints while centering the grid. Without this, fixed columns
  will repeat to fill the space, rather than stick to the 'columns' config
  setting in css-gridish.json
*/

.bl-grid.bl-grid--fixed-columns {
  // Horizontally centre grid within container
  justify-content: center;

  @each $name, $size in $breakpoints {
    $break: map-get($size, 'breakpoint');
    $cols: map-get($size, 'columns');

    // Breakpoint for 320px devices. Between this and 360px wide, columns flex using vw units
    @if $name == 'xxsmall' {
      grid-template-columns: repeat($cols, #{100/$cols}vw);
    } @else {
      @include media-query($name) {
        grid-template-columns: repeat($cols, #{$break/$cols}rem);
      }
    }
  }
}

Thanks!

This has been released on NPM as a beta release for several months now. See the beta release for notes: https://github.com/IBM/css-gridish/releases/tag/v2.0.0-beta.1

Hi @seejamescode

Wondering why we don't create a class for the last breakpoint?

Thanks!

https://github.com/IBM/css-gridish/blob/c5f16a541df485fa833f8f50299bd6a3f290a142/src/scss/_mixins.scss#L43

Here's the error I've been getting:

events.js:183
[0]       throw er; // Unhandled 'error' event
[0]       ^
[0] Error: src/scss/_functions.scss
[0] Error: index out of bounds for `nth($list, $n)`
[0]         on line 24 of src/scss/_functions.scss, in function `nth`
[0]         from line 24 of src/scss/_functions.scss, in function `all-breakpoints`
[0]         from line 21 of src/scss/_variables.scss
[0]         from line 3 of src/scss/_core.scss
[0]         from line 2 of src/scss/gridish-grid-legacy.scss
[0] >>     $extraBreakpointWidth: nth($currentBreakpoint, 2);
[0]
[0]    ---------------------------^

Relevant code: _variables.scss

// Merge standard and custom breakpoints into list
@function all-breakpoints($breakpoints, $extraBreakpoints, $first, $last) {
  $allBreakpoints: $breakpoints;
  @each $currentBreakpoint in $extraBreakpoints {
    $extraBreakpointName: nth($currentBreakpoint, 1);
    $extraBreakpointWidth: nth($currentBreakpoint, 2);

_functions.scss

$prefix: gridish !default;
@if map-get($grid-values, "prefix") and $prefix == "gridish" {
  $prefix: map-get($grid-values, "prefix");
}
$extraBreakpoints: () !default;
$breakpoints: add-padding(map-get($grid-values, "breakpoints"));
$first: nth(nth($breakpoints, 1), 2);
$last: nth(nth($breakpoints, -1), 2);
$includeFlexFallback: false !default;
$rowHeight: map-get($grid-values, "rowHeight");
$rows: map-get($grid-values, "rows");
$extraArtboards: map-get($grid-values, "extraArtboards");
$allBreakpoints: all-breakpoints(
  $breakpoints,
  $extraBreakpoints,
  $first,
  $last
);

Looking through it and using some debug statements, I've found that $extraBreakpoints is empty, which isn't surprising considering the definition is $extraBreakpoints: () !default; and it isn't referenced anywhere else.

I'm not super well versed with sass script though, so I might be missing something here.