The Box Sizing Action

Hi All,

A lot of you have been asking for it so I thought I’d mention on here that we’ve just put a new version of the Box Sizing Action up on ActionsForge: Box Sizing (FW7) - ActionsForge

It’s a new Action so won’t replace the old Box Sizing Action. This means that you’ll still be able to use the previous version on your 6 sites. Please take a second to read the instructions on the page – there’s one requirement if you’re creating responsive sites.

Have fun!

Joe


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Joe for all your hard work on this! Full speed ahead on Backdraft v2 now. :smiley:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes!! Caleb, go for it!!!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Great Stuff Joe!

. . . . Caleb . . . get the big guns out!

Trev


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Joe

What is the correct way to install the FW7 version of the Action.

I have FW6 and 7 installed - do they not share a common Action Folder?

When I try to install the action it wants to overwrite the older version (the one that is OK for FW6) .
Also the naming convention for 6 and 7 are the same ie: Freeway Pro - I have renamed the 7 version “Freeway7” in the filename to avoid confusion in the dock.

Trev


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Trev,

I’ve just updated the filename so it should no longer conflict. Please download it again. In Freeway you’ll see two Actions – one called Box Sizing and the other called Box Sizing (FW7).

Hope this helps,

Joe

On 26 Sep 2014, at 16:18, t50ufo email@hidden wrote:

Joe

What is the correct way to install the FW7 version of the Action.

I have FW6 and 7 installed - do they not share a common Action Folder?

When I try to install the action it wants to overwrite the older version (the one that is OK for FW6) .
Also the naming convention for 6 and 7 are the same ie: Freeway Pro - I have renamed the 7 version “Freeway7” in the filename to avoid confusion in the dock.

Trev


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Joe - I didn’t want to mess with file names too much!

T


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That worked fine - and now I know which is which in 6 and 7!

T


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

\o/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’m having nothing but problems with this Action as can be seen from these two screen shots;
https://dl.dropboxusercontent.com/u/795566/screenshots/box-sizing-tag-id.png
https://dl.dropboxusercontent.com/u/795566/screenshots/box-sizing-nan.png

The Action throws an error saying that the element doesn’t have an ID (first screen shot). The second error I now can’t appear to reproduce although (as you can see) the styles were getting written with incorrect values.

OK I’ve got it;
Set the page to a flexible width and the Action can’t correctly calculate the page width.

I’m also confused why the Action can’t just use the width of the page (fwPage.fwWidth) if the width can’t be found in the styles. This would mean you should be able to get rid of the Flexible Page Action and make the workflow a lot less involved. Maybe.

Anyway, the Action source code gave me some ideas about my other Action question so thanks for that.
Regards,
Tim.

On 26 Sep 2014, at 13:02, Joe Billings wrote:

A lot of you have been asking for it so I thought I’d mention on here that we’ve just put a new version of the Box Sizing Action up on ActionsForge: Box Sizing (FW7) - ActionsForge


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 26 Sep 2014, 1:19 pm, Caleb Grove wrote:

Thanks Joe for all your hard work on this! Full speed ahead on Backdraft v2 now. :smiley:

ETA Caleb? :slight_smile: I love using Backdraft as it is so easy and (more importantly) quick.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

ETA Caleb? :slight_smile: I love using Backdraft as it is so easy and (more importantly) quick.

No ETA that I can announce at this point. I’ll be working hard to get it out ASAP (even though that might mean no big new modules). :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

For others who are just learning about the Box-Sizing Action and wonder why it is so useful, there is an explanation on ActionForge’s page on the FW6 Box-Sizing Action.

Would love to know why it is necessary to use the Flexible Page option when you use the FW7 Box-Sizing Action, and how things look different in a browser when it is and when it isn’t used. Or what goes wrong when you try to use the Box-Sizing Action without the Flexible Page Action.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Draw an item on your workspace (doesn’t matter how). Make it 500px wide. Apply now a padding of 20px to both sides (left and right). Watch the size in inspector. It should be 460px.

This is called box-sizing: box and is default browser behavior. This will mean, that the width of this box is calculated based on its content, not its dimension.

Unfortunately this happens in an inline-design as well. And strangely it happens even in percentage. Now assumed you have 4 boxes in a container 100% wide, each box can take 25% of space. Applied a padding to each box, its size will be reduced, something to 23% (or whatever).

23x4=92% (of theoretical 100%).

Bad - isn’t it?

The box-sizing action has now two assignments:

  1. Telling the browser to calculate boxes from border to border (box-sizing: border-box)

  2. Re-adjust the reduced width back to the “wanted”, so the 23% to 25%

Constraint:

We are talking about the output (some call this code).

As long people persist on WYSIWYG they will struggle with this, cause in your workspace (Freeway) nothing changes or happens. It will still show those 23% (or 460px whatsoever).

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

@Thomas:
… struggle with it?
You can say that again. :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 6 Oct 2014, at 04:47, Peter Laundy email@hidden wrote:

Would love to know why it is necessary to use the Flexible Page option when you use the FW7 Box-Sizing Action, and how things look different in a browser when it is and when it isn’t used. Or what goes wrong when you try to use the Box-Sizing Action without the Flexible Page Action.

The Flexible Page Action turns a fixed width page into a flexible page. It’s required because the Box Sizing Action needs to know what the pixel width of an item is at every breakpoint in order to calculate a percentage width based on box sizing (border + padding + width). If the item it’s trying to calculate the width for is already percentage based (or has no width – let’s just say flexible) then it looks at its parent, but this too can be flexible, so it looks at that items parent. This can go all the way up to the page itself which, you guessed it, can also be flexible. So, by making the page a fixed width the Action can recalculate the width of items based on that and some simple arithmetic.

Joe


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If the item it’s trying to calculate the width for is already percentage based (or has no width – let’s just say flexible) then it looks at its parent, but this too can be flexible, so it looks at that items parent. This can go all the way up to the page itself which, you guessed it, can also be flexible. So, by making the page a fixed width the Action can recalculate the width of items based on that and some simple arithmetic.

Got it! Thanks.

So it’s best practice then to have an inline page either all border box + flexible page or “neither”, as the flexible page action is applied to the page, right? And there is really no reason to have any responsive pages using inline construction be “neither”.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options