{"action":"created","issue":{"url":"https://api.github.com/repos/whatsnewsaes/Skeleton-Less/issues/1","labels_url":"https://api.github.com/repos/whatsnewsaes/Skeleton-Less/issues/1/labels{/name}","comments_url":"https://api.github.com/repos/whatsnewsaes/Skeleton-Less/issues/1/comments","events_url":"https://api.github.com/repos/whatsnewsaes/Skeleton-Less/issues/1/events","html_url":"https://github.com/whatsnewsaes/Skeleton-Less/pull/1","id":55322199,"number":1,"title":"Fixes column math to replicate original","user":{"login":"HighOnMikey","id":3639519,"avatar_url":"https://avatars.githubusercontent.com/u/3639519?v=3","gravatar_id":"","url":"https://api.github.com/users/HighOnMikey","html_url":"https://github.com/HighOnMikey","followers_url":"https://api.github.com/users/HighOnMikey/followers","following_url":"https://api.github.com/users/HighOnMikey/following{/other_user}","gists_url":"https://api.github.com/users/HighOnMikey/gists{/gist_id}","starred_url":"https://api.github.com/users/HighOnMikey/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/HighOnMikey/subscriptions","organizations_url":"https://api.github.com/users/HighOnMikey/orgs","repos_url":"https://api.github.com/users/HighOnMikey/repos","events_url":"https://api.github.com/users/HighOnMikey/events{/privacy}","received_events_url":"https://api.github.com/users/HighOnMikey/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-01-23T19:31:21Z","updated_at":"2015-01-23T19:32:21Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/whatsnewsaes/Skeleton-Less/pulls/1","html_url":"https://github.com/whatsnewsaes/Skeleton-Less/pull/1","diff_url":"https://github.com/whatsnewsaes/Skeleton-Less/pull/1.diff","patch_url":"https://github.com/whatsnewsaes/Skeleton-Less/pull/1.patch"},"body":"Currently, the calculation is:\r\n\r\n```\r\nspecific-column-width = base-column-width * column-span - column-margin\r\n```\r\n\r\nUnless you use twelve columns, any combination of columns will never equal 100%, resulting in something like this:\r\n\r\n![Alignment issue](http://i.imgur.com/weIjNre.png)\r\n\r\nThe current calculation isn't taking into consideration the **total** left-margin provided by each individual column.\r\n\r\n```\r\n@marginWidth: 2%;\r\n@columnCount: 12;\r\n\r\n.columnCalc(@columns, @i: 1) when (@i <= @columns) {\r\n  .@{i} {\r\n    &.columns {\r\n      width: (((100 - @marginWidth * (@columns - 1)) / @columns) * @i) + ((@i - 1) * @marginWidth);\r\n    }\r\n  }\r\n  .columnCalc(@columns, @i + 1);\r\n}\r\n\r\n.columnCalc(@columnCount);\r\n```\r\n\r\nFirst, `100 - @marginWidth * (@columns - 1)` calculates the total amount of space a full row (12 in this example) of `<div class=\"one column\">` can occupy.\r\n\r\nThis is then divided by the total number of columns possible, giving you a single column's width.\r\n\r\nThe single column's width is then multiplied by the iterator. The iterator, `@i`, represents how many columns to span by (ie. the .seven in .seven.columns). This gives you the width of the column **without** taking into consideration each margin-left.\r\n\r\n`+ ((@i - 1) * @marginWidth` will then add the missing margin width to the total width of the column.\r\n\r\nA downside to the above is that it will generate `.x.columns` classes and not something like `.two.columns`, so I in lieu of the loop I simply added a single variable and modified existing ones."},"comment":{"url":"https://api.github.com/repos/whatsnewsaes/Skeleton-Less/issues/comments/71250952","html_url":"https://github.com/whatsnewsaes/Skeleton-Less/pull/1#issuecomment-71250952","issue_url":"https://api.github.com/repos/whatsnewsaes/Skeleton-Less/issues/1","id":71250952,"user":{"login":"HighOnMikey","id":3639519,"avatar_url":"https://avatars.githubusercontent.com/u/3639519?v=3","gravatar_id":"","url":"https://api.github.com/users/HighOnMikey","html_url":"https://github.com/HighOnMikey","followers_url":"https://api.github.com/users/HighOnMikey/followers","following_url":"https://api.github.com/users/HighOnMikey/following{/other_user}","gists_url":"https://api.github.com/users/HighOnMikey/gists{/gist_id}","starred_url":"https://api.github.com/users/HighOnMikey/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/HighOnMikey/subscriptions","organizations_url":"https://api.github.com/users/HighOnMikey/orgs","repos_url":"https://api.github.com/users/HighOnMikey/repos","events_url":"https://api.github.com/users/HighOnMikey/events{/privacy}","received_events_url":"https://api.github.com/users/HighOnMikey/received_events","type":"User","site_admin":false},"created_at":"2015-01-23T19:32:21Z","updated_at":"2015-01-23T19:32:21Z","body":"Also, the original skeleton doesn't appropriately handle offsets, which I did not fix. Offsets will only work properly for the first child div."}}