New Action - Box Sizing

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.

http://actionsforge.com/actions/view/294-css3-box-sizing

You are essentially going to be testers of the Action, sop let us know if you have any problems :slight_smile:

Enjoy!

Joe


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

Thanks Joe! This will be super-handy.


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

Thanks Joe. (Can it be, that on action forge the columns action has a wrong download link to shadow extra?)


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

Yep, it was incorrectly marked as 0.5 of the Shadows Extra Action. I’ve corrected it so the latest version is the correct 0.3.1.

Joe

On 18 Mar 2013, at 20:08, “GTPeter” email@hidden wrote:

Thanks Joe. (Can it be, that on action forge the columns action has a wrong download link to shadow extra?)


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

Nice action.

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.

Cheers.

Al.


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

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.

Cheers

Thomas


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

I dont really understand this at action can anyone demo it in action?

Cheers!


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

Justin and Thomas,

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.

For a better explanation with demos, see this: http://css-tricks.com/box-sizing/


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

Hi Thomas,

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.

Joe


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

Hi Joe,

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.

So as I said: I have to try and mind.

Cheers

Thomas


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

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.

http://screencasts.q-ring.de/version6/responsive.html

(Talking about the #main-blog-box and #sidebar).

Cheers

Thomas


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

Hi Thomas,

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.

http://screencasts.q-ring.de/version6/responsive.html

(Talking about the #main-blog-box and #sidebar).

Cheers

Thomas


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

Hi Joe

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.

Help

Mark


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

On 20 Mar 2013, 11:52 am, Justin Easthall wrote:

I dont really understand this at action can anyone demo it in action?

Cheers!

I’d like to see this in action too. I’m still not getting it.


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

I’d like to see this in action too. I’m still not getting it.

May I ask you why?

Or the other way round:

Can you point me to an example where you ran in trouble?

Cheers

Thomas


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

That form’s a rare thing of beauty, Walter. :slight_smile:

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?

Gavin


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

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. :slight_smile:

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?

Gavin


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