{"action":"created","issue":{"url":"https://api.github.com/repos/IBM/carbon-elements/issues/173","repository_url":"https://api.github.com/repos/IBM/carbon-elements","labels_url":"https://api.github.com/repos/IBM/carbon-elements/issues/173/labels{/name}","comments_url":"https://api.github.com/repos/IBM/carbon-elements/issues/173/comments","events_url":"https://api.github.com/repos/IBM/carbon-elements/issues/173/events","html_url":"https://github.com/IBM/carbon-elements/issues/173","id":390008173,"node_id":"MDU6SXNzdWUzOTAwMDgxNzM=","number":173,"title":"Fluid Grid Max Width","user":{"login":"photodow","id":3793636,"node_id":"MDQ6VXNlcjM3OTM2MzY=","avatar_url":"https://avatars3.githubusercontent.com/u/3793636?v=4","gravatar_id":"","url":"https://api.github.com/users/photodow","html_url":"https://github.com/photodow","followers_url":"https://api.github.com/users/photodow/followers","following_url":"https://api.github.com/users/photodow/following{/other_user}","gists_url":"https://api.github.com/users/photodow/gists{/gist_id}","starred_url":"https://api.github.com/users/photodow/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/photodow/subscriptions","organizations_url":"https://api.github.com/users/photodow/orgs","repos_url":"https://api.github.com/users/photodow/repos","events_url":"https://api.github.com/users/photodow/events{/privacy}","received_events_url":"https://api.github.com/users/photodow/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-12-12T00:04:03Z","updated_at":"2018-12-12T21:34:50Z","closed_at":null,"author_association":"MEMBER","body":"As I was working to integrate `@carbon/grid` I realized we don't have a `max-width` on the `bx--fluid-grid`. Since we're expecting a `max-width` at the largest breakpoint (`1584px`/`99rem`), I talked to @joshblack & @jendowns to see what can be done.\r\n\r\nI was about to just create a pull request in for this based on our conversation in `#carbon-elements` on Slack, but I wasn't crazy about my implementation in a couple areas (maybe I'm being picky), so I thought I'd open it up for discussion before I created it.\r\n\r\nWithout trying to avoid touching the current implementation too much I originally came up with three options.\r\n\r\n#### Option 1\r\nAdd some sort of largest `max-width` modifier.\r\n\r\n```css\r\n.bx--fluid-grid--max { max-width: 99rem; }\r\n```\r\n\r\nWhile this works, I'm not crazy about it because it can technically modify any of the grids. It's not exactly specific to fluid. I thought about renaming to `.bx--grid--max`, but `.bx--grid` already has a `max-width`.\r\n\r\n#### Option 2\r\nAdd `max-width` by default to `.bx--fluid-grid`.\r\n\r\n```css\r\n.bx--fluid-grid--max { max-width: 99rem; }\r\n.bx--grid--fullwidth { max-width: 100%; }\r\n```\r\n\r\nNot that we can't go this route either, but it requires some sort of `full-width` modifier in case the desired outcome is full width.\r\n\r\n#### Option 3\r\nWe could increase specificity a little, but it looks like [y'all try to avoid this](https://github.com/ibm/carbon-components/blob/master/.github/CONTRIBUTING.md#class-names).\r\n\r\n```css\r\n.bx--fluid-grid.bx--grid--max { max-width: 99rem; }\r\n```\r\n\r\nLet me know you're thoughts. I spent more time writing this than it would have taken to create a pull request. Ha :wink:\r\n\r\n## Taking it a step further\r\nI began to wonder if we got a little more involved touching existing pieces of the grid if we could make modifiers like this a little more clear. I don't know how open y'all are to this (I'm still a little unclear how far into the game I'm coming into all of this), but I figured I'd start the discussion.\r\n\r\nHere is an example at a high level, using some off the cuff shorthand...\r\n\r\n```css\r\n.bx--grid { /* fluid by default */\r\n    /* handle padding/margin at proper breakpoints */\r\n}\r\n\r\n.bx--grid--fixed { /* adaptive modifier */\r\n    @media (min-width: 20rem) { max-width: 20rem; }\r\n    @media (min-width: 42rem) { max-width: 42rem; }\r\n    @media (min-width: 66rem) { max-width: 66rem; }\r\n    @media (min-width: 82rem) { max-width: 82rem; }\r\n    @media (min-width: 99rem) { max-width: 99rem; }\r\n}\r\n\r\n.bx--grid--fixed--extend { /* new modifier */\r\n    @media (min-width: 99rem) { max-width: 100%; }\r\n}\r\n\r\n.bx--grid--max { max-width: 99rem; } /* new modifier */\r\n.bx--grid--left { margin-left: 0; } /* new modifier */\r\n.bx--grid--bleed { padding: 0; }\r\n.bx--grid--condensed { padding: 1px; }\r\n.bx--grid--padding { padding: 16px; }\r\n/* I'm still trying to wrap my head around the use case for this one. haha */\r\n.bx--grid--hang { padding-left: 0; }\r\n```\r\n\r\nI think I got everything, maybe minus aspect ratio? I chose to use fluid by default in `bx--grid` because that's just how the browser naturally renders a block element, so the modifiers from there just begin to build on top of that base. I'm sure we could flip those around if push came to shove. Anyway, hopefully, you get the idea I'm trying communicate. Let me know if you have any questions.\r\n\r\nDo let me know your thoughts. If you'd even just prefer me to put a pull request for a short-term solution, and mull this other idea over or dismiss altogether. Just let me know!\r\n"},"comment":{"url":"https://api.github.com/repos/IBM/carbon-elements/issues/comments/446752773","html_url":"https://github.com/IBM/carbon-elements/issues/173#issuecomment-446752773","issue_url":"https://api.github.com/repos/IBM/carbon-elements/issues/173","id":446752773,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0Njc1Mjc3Mw==","user":{"login":"jendowns","id":9057921,"node_id":"MDQ6VXNlcjkwNTc5MjE=","avatar_url":"https://avatars0.githubusercontent.com/u/9057921?v=4","gravatar_id":"","url":"https://api.github.com/users/jendowns","html_url":"https://github.com/jendowns","followers_url":"https://api.github.com/users/jendowns/followers","following_url":"https://api.github.com/users/jendowns/following{/other_user}","gists_url":"https://api.github.com/users/jendowns/gists{/gist_id}","starred_url":"https://api.github.com/users/jendowns/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jendowns/subscriptions","organizations_url":"https://api.github.com/users/jendowns/orgs","repos_url":"https://api.github.com/users/jendowns/repos","events_url":"https://api.github.com/users/jendowns/events{/privacy}","received_events_url":"https://api.github.com/users/jendowns/received_events","type":"User","site_admin":false},"created_at":"2018-12-12T21:34:50Z","updated_at":"2018-12-12T21:34:50Z","author_association":"CONTRIBUTOR","body":"@joshblack 🤔  I kind of like the first option. (@SimonFinney what do you think?)\r\n\r\nThe second options isn't super clear to me -- what would the modifier for max-width do, if the fluid grid spans 100% by default?"}}
{"actor":{"display_login":"jendowns"}}