{"action":"created","issue":{"url":"https://api.github.com/repos/sky-uk/toolkit-ui/issues/171","repository_url":"https://api.github.com/repos/sky-uk/toolkit-ui","labels_url":"https://api.github.com/repos/sky-uk/toolkit-ui/issues/171/labels{/name}","comments_url":"https://api.github.com/repos/sky-uk/toolkit-ui/issues/171/comments","events_url":"https://api.github.com/repos/sky-uk/toolkit-ui/issues/171/events","html_url":"https://github.com/sky-uk/toolkit-ui/pull/171","id":179995524,"number":171,"title":"Feature/tile fluid","user":{"login":"MrDinsdale","id":2472440,"avatar_url":"https://avatars.githubusercontent.com/u/2472440?v=3","gravatar_id":"","url":"https://api.github.com/users/MrDinsdale","html_url":"https://github.com/MrDinsdale","followers_url":"https://api.github.com/users/MrDinsdale/followers","following_url":"https://api.github.com/users/MrDinsdale/following{/other_user}","gists_url":"https://api.github.com/users/MrDinsdale/gists{/gist_id}","starred_url":"https://api.github.com/users/MrDinsdale/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/MrDinsdale/subscriptions","organizations_url":"https://api.github.com/users/MrDinsdale/orgs","repos_url":"https://api.github.com/users/MrDinsdale/repos","events_url":"https://api.github.com/users/MrDinsdale/events{/privacy}","received_events_url":"https://api.github.com/users/MrDinsdale/received_events","type":"User","site_admin":false},"labels":[{"id":381630538,"url":"https://api.github.com/repos/sky-uk/toolkit-ui/labels/hunting%20for%20squirrels","name":"hunting for squirrels","color":"FE9626","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2016-09-29T09:21:39Z","updated_at":"2016-11-15T10:36:14Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/sky-uk/toolkit-ui/pulls/171","html_url":"https://github.com/sky-uk/toolkit-ui/pull/171","diff_url":"https://github.com/sky-uk/toolkit-ui/pull/171.diff","patch_url":"https://github.com/sky-uk/toolkit-ui/pull/171.patch"},"body":"## Description\n\nAdds fluid class for tiles. This is being used on multiple projects to some extent now so would be a good time to start looking at solidifying it.\n\nThis change adds `.c-tile--fluid`, a modifier which allows tile content to be scaled based on the tile size rather than a set px/rem value.\n\nTo achieve this we set a `font-size` on the `c-tile--fluid` in vw causing it to scale with the browser size. To get a sensible/useful value for this we take the small breakpoint (420px) and calculate the global font size (20px) at this resolution:\n\n```\n(20 / 420) * 100vw\n```\n\nThis provides a solid starting point so we know at 420px resolution our fluid base size will always be the equivalent of 20px.\n\nFrom here we can use em units for any nested elements knowing that they will scale appropriately.\n\nThis has been tested fairly rigorously and stands up well, would be fantastic to start getting more input and suggestions from people.\n\nThe below screenshots demonstrate gradual reductions of the browser width:\n\n_Large_\n![tile-large](https://cloud.githubusercontent.com/assets/2472440/18957982/f7a749fa-8658-11e6-9c19-e07f0e4dd803.png)\n\n_Medium_\n![tile-medium](https://cloud.githubusercontent.com/assets/2472440/18957985/f9beab0c-8658-11e6-8413-5d86b1bbd571.png)\n\n**Issues**\n- Quite complex, requires heavy inline docs\n- Custom padding and margins need to be manually set per element in em (we have a convert to em function to assist).\n- The tile content doesn't scale perfectly due to the fixed widths of the tile borders.\n- font-sizes are a little unpleasant (unavoidable), when using width constraint the base font-size is around `28.57143px` for medium tiles.\n## Related Issue\n\nN/A\n## Motivation and Context\n\nThis solves an issue with how we handle scaling of content on square tiles responsively.\n## How Has This Been Tested?\n\nTo test this include in project or via [Blackjack Tile](https://github.com/sky-uk/blackjack-tile)\n## Types of changes\n\nWhat types of changes does your code introduce? Put an `x` in all the boxes that apply:\n- [ ] Bug fix (non-breaking change which fixes an issue)\n- [x] New feature (non-breaking change which adds functionality)\n- [ ] Breaking change (fix or feature that would cause existing functionality to change)\n## Checklist:\n- [x] New functions and mixins have appropriate tests.\n- [x] All new and existing tests passed.\n- [x] Changes have been browser tested (including IE).\n- [ ] I have added instructions on how to test my changes.\n- [ ] Package version updated.\n- [ ] CHANGELOG.md updated.\n\n_PS just realised the caption for non-fluid tiles in the screenshot is incorrect_\n"},"comment":{"url":"https://api.github.com/repos/sky-uk/toolkit-ui/issues/comments/260606797","html_url":"https://github.com/sky-uk/toolkit-ui/pull/171#issuecomment-260606797","issue_url":"https://api.github.com/repos/sky-uk/toolkit-ui/issues/171","id":260606797,"user":{"login":"MrDinsdale","id":2472440,"avatar_url":"https://avatars.githubusercontent.com/u/2472440?v=3","gravatar_id":"","url":"https://api.github.com/users/MrDinsdale","html_url":"https://github.com/MrDinsdale","followers_url":"https://api.github.com/users/MrDinsdale/followers","following_url":"https://api.github.com/users/MrDinsdale/following{/other_user}","gists_url":"https://api.github.com/users/MrDinsdale/gists{/gist_id}","starred_url":"https://api.github.com/users/MrDinsdale/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/MrDinsdale/subscriptions","organizations_url":"https://api.github.com/users/MrDinsdale/orgs","repos_url":"https://api.github.com/users/MrDinsdale/repos","events_url":"https://api.github.com/users/MrDinsdale/events{/privacy}","received_events_url":"https://api.github.com/users/MrDinsdale/received_events","type":"User","site_admin":false},"created_at":"2016-11-15T10:36:14Z","updated_at":"2016-11-15T10:36:14Z","body":"Going to give it until after lunch to give everyone a chance to check it over. Review now or forever hold your peace."}}
{"actor":{"display_login":"MrDinsdale"}}