I’ve just added a new CSS3 Action to ActionsForge. It’s a little niche but allows you to do some pretty cool things that a lot of people have been playing with recently (fluid and responsive layouts). By applying it to an item you can specify that its dimensions be defined from the borders, rather than the padding. This means that you can then make items with padding 100% of the parent, something that isn’t otherwise possible without setting both the width and padding as percentages.
As an added bonus, I’ve also made it so the width and/or height can be automatically converted to a percentage value, which adds a commonly requested feature of supporting fractional percentages. If you use this feature, all you need to do is position your items where you want them and the Action will handle generating the appropriate width/height values for you.
I have the box-sizing properties in my responsive stylesheet, but it’s just so much nicer to see my site looking the way I want it to in Freeway, rather than coaxing into shape in the browser.
Thanks for this. Just updating my latest site to make the most of it.
I have the box-sizing properties in my responsive stylesheet, but it’s just so much nicer to see my site looking the way I want it to in Freeway, rather than coaxing into shape in the browser.
Hi Alan and Joe,
just for my less understanding - cause it seems I don’t get the gist of it.
Is it really affecting the construction-view in Freeway? Cause if yes - I do something fundamental wrong.
It’s all a little difficult to explain, but it has to do with how the div’s sizes is calculated.
Let’s say that you were hand coding, and you create a div with a width of 100px, padding of 10px (all around) and a margin of 10px all around. You would think that this would make a 120px wide box (width + margin-left + margin-right) with a content area of 80px (width - padding-left - padding-right), but it actually makes a box that is 140px wide with a 100px content area. That equation is: width + margin-left + margin-right + padding-left + padding-right.
Freeway figures this out for you automatically, and so it usually isn’t a problem. However, it rears its ugly head when you are using percentages and flexible widths. If, in Freeway, you create four inline divs side-by-side and give them each a width of 25% with 10px of padding, you would think that all together they would always fill the width of their parent, no more, no less. However, that doesn’t work. As you shrink the viewport, the furthest right div will get shoved below.
What this means is that you must have a lot more breakpoints to keep this from happening. More breakpoints = more and more complex code = never a good thing.
What this action does is set the boxes to use the CSS box-sizing: border-box on the item in question. This changes to equation to just width + margins, so that above div that we were working on would be a logical 120px wide with a 80px content area. This is essentially how Freeway works when you are not building flexibly.
On 20 Mar 2013, at 10:31, Thomas Kimmich email@hidden wrote:
Is it really affecting the construction-view in Freeway? Cause if yes - I do something fundamental wrong.
It isn’t doing anything in the page view in Freeway, it’s just making sure the output looks the same in the browser as it does in Freeway. Take a look at this screenshot which shows a regular item, an item with border-box applied manually, and an item with border-box applied using the Action: http://cl.ly/image/2N1i2M3s1I3V
Notice how the regular item and the Action based item look the same in the output, but the manually applied item does not.
thanks for this - I’ll have to mind about this a bit.
I already pointed this in my screencasts, so my subscribers (which are the most important!) are actually up to date solving this manually.
The caveat on our (screencast)construction is, that we have four boxes in a wrapper that take each 25%. But to get a proper gutter for the content we added a padding (10px) to each of them which caused naturally a reduction to 24% and this is ending up (of course) in missing 4% at the end.
So I have now to point out (to maybe recommend this in a following cast) how to apply the action and what to set - and honestly, my first test failed.
The action is adding a fixed-height value (either pixel or percent naturally) instead simply taking the min-height (undefined) value from inspector that I’d prefer - better: need for a proper working Inflow-Construction. Is the height really a value that needs to be box-sized? Just wonder.
Yeah, I noticed that last night when putting the example together. Will put a 0.2 up shortly.
Joe
On 21 Mar 2013, at 09:00, “Thomas Kimmich” email@hidden wrote:
Hi Joe,
OK - tested and works as expected.
One thing to discuss:
The action is adding a fixed-height value (either pixel or percent naturally) instead simply taking the min-height (undefined) value from inspector that I’d prefer - better: need for a proper working Inflow-Construction. Is the height really a value that needs to be box-sized? Just wonder.
A lot has changed regarding the Measurements Pallet in FW6 and sizing of pages and items. I haven’t found any documentation or manual to get to grips with it. Is there documentation?
I’ve read and reread the ‘what’s new quick guide’ but it’s not helping and it doesn’t mention the new sizes for pages.
Well, you can list all of the Actions at http://actionsforge.com/actions – that’s the alphabetical list, and you do need to page through it, because it would take quite a while to load all of them. (There are 289, but each action also needs to load its project, its authors, and its versions, and this becomes a fairly sluggish query when you ask for all of the Actions.)
Walter
On Jan 9, 2014, at 11:42 AM, gavtro wrote:
That form’s a rare thing of beauty, Walter.
The Box Sizing Action is cool. Seems to have worked well (I’m assuming with no loss of functionality?!). Thank you.
Is there anywhere that lists all the Actions in one place, rather than flicking through page after page of the Forge?
