{"action":"created","issue":{"url":"https://api.github.com/repos/oddbird/susy/issues/609","repository_url":"https://api.github.com/repos/oddbird/susy","labels_url":"https://api.github.com/repos/oddbird/susy/issues/609/labels{/name}","comments_url":"https://api.github.com/repos/oddbird/susy/issues/609/comments","events_url":"https://api.github.com/repos/oddbird/susy/issues/609/events","html_url":"https://github.com/oddbird/susy/issues/609","id":186114158,"number":609,"title":"grid image threeish style","user":{"login":"robsonsobral","id":931642,"avatar_url":"https://avatars.githubusercontent.com/u/931642?v=3","gravatar_id":"","url":"https://api.github.com/users/robsonsobral","html_url":"https://github.com/robsonsobral","followers_url":"https://api.github.com/users/robsonsobral/followers","following_url":"https://api.github.com/users/robsonsobral/following{/other_user}","gists_url":"https://api.github.com/users/robsonsobral/gists{/gist_id}","starred_url":"https://api.github.com/users/robsonsobral/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/robsonsobral/subscriptions","organizations_url":"https://api.github.com/users/robsonsobral/orgs","repos_url":"https://api.github.com/users/robsonsobral/repos","events_url":"https://api.github.com/users/robsonsobral/events{/privacy}","received_events_url":"https://api.github.com/users/robsonsobral/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2016-10-30T03:12:18Z","updated_at":"2016-10-31T01:58:30Z","closed_at":null,"body":"Hi!\r\n\r\nWhy not to have a debug image on v3?\r\n\r\nI've been using susy in my first project and loving it, but a way to debug it is missing a lot.\r\n\r\n```sass\r\nbody {\r\n\tposition: relative;\r\n\r\n\t&:before {\r\n\t\tbackground: transparent url(grid-image()) repeat-y left top;\r\n\t\tcontent: '';\r\n\t\tpointer-events: none;\r\n\t\tposition: fixed;\r\n\t\ttop: 0;\r\n\t\tright: 0;\r\n\t\tbottom: 0;\r\n\t\tleft: 0;\r\n\t\tz-index: z-layer('modal');\r\n\r\n\t\t@include media('>=76.875em') {\r\n\t\t\tbackground-position: 50% top;\r\n\t\t}\r\n\t}\r\n```\r\n\r\nI know you want to keep susy simple, so I had a look into other discussions here and tried to cover all bases while keeping it as simple as I can. I tried my best, but I'm no expert.\r\n\r\n```sass\r\n$_svg-units: 'em', 'ex', 'px', 'pt', 'pc', 'cm', 'mm', 'in', '%';\r\n$debug-color: #f00;\r\n\r\n@function grid-image($grid: $susy) {\r\n\t// to use double single quotes inside the string save us from encode the double ones\r\n\t// scss-lint:disable StringQuotes\r\n\t$grid: susy-normalize($grid);\r\n\r\n\t$columns: map-get($grid, 'columns');\r\n\t$gutter: map-get($grid, 'gutters');\r\n\r\n\t@if index($_svg-units, unit($gutter)) == null {\r\n\t\t@error \"SVG unsuported unit used for gutter: #{unit($gutter)}\";\r\n\t}\r\n\r\n\t$color: $debug-color + unquote(\"\");\r\n\t$color: if(str-index($color, '#'), '%23' + str-slice($color, 2), $color);\r\n\r\n\t$x: 0;\r\n\r\n\t$svg: \"%3Crect x='#{$x}' width='#{$gutter}' height='100%' fill='#{$color}' opacity='0.5'/%3E\";\r\n\r\n\t@each $column in $columns {\r\n\t\t@if index($_svg-units, unit($column)) == null {\r\n\t\t\t@error \"SVG unsuported unit used for column: #{unit($column)}\";\r\n\t\t}\r\n\r\n\t\t$x: $x + $gutter + $column;\r\n\r\n\t\t$svg: $svg + \"%3Crect x='#{$x}' width='#{$gutter}' height='100%' fill='#{$color}' opacity='0.5'/%3E\";\r\n\t}\r\n\r\n\t$x: $x + $gutter;\r\n\r\n\t$svg: \"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='#{$x}' height='1#{unit($gutter)}'%3E\" + $svg + \"%3C/svg%3E\";\r\n\r\n\t@return $svg;\r\n}\r\n```\r\n\r\nThank you for your attention, patience and for susy."},"comment":{"url":"https://api.github.com/repos/oddbird/susy/issues/comments/257198558","html_url":"https://github.com/oddbird/susy/issues/609#issuecomment-257198558","issue_url":"https://api.github.com/repos/oddbird/susy/issues/609","id":257198558,"user":{"login":"narration-sd","id":247945,"avatar_url":"https://avatars.githubusercontent.com/u/247945?v=3","gravatar_id":"","url":"https://api.github.com/users/narration-sd","html_url":"https://github.com/narration-sd","followers_url":"https://api.github.com/users/narration-sd/followers","following_url":"https://api.github.com/users/narration-sd/following{/other_user}","gists_url":"https://api.github.com/users/narration-sd/gists{/gist_id}","starred_url":"https://api.github.com/users/narration-sd/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/narration-sd/subscriptions","organizations_url":"https://api.github.com/users/narration-sd/orgs","repos_url":"https://api.github.com/users/narration-sd/repos","events_url":"https://api.github.com/users/narration-sd/events{/privacy}","received_events_url":"https://api.github.com/users/narration-sd/received_events","type":"User","site_admin":false},"created_at":"2016-10-31T01:58:30Z","updated_at":"2016-10-31T01:58:30Z","body":"But plug-in seems fine; helpful for when we want those, and this way keeps\nthe dimensions of testing and understanding the core down, by is\nmodularity,  no?\n\nOn Oct 30, 2016 17:32, \"Robson Sobral\" <notifications@github.com> wrote:\n\n> Thank you for your kind words, Miriam. There's probably a better way to\n> get the full width of the grid and that I should have set % as unit for\n> unitless grids, but everything is so... So well divided into tiny little\n> functions that I got lost.\n>\n> If I may... My opinion is that it should be part of the core. It's weird\n> to have to install a plugin just to see what you're doing.\n>\n> As susy3, this functions makes no assumptions on \"how\" you're working, You\n> can use as content or as background, you can change the background-size,\n> the background-repeat, or to use it inside of just one element, to have a\n> grid for the first half of page and another to the rest... So, I guess the\n> idea fits.\n>\n> Thank you!\n>\n> —\n> You are receiving this because you are subscribed to this thread.\n> Reply to this email directly, view it on GitHub\n> <https://github.com/oddbird/susy/issues/609#issuecomment-257191907>, or mute\n> the thread\n> <https://github.com/notifications/unsubscribe-auth/AAPIiWUnm9wfGEBybF9wFbphkJFkcflDks5q5TcKgaJpZM4KkRx1>\n> .\n>\n"}}
{"actor":{"display_login":"narration-sd"}}