csswizardry-grids
csswizardry-grids copied to clipboard
csswizardry
Magic number in markup-fix
Hey there! I really love working with this grid, simplest one I came across so far. Just a quick thought: When using the mark-up-fix, the em-value seems to be a magic number and sometimes not the best solution. Wouldn't a variable with a default on 0.31em then be clearer to people running into bugs? For example, when working with Georgia 20/1.5, the whole thing would only work with -0.32em when going down to the mobile breakpoint. ( I think it must be some rounding mistake browser-side). The browser was chrome 26, I can send some screenshots if needed. While this may be a really specific case, it shows that this number is not bulletproof.
I advocate against the use of the non-markup fix because of this very reason; it’s a magic number. The number is based upon quite old (as in, tried and tested) code written (I believe) by Yahoo!
If you can provide more info I might be able to look into, but there will always be problems with using such hacks I’m afraid.
What do you think of using font-size: 0 on gird container and then fix the font-size in columns? (From here: https://twitter.com/garand/status/183253526313566208 )
This approach has its own limitations: It does not work on pre-Jellybean Android and breaks the usage of em on .grid elements. (would need to use rem and therefore px-fallback for IE too) I am currently using a combination of the font-size: 0 and letter-spacing, which works (besides that em problem), but it is a dirty hack (still better than floats for me) until perhaps white-space:none comes along (hopefully). Someone has written a solid polyfill for this behaviour, so if you're ok with relying on JS, here is a solution: https://github.com/dotnetCarpenter/white-space .
Looks like the most solid solution is weird style in markup, which removes whitespace: "...</ div >< div >..."
I've got the same problem with Gotham served via cloud.typography, -0.31 won't work, -0.32 does somewhere, somewhere it needs -0.33.. kinda pain in the ass, it worked just fine with Proxima we were using previously.
