Hi Thomas — does this mean I can still express padding in pixels, even though the box width is a percentage?
I’ve just applied this to the outer-most box, and applied a 20px padding value instead of previous percentages, but the boxes don’t scale correctly as the browser window narrows.
Assumptions:
That the box-sizing attribute cascades to contained boxes.
That it’s applied to the
This is all still relatively new to me, despite using Backdraft for a while.
You can do this if your elements are styled with the box-sizing: border-box extra CSS. There’s an Action for this, but it’s not yet ready for FW7 (it is actively broken there). You can add the CSS to the elements manually (and I recommend my PrefixFree Action if you do, so you don’t have to write out all the various vendor prefixes long-hand).
Walter
On Jul 31, 2014, at 9:44 AM, Ian Halstead wrote:
Hi Thomas — does this mean I can still express padding in pixels, even though the box width is a percentage?
I was wondering where the Box-sizing action had gone to — it’s used in Backdraft as I would expect, now that I’ve seen it’s purpose. Another click moment.
If you’re Backdraft user, I can just recommend having a quick look into the lounge. You should have a voucher for one free week (if you haven’t already done). I think I even spent some words on box-sizing, which is IMO one of the most fundamental knowledge if it comes to dynamic widths and heights.
I furthermore wish, that Freeway’s workspace would follow border-box rather than box.
All now working. This method screws up the page view in Freeway, as is assumes the weird content-box method of determining box size is still in operation. Small price to pay until the action is available.
I did look at your tutorials Thomas, but ran out of time before I managed to complete them. I’ll save some pennies and take another look at some point.
Is it possible to use the responsiveness in FW7 and Backdraft? My concern about the FW method is that images have to be ‘pass through’ - so they all have to be the correct size that is to go on the page. The beauty with Backdraft was that you just treat it as a normal picture box and so can change size of image within the box.
As far as I know you can, but the issues with images will be the same (if you use the responsive features in Freeway). The problem is that regular images can only be repositioned between breakpoints and not resized. As soon as you resize them they’ll be resized in all others.
Joe
On 31 Jul 2014, at 16:51, Noel Sergeant email@hidden wrote:
Maybe a daft question.
Is it possible to use the responsiveness in FW7 and Backdraft? My concern about the FW method is that images have to be ‘pass through’ - so they all have to be the correct size that is to go on the page. The beauty with Backdraft was that you just treat it as a normal picture box and so can change size of image within the box.
Just be aware that you won’t be able to resize the image at your breakpoints without them being resized at all other breakpoints (not just the lower ones). You’ll need to work with the image at its full size in the smaller breakpoints (which may or may not be workable, it depends on your design).
Joe
On 1 Aug 2014, at 14:35, Caleb Grove email@hidden wrote:
On 1 Aug 2014, at 14:49, Joe Billings email@hidden wrote:
Just be aware that you won’t be able to resize the image at your breakpoints without them being resized at all other breakpoints (not just the lower ones). You’ll need to work with the image at its full size in the smaller breakpoints (which may or may not be workable, it depends on your design).
This is all while designing in Freeway, in case that wasn’t clear.
I suppose it will be interesting to know if styles or extended styles can
be affixed to specific breakpoints. Such behavior could be a lifesaver for
this new responsive layout paradigm.
–
Ernie Simpson
On Fri, Aug 1, 2014 at 9:16 AM, Joe Billings email@hidden wrote:
As far as I know you can, but the issues with images will be the same (if
you use the responsive features in Freeway). The problem is that regular
images can only be repositioned between breakpoints and not resized. As
soon as you resize them they’ll be resized in all others.
I just tested this, and yes, the style was properly cordoned off in a breakpoint @media container when I added it at a different view than the default. Looks like you could have entirely separate Extended attributes for each layer of the cake. You would need to manually duplicate these in each relevant breakpoint, though. Unlike the other styles, they don’t “cascade” down to the lower sizes automatically. That’s actually a good thing, though.
Walter
On Aug 1, 2014, at 11:32 AM, Ernie Simpson wrote:
I suppose it will be interesting to know if styles or extended styles can
be affixed to specific breakpoints. Such behavior could be a lifesaver for
this new responsive layout paradigm.
–
Ernie Simpson
On Fri, Aug 1, 2014 at 9:16 AM, Joe Billings email@hidden wrote:
As far as I know you can, but the issues with images will be the same (if
you use the responsive features in Freeway). The problem is that regular
images can only be repositioned between breakpoints and not resized. As
soon as you resize them they’ll be resized in all others.
Any styles applied in the Extended dialog should cascade down as normal. To not do that the style would need to be reset in the next breakpoint down. We use this feature on the Softpress site to change the font size of text within an item at a particular breakpoint.
Joe
On 1 Aug 2014, at 16:37, Walter Lee Davis email@hidden wrote:
I just tested this, and yes, the style was properly cordoned off in a breakpoint @media container when I added it at a different view than the default. Looks like you could have entirely separate Extended attributes for each layer of the cake. You would need to manually duplicate these in each relevant breakpoint, though. Unlike the other styles, they don’t “cascade” down to the lower sizes automatically. That’s actually a good thing, though.
Walter
On Aug 1, 2014, at 11:32 AM, Ernie Simpson wrote:
I suppose it will be interesting to know if styles or extended styles can
be affixed to specific breakpoints. Such behavior could be a lifesaver for
this new responsive layout paradigm.
–
Ernie Simpson
On Fri, Aug 1, 2014 at 9:16 AM, Joe Billings email@hidden wrote:
As far as I know you can, but the issues with images will be the same (if
you use the responsive features in Freeway). The problem is that regular
images can only be repositioned between breakpoints and not resized. As
soon as you resize them they’ll be resized in all others.
Move to the iPad breakpoint, and open Item/Extended.
Add something to the style tab, I chose display:inline-block
Preview in your text editor.
The override only appears within the max-width: 768px block, not in any other part of the CSS.
Walter
On Aug 1, 2014, at 11:46 AM, Joe Billings wrote:
Any styles applied in the Extended dialog should cascade down as normal. To not do that the style would need to be reset in the next breakpoint down. We use this feature on the Softpress site to change the font size of text within an item at a particular breakpoint.
Joe
On 1 Aug 2014, at 16:37, Walter Lee Davis email@hidden wrote:
I just tested this, and yes, the style was properly cordoned off in a breakpoint @media container when I added it at a different view than the default. Looks like you could have entirely separate Extended attributes for each layer of the cake. You would need to manually duplicate these in each relevant breakpoint, though. Unlike the other styles, they don’t “cascade” down to the lower sizes automatically. That’s actually a good thing, though.
Walter
On Aug 1, 2014, at 11:32 AM, Ernie Simpson wrote:
I suppose it will be interesting to know if styles or extended styles can
be affixed to specific breakpoints. Such behavior could be a lifesaver for
this new responsive layout paradigm.
–
Ernie Simpson
On Fri, Aug 1, 2014 at 9:16 AM, Joe Billings email@hidden wrote:
As far as I know you can, but the issues with images will be the same (if
you use the responsive features in Freeway). The problem is that regular
images can only be repositioned between breakpoints and not resized. As
soon as you resize them they’ll be resized in all others.
Yep, that’s correct. That means you’ll see that at all sizes below 768px unless you override it with something else at a smaller breakpoint. You don’t have to explicitly declare the same property at the smaller breakpoints since they’re all below 768.
Joe
On 1 Aug 2014, at 16:50, Walter Lee Davis email@hidden wrote:
Try these steps, Joe, let me know what you get.
New blank page, HTML5.
Draw an HTML box somewhere on the page.
Move to the iPad breakpoint, and open Item/Extended.
Add something to the style tab, I chose display:inline-block
Preview in your text editor.
The override only appears within the max-width: 768px block, not in any other part of the CSS.
Walter
On Aug 1, 2014, at 11:46 AM, Joe Billings wrote:
Any styles applied in the Extended dialog should cascade down as normal. To not do that the style would need to be reset in the next breakpoint down. We use this feature on the Softpress site to change the font size of text within an item at a particular breakpoint.
Joe
On 1 Aug 2014, at 16:37, Walter Lee Davis email@hidden wrote:
I just tested this, and yes, the style was properly cordoned off in a breakpoint @media container when I added it at a different view than the default. Looks like you could have entirely separate Extended attributes for each layer of the cake. You would need to manually duplicate these in each relevant breakpoint, though. Unlike the other styles, they don’t “cascade” down to the lower sizes automatically. That’s actually a good thing, though.
Walter
On Aug 1, 2014, at 11:32 AM, Ernie Simpson wrote:
I suppose it will be interesting to know if styles or extended styles can
be affixed to specific breakpoints. Such behavior could be a lifesaver for
this new responsive layout paradigm.
–
Ernie Simpson
On Fri, Aug 1, 2014 at 9:16 AM, Joe Billings email@hidden wrote:
As far as I know you can, but the issues with images will be the same (if
you use the responsive features in Freeway). The problem is that regular
images can only be repositioned between breakpoints and not resized. As
soon as you resize them they’ll be resized in all others.
Yep, that’s correct. That means you’ll see that at all sizes below 768px unless you override it with something else at a smaller breakpoint. You don’t have to explicitly declare the same property at the smaller breakpoints since they’re all below 768.
Joe
On 1 Aug 2014, at 16:50, Walter Lee Davis email@hidden wrote:
Try these steps, Joe, let me know what you get.
New blank page, HTML5.
Draw an HTML box somewhere on the page.
Move to the iPad breakpoint, and open Item/Extended.
Add something to the style tab, I chose display:inline-block
Preview in your text editor.
The override only appears within the max-width: 768px block, not in any other part of the CSS.
Walter
On Aug 1, 2014, at 11:46 AM, Joe Billings wrote:
Any styles applied in the Extended dialog should cascade down as normal. To not do that the style would need to be reset in the next breakpoint down. We use this feature on the Softpress site to change the font size of text within an item at a particular breakpoint.
Joe
On 1 Aug 2014, at 16:37, Walter Lee Davis email@hidden wrote:
I just tested this, and yes, the style was properly cordoned off in a breakpoint @media container when I added it at a different view than the default. Looks like you could have entirely separate Extended attributes for each layer of the cake. You would need to manually duplicate these in each relevant breakpoint, though. Unlike the other styles, they don’t “cascade” down to the lower sizes automatically. That’s actually a good thing, though.
Walter
On Aug 1, 2014, at 11:32 AM, Ernie Simpson wrote:
I suppose it will be interesting to know if styles or extended styles can
be affixed to specific breakpoints. Such behavior could be a lifesaver for
this new responsive layout paradigm.
–
Ernie Simpson
On Fri, Aug 1, 2014 at 9:16 AM, Joe Billings email@hidden wrote:
As far as I know you can, but the issues with images will be the same (if
you use the responsive features in Freeway). The problem is that regular
images can only be repositioned between breakpoints and not resized. As
soon as you resize them they’ll be resized in all others.
Walter, surely not, did you just learn something I already knew?
David Owen
On 1 Aug 2014, at 17:04, Walter Lee Davis email@hidden wrote:
Aha. Got it.
Walter
On Aug 1, 2014, at 11:54 AM, Joe Billings wrote:
Yep, that’s correct. That means you’ll see that at all sizes below 768px unless you override it with something else at a smaller breakpoint. You don’t have to explicitly declare the same property at the smaller breakpoints since they’re all below 768.
Joe
On 1 Aug 2014, at 16:50, Walter Lee Davis email@hidden wrote:
Try these steps, Joe, let me know what you get.
New blank page, HTML5.
Draw an HTML box somewhere on the page.
Move to the iPad breakpoint, and open Item/Extended.
Add something to the style tab, I chose display:inline-block
Preview in your text editor.
The override only appears within the max-width: 768px block, not in any other part of the CSS.
Walter
On Aug 1, 2014, at 11:46 AM, Joe Billings wrote:
Any styles applied in the Extended dialog should cascade down as normal. To not do that the style would need to be reset in the next breakpoint down. We use this feature on the Softpress site to change the font size of text within an item at a particular breakpoint.
Joe
On 1 Aug 2014, at 16:37, Walter Lee Davis email@hidden wrote:
I just tested this, and yes, the style was properly cordoned off in a breakpoint @media container when I added it at a different view than the default. Looks like you could have entirely separate Extended attributes for each layer of the cake. You would need to manually duplicate these in each relevant breakpoint, though. Unlike the other styles, they don’t “cascade” down to the lower sizes automatically. That’s actually a good thing, though.
Walter
On Aug 1, 2014, at 11:32 AM, Ernie Simpson wrote:
I suppose it will be interesting to know if styles or extended styles can
be affixed to specific breakpoints. Such behavior could be a lifesaver for
this new responsive layout paradigm.
–
Ernie Simpson
On Fri, Aug 1, 2014 at 9:16 AM, Joe Billings email@hidden wrote:
As far as I know you can, but the issues with images will be the same (if
you use the responsive features in Freeway). The problem is that regular
images can only be repositioned between breakpoints and not resized. As
soon as you resize them they’ll be resized in all others.
Today I did the upgrade. I opened a copy of my inline design in 7 but I can not understand how I can get things to work properly.
I deleted all of the CSS which I needed in 6 to let the responsiveness work. But what about my inline construction? Do I have to change the pagewidth according to the different breakpoints? If I do this for the iPad screen, then when previewed in the browser on my Mac, the appearance on that bigger screen is changed too!
Do I have to make different designs for each breakpoint? With pagesizes for each breakpoint, and then rearange my inline boxes?
What it a good procedure in order to change my existing design?? Must say that now it seems to me that getting things responsive is now even harder to do than the relative easy way I did it in 6 with my inline construction and additional CSS.
I tried the whole afternoon, but still no results haha! What am I doing wrong in 7? Or should I leave the inline construction…
Ahmm - the extended stuff I still have to figure out (and am not convinced of the cascading down) but the biggest lifesaver is described with four words:
###Freeway-workspace: border-box
Please towers, don’t ignore me (as with the min-width for breakpoints above default) and tell me what you think.
It’s simply weird to adjust a 98.07% wide DIV to 96.73% just to make a basically 100% wide box (extended dialogue) fit into my artwork.