Skip to content
This repository has been archived by the owner on Jul 18, 2024. It is now read-only.

Setting margin at smallest breakpoint applies same margin at larger breakpoints when larger breakpoints' margins are set to zero #23

Closed
bjfresh opened this issue Feb 23, 2018 · 3 comments

Comments

@bjfresh
Copy link

bjfresh commented Feb 23, 2018

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.

@seejamescode
Copy link
Contributor

Whooooops! I believe the greater than zero part of this line is causing it: https://github.com/IBM/css-gridish/blob/master/bin/src/scss/_mixins.scss#L199

We do need to keep that part so extra code does not build if the grid has no margins. However, it should say if (map-get($breakpoint, margin) != null and map-get($breakpoint, margin) > 0) or current margin does not match previous margin.

@milewski
Copy link

milewski commented Mar 1, 2018

following up i was to mention this few days ago...

@seejamescode
Copy link
Contributor

Complete in v2.0.0-beta.1

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants