I feel there is a good tip coming?
Soon, but not now.
tl;dr: You need to apply the Box Sizing action to any flexible-width element that uses padding. However, this action is broken under FW 7 at this time and doesn’t work properly.
You see, in the web world, padding actually adds to the width of the element. For example, hand-code a 100px wide
<div> with 20px of padding all around. While you would expect the resulting box to be 100px wide with a 60px “usable” area, it actually becomes 140px wide with a 100px usable area.
This gets worse when you are dealing with a flexible environment. Imagine for a second that you created a 100% wide
<div>. It works great, until you add 10px of padding. Suddenly, this box is now 100% + 20px wide. Too wide to work.
Freeway attempts to insulate you from this by constraining percent widths when there is padding. This is why FW won’t let you set a box with padding to 100% wide - it will constrain the width to 96% (or something similar) so that 96% + the padding = 100%.
This works fine, as long as the page doesn’t shrink in width. Once it does, the math that Freeway did to work out the width becomes incorrect. A 96% wide element may leave 14px available for padding when it’s 1200px wide, but it will only leave 7px for padding when it is 600px wide, and things will break.
There is a fix though. It’s called
box-sizing: border-box. This is a bit of CSS that tells the browser that you want the padding to decrease the usable space of the element instead of enlarging it. Hence, a 100% wide element will be 100% wide, regardless of padding.
You can see this in action here: http://codepen.io/CalebGrove/pen/BIvbm
With Freeway, it’s not quite this simple, as you don’t just need to apply the CSS correctly, but you also need to override the constrained width’s that Freeway spits out with the proper percentages (otherwise, that 100% width box that Freeway constrained to 96% will be just that, 96% wide).
This is why the Box Sizing action is so incredibly useful. Not only does it apply the CSS to the element, it also automatically recalculates the % width so that the box that FW constrained to 96% will be the correct 100%.
However, the Box Sizing action is broken in FW 7. This is why Backdraft is currently stuck in the mud. Joe Billings has told me that an update is in the works, but never gave me an ETA.
freewaytalk mailing list
Update your subscriptions at: