{"action":"opened","issue":{"url":"https://api.github.com/repos/jgthms/bulma/issues/2169","repository_url":"https://api.github.com/repos/jgthms/bulma","labels_url":"https://api.github.com/repos/jgthms/bulma/issues/2169/labels{/name}","comments_url":"https://api.github.com/repos/jgthms/bulma/issues/2169/comments","events_url":"https://api.github.com/repos/jgthms/bulma/issues/2169/events","html_url":"https://github.com/jgthms/bulma/issues/2169","id":372130409,"node_id":"MDU6SXNzdWUzNzIxMzA0MDk=","number":2169,"title":"Sketch Settings or Templates for Designing on the Bulma Grid?","user":{"login":"mattdeco","id":777787,"node_id":"MDQ6VXNlcjc3Nzc4Nw==","avatar_url":"https://avatars1.githubusercontent.com/u/777787?v=4","gravatar_id":"","url":"https://api.github.com/users/mattdeco","html_url":"https://github.com/mattdeco","followers_url":"https://api.github.com/users/mattdeco/followers","following_url":"https://api.github.com/users/mattdeco/following{/other_user}","gists_url":"https://api.github.com/users/mattdeco/gists{/gist_id}","starred_url":"https://api.github.com/users/mattdeco/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mattdeco/subscriptions","organizations_url":"https://api.github.com/users/mattdeco/orgs","repos_url":"https://api.github.com/users/mattdeco/repos","events_url":"https://api.github.com/users/mattdeco/events{/privacy}","received_events_url":"https://api.github.com/users/mattdeco/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-10-19T22:02:06Z","updated_at":"2018-10-19T22:02:06Z","closed_at":null,"author_association":"NONE","body":"This is about **the Docs**.\r\n\r\n### Overview of the problem\r\n\r\nThis is about the Bulma **CSS framework**\r\nThis is about the Bulma **Docs**\r\n\r\n### Description\r\n\r\nMy team and I are interested in using the grid system in Bulma as the underpinning for an upcoming redesign project. We won't really be using the individual elements / components, just the grid system and some of the parts of the library in the utilities, base, elements, grid, and layout portions.\r\n\r\nMy team is divided between front end developers and visual designers. The visual designers do not code, write CSS, or have much familiarity with responsive grid systems.\r\n\r\nI'm hoping to provide them with Sketch resources for each Bulma breakpoint that includes the Bulma grid with correct column / gutter widths, such as a set of templates or collection of layout settings. This is so they can do their visual design on a grid that will then match up to the grid we're using in CSS to create the actual end product.\r\n\r\n### Example Use Case\r\nA designer creates a grid of photos where each photo is 3 columns wide at the desktop breakpoint, but 4 columns wide at the tablet breakpoint. They do this by creating 2 comps in Sketch -- one using a template that matches the tablet breakpoint / column / gutter dimensions, and one using a template that matches the desktop breakpoint / column / gutter dimensions. A developer can then implement this design with the following HTML and have the resulting page perfectly match the dimensions the designer is expecting:\r\n\r\n```html\r\n<div class=\"columns\">\r\n\t<div class=\"column is-4-tablet is-3-desktop\"><!-- img tag --></div>\r\n\t<div class=\"column is-4-tablet is-3-desktop\"><!-- img tag --></div>\r\n\t<div class=\"column is-4-tablet is-3-desktop\"><!-- img tag --></div>\r\n</div>\r\n```\r\nI've been unable to find any resources that would help with this -- the Bulma Sketch resources I can find are focused on actual Bulma visual elements (like buttons) rather than the \"invisible\" parts of the framework (like the grid).\r\n\r\nAny help figuring this out would be greatly appreciated. Thank you so much for such a great library and accompanying documentation!"}}
{"actor":{"display_login":"mattdeco"}}