{"action":"created","issue":{"url":"https://api.github.com/repos/thoughtbot/neat/issues/328","labels_url":"https://api.github.com/repos/thoughtbot/neat/issues/328/labels{/name}","comments_url":"https://api.github.com/repos/thoughtbot/neat/issues/328/comments","events_url":"https://api.github.com/repos/thoughtbot/neat/issues/328/events","html_url":"https://github.com/thoughtbot/neat/issues/328","id":65176961,"number":328,"title":"Set number of visual grid columns with media queries","user":{"login":"jink13","id":10714016,"avatar_url":"https://avatars.githubusercontent.com/u/10714016?v=3","gravatar_id":"","url":"https://api.github.com/users/jink13","html_url":"https://github.com/jink13","followers_url":"https://api.github.com/users/jink13/followers","following_url":"https://api.github.com/users/jink13/following{/other_user}","gists_url":"https://api.github.com/users/jink13/gists{/gist_id}","starred_url":"https://api.github.com/users/jink13/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jink13/subscriptions","organizations_url":"https://api.github.com/users/jink13/orgs","repos_url":"https://api.github.com/users/jink13/repos","events_url":"https://api.github.com/users/jink13/events{/privacy}","received_events_url":"https://api.github.com/users/jink13/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":9,"created_at":"2015-03-30T09:59:54Z","updated_at":"2015-04-01T22:22:06Z","closed_at":null,"body":"Hi ! \r\nI know it's a stupid question but.. ( My english is quite bad..)\r\nHow to change the number of the visual grid's columns when we use media queries ?\r\nUnlike the example page (http://neat.bourbon.io/examples/) in the Media queries section, when i resize my browser window, it doesn't switch to 4 columns. \r\nI just do not understand why ?\r\nI know we can change the variable $grid-columns, but i would like it to change when i resize the browser.\r\nI'm sure there is an easy way out but i don't manage to find it with the documentation and the comments.\r\nThanks ! \r\n"},"comment":{"url":"https://api.github.com/repos/thoughtbot/neat/issues/comments/88652164","html_url":"https://github.com/thoughtbot/neat/issues/328#issuecomment-88652164","issue_url":"https://api.github.com/repos/thoughtbot/neat/issues/328","id":88652164,"user":{"login":"millertchris","id":3119509,"avatar_url":"https://avatars.githubusercontent.com/u/3119509?v=3","gravatar_id":"","url":"https://api.github.com/users/millertchris","html_url":"https://github.com/millertchris","followers_url":"https://api.github.com/users/millertchris/followers","following_url":"https://api.github.com/users/millertchris/following{/other_user}","gists_url":"https://api.github.com/users/millertchris/gists{/gist_id}","starred_url":"https://api.github.com/users/millertchris/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/millertchris/subscriptions","organizations_url":"https://api.github.com/users/millertchris/orgs","repos_url":"https://api.github.com/users/millertchris/repos","events_url":"https://api.github.com/users/millertchris/events{/privacy}","received_events_url":"https://api.github.com/users/millertchris/received_events","type":"User","site_admin":false},"created_at":"2015-04-01T22:22:06Z","updated_at":"2015-04-01T22:22:06Z","body":"@tysongach @jink13 @mehlah Alright, I've finally figured it out, but the documentation is deceptive or lacks in clear direction.\r\n\r\nI'm thoroughly enjoying Bourbon, prior to using Bourbon I had been using Susy but find Bourbon to be more enjoyable!\r\n\r\nAlright...so, here are my recommendations:\r\n\r\nRather, telling the audience to simply import before Neat (which didn't work for me), instead, let them know to @import \"neat-helpers\"; then $mobile: new-breakpoint(min-width 480px 4);, and finally @import \"neat\";\r\n\r\nThat's the only way I was able to get it to work.\r\n\r\nTo illustrate this from the top down:\r\n\r\n@import \"bourbon\";\r\n@import \"neat-helpers\";\r\n$max-width: 1140px;\r\n$mobile: new-breakpoint(max-width 320px 4);\r\n$tablet: new-breakpoint(min-width 480px 8);\r\n$desktop: new-breakpoint(min-width 720px 12);\r\n$visual-grid: true;\r\n$visual-grid-color: #eee;\r\n$visual-grid-index: front;\r\n$visual-grid-opacity: 0.75;\r\n@import \"neat\";\r\n\r\nIf you stuff the above \"settings\" into a .scss file, then it would like something like this:\r\n\r\n@import \"bourbon\";\r\n@import \"neat-helpers\";\r\n@import \"settings\";\r\n@import \"neat\";\r\n\r\nIn conclusion...yes...put your settings before \"neat\", however, you will also need to include \"neat-helpers\" before settings as well. Even though \"neat-helpers\" is included and imported once again within \"neat\".\r\n\r\nI've yet to really dig into the functions and structure of how it is all setup, I've simply just been working with Bourbon with what documentation is out there, but the documentation is still slightly vague.\r\n\r\nWith all of that said, Bourbon is GREAT! It's a great framework with tons of potential, I hope to contribute to it one day, in anyway possible."}}