[Pro] Freeway Pro Responsive?

I started this project because of voiced interest in making responsive websites with Freeway Pro (it’s on everybody’s FWP6 wishlist). I thought that I’d generate some curiosity when I leaked this the other day, maybe I misjudged?

http://cssway.thebigerns.com/products/context-responsive/


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

Very good! Works a treat on an iPhone. Like the way the header breaks up appropriately.

David

On 27 Jan 2013, at 15:51, “The Big Erns” email@hidden wrote:

I started this project because of voiced interest in making responsive websites with Freeway Pro (it’s on everybody’s FWP6 wishlist). I thought that I’d generate some curiosity when I leaked this the other day, maybe I misjudged?

http://cssway.thebigerns.com/products/context-responsive/


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, David :slight_smile: One trick from my ancient days as a typesetter is the
strategic use of the non-breaking space ( option+space ) to create some of
that appropriateness.


Ernie Simpson

On Sun, Jan 27, 2013 at 12:48 PM, David Owen <
email@hidden> wrote:

Very good! Works a treat on an iPhone. Like the way the header breaks up
appropriately.

David

http://www.ineedwebhosting.co.uk

On 27 Jan 2013, at 15:51, “The Big Erns” email@hidden wrote:

I started this project because of voiced interest in making responsive
websites with Freeway Pro (it’s on everybody’s FWP6 wishlist). I thought
that I’d generate some curiosity when I leaked this the other day, maybe I
misjudged?

http://cssway.thebigerns.com/products/context-responsive/


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


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

Big Erns,

The responsive site looks great. You and others on here should be on softpress payroll for FW the advanced manual. :slight_smile:

On Jan 27, 2013, at 7:51 AM, “The Big Erns” email@hidden wrote:

I started this project because of voiced interest in making responsive websites with Freeway Pro (it’s on everybody’s FWP6 wishlist). I thought that I’d generate some curiosity when I leaked this the other day, maybe I misjudged?

http://cssway.thebigerns.com/products/context-responsive/


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

I never saw this! This is great!! Was it all hand coded? Is there actions? When, how can we download this?

At last!!!


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

Hi Ernie,

cool - as ever.

Probably a very small thing (tipp?).

Instead of “overflow:hidden”, which could cause some minor troubles for boxes that contains stuff like menu-drop-downs, try the clearfix action. This avoids the collapse of the parent div and allows you to add margins or paddings to them (such as the #container), instead of the child items.

http://www.freewaytalk.net/thread/view/114205#m_114219

What I also do is to set a global style called box-sizing border-box:

This helps you fixing the older box-model (unfortunately inspector behaves like that so this would be a nice fix for Freeway6 - a poem?).

It’ll mean in fact:

A box-width of example 75% isn’t reduced by its padding to whatever (example 71%). And it means furthermore, that I ignore the inspector settings and fix the width after externalizing the inline styles. To externalize the inline-styles I use Max’s Advanced Inline Style (Re)mover.

So Justin as you can see, there are actions but there is not “the” action. A responsive design strongly depends on the way how you build the basic grid. Probably softpress’ wizards are rewriting the RPL action, but honestly I doubt (with my current knowledge which isn’t that much). Furthermore it is a “design skill”, so a designer has to decide up to what point what kind of things shall happen.

I am currently on a project where I started (or am in-mid of the work) to be responsive. Not all pages are built (only home, coaching, team). It has even webyep in but am still not sure if it really works as expected:

http://meteon.de/new/index.php

The balance between Freeway and the use of an external editor is probably something like 80%:20% and it could be even more FW if I wouldn’t hate the thought to drop styles into the head area of a page (… and if creating extra styles wouldn’t be that kind of inconvenient (another point that I’d love to see in FW6).

Cheers

Thomas


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

On 27 Jan 2013, 2:51 pm, The Big Erns wrote:

Wow! Nice job Ernie.

I started this project because of voiced interest in making responsive websites with Freeway Pro (it’s on everybody’s FWP6 wishlist). I thought that I’d generate some curiosity when I leaked this the other day, maybe I misjudged?

http://cssway.thebigerns.com/products/context-responsive/


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

Wow! Nice job Ernie.


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

“So Justin as you can see, there are actions but there is not “the” action. A responsive design strongly depends on the way how you build the basic grid. Probably softpress’ wizards are rewriting the RPL action, but honestly I doubt (with my current knowledge which isn’t that much). Furthermore it is a “design skill”, so a designer has to decide up to what point what kind of things shall happen.”

Yer thanks for that. I understand what needs to be done in terms of design (and actually some of the code). I just want actions to create all the break points and behaviours at certain break points, media aware etc. Just as the Rapidweaver add ons do. Have you seen these Thomas? Responsive design is totally possible in a wysiwyg environment. Just takes some clever programming, skills, time etc - I will pay good money for these.

Looking at you FW6.


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

Excellent job Ernie, that is spectacular! Yes, you did get me thinking the other day when you “leaked” it, but I didn’t feel like hijacking the thread. :slight_smile:


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

Thomas, thank you for your reply and advice. I have tried the Clearfix
action (and the method it derives from) with mixed results. This I admit
may have more to do with my limited understanding of how to apply it - same
as with my obvious trial and error approach to the use of “hidden” and
“visible” overflow use. Can you offer advice on how (and when) the Clearfix
action should be applied? To the page? Or to the item?

I would like to make sure all code is internalized into the Freeway Pro
document when finished. My goal is to create styles like Shortcodes in
Wordpress, so that if someone wants to “customize” layout elements, they
can apply a style to it. Clearly I am understanding the most complex part
of a “template” or “theme” like this would be a user manual. At this point
I would say that anyone who has subscribed to your tutorials on inline
construction methods with Freeway Pro would be way ahead of the curve by
the time I release this into the wild.


Ernie Simpson

On Mon, Jan 28, 2013 at 2:44 AM, Thomas Kimmich email@hidden wrote:

Hi Ernie,

cool - as ever.

Probably a very small thing (tipp?).

Instead of “overflow:hidden”, which could cause some minor troubles for
boxes that contains stuff like menu-drop-downs, try the clearfix action.
This avoids the collapse of the parent div and allows you to add margins or
paddings to them (such as the #container), instead of the child items.

http://www.freewaytalk.net/thread/view/114205#m_114219

What I also do is to set a global style called box-sizing border-box:

gist:4653623 · GitHub

This helps you fixing the older box-model (unfortunately inspector behaves
like that so this would be a nice fix for Freeway6 - a poem?).

It’ll mean in fact:

A box-width of example 75% isn’t reduced by its padding to whatever
(example 71%). And it means furthermore, that I ignore the inspector
settings and fix the width after externalizing the inline styles. To
externalize the inline-styles I use Max’s Advanced Inline Style (Re)mover.

So Justin as you can see, there are actions but there is not “the” action.
A responsive design strongly depends on the way how you build the basic
grid. Probably softpress’ wizards are rewriting the RPL action, but
honestly I doubt (with my current knowledge which isn’t that much).
Furthermore it is a “design skill”, so a designer has to decide up to what
point what kind of things shall happen.

I am currently on a project where I started (or am in-mid of the work) to
be responsive. Not all pages are built (only home, coaching, team). It has
even webyep in but am still not sure if it really works as expected:

http://meteon.de/new/index.php

The balance between Freeway and the use of an external editor is probably
something like 80%:20% and it could be even more FW if I wouldn’t hate the
thought to drop styles into the head area of a page (… and if creating
extra styles wouldn’t be that kind of inconvenient (another point that I’d
love to see in FW6).

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 Ernie,

On 28 Jan 2013, 5:26 pm, The Big Erns wrote:

Can you offer advice on how (and when) the Clearfix

action should be applied? To the page? Or to the item?

It is applied to all boxes that contain floating child items within your box-model.

So simply choose those parent box containers and apply the action to them - that’s all.

The background is, that all boxes, that contain floating items collapse to the height of 40px fix or less. This is not Freeway related this is a matter of web-facts. This illustrates it pretty nice:

http://blog.byvernacchia.com/2011/11/using-css-clearfix

One fix in Freeway is overflow:hidden.

But if the box you apply the overflow:hidden contains a css menu with drop-downs, the drop-down may be cut-off while the clearfix ensures the overflow if necessary.

You probably wondered, why a margin-bottom to those boxes doesn’t effect anything? Collapsed - that’s the answer.

Understood the template oriented thoughts of using everywhere. And for sure there isn’t anything wrong with it.

Cheers

Thomas


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

It is applied to all boxes that contain floating child items within your box-model.

Does that mean you have to apply it all parents of floated divs ie if I have div>div>div>div then it should be applied to all but the last one. Or is applying to the first enough.

D


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

Thomas, thank you for your very clear answer!

I was curious as the action applied to the page seems to randomly affect
different elements. Now there is a logic that I can follow evolving.

I will be curious how it will work for floats which are applied by styles,
or to non-box items.

I have seen this method of clearing floats before (I recognize the css) but
thanks to you I am now beginning to understand it. :slight_smile:

Best wishes,


Ernie Simpson

On Mon, Jan 28, 2013 at 2:00 PM, Thomas Kimmich email@hidden wrote:

Hi Ernie,

On 28 Jan 2013, 5:26 pm, The Big Erns wrote:

Can you offer advice on how (and when) the Clearfix

action should be applied? To the page? Or to the item?

It is applied to all boxes that contain floating child items within your
box-model.

So simply choose those parent box containers and apply the action to them

  • that’s all.

The background is, that all boxes, that contain floating items collapse to
the height of 40px fix or less. This is not Freeway related this is a
matter of web-facts. This illustrates it pretty nice:

http://blog.byvernacchia.com/2011/11/using-css-clearfix

One fix in Freeway is overflow:hidden.

But if the box you apply the overflow:hidden contains a css menu with
drop-downs, the drop-down may be cut-off while the clearfix ensures the
overflow if necessary.

You probably wondered, why a margin-bottom to those boxes doesn’t effect
anything? Collapsed - that’s the answer.

Understood the template oriented thoughts of using everywhere. And for
sure there isn’t anything wrong with it.

Cheers

Thomas


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

I am currently on a project where I started (or am in-mid of the work) to be responsive. Not all pages are built (only home, coaching, team). It has even webyep in but am still not sure if it really works as expected:

http://meteon.de/new/index.php

Thomas

Thomas,

This is very cool. The only problem I saw was the menu starts to overlap the Meteon logo when the window is reduced and just before it jumps to the top. Aside from that, it’s way awesome. Good work!


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

@D:

only the parent, not the child items. Clearfix is a pseudo element that is comparable to a wedge, that keeps the door as open as you need to carry the height of a (child-)box through.

@Raven

yeahh - I know. While it shouldn’t affect the initial load on the several devices it is for sure something I have to rack my brain. Probably I try the background-size selector or even re-position it earlier. I should have a look at the iPad but haven’t got one :frowning:

Let’s see how I solve this.

Cheers

Thomas


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

On 28 Jan 2013, 5:26 pm, The Big Erns wrote:

Clearly I am understanding the most complex part

of a “template” or “theme” like this would be a user manual. At this point
I would say that anyone who has subscribed to your tutorials on inline
construction methods with Freeway Pro would be way ahead of the curve by
the time I release this into the wild.

Where can I obtain the inline tutorials? I need to brush up a bit. :slight_smile:


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

Hi Raven,

have a look at this (as a starting point):

http://freewaycast.com/screencasts/view/104-boxmodel-contest

Agree all is a little mess currently, but promised:

I currently work on a cleaner and much straighter version.

Cheers

Thomas


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

Thomas has a series of screencasts available at his website

Perhaps there are others I am unaware of?


Ernie Simpson

On Tue, Jan 29, 2013 at 8:43 AM, RavenManiac email@hidden wrote:

Where can I obtain the inline tutorials? I need to brush up a bit. :slight_smile:


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

On 29 Jan 2013, 1:03 pm, The Big Erns wrote:

Thomas has a series of screencasts available at his website
http://www.kimmich-dm.de/

Perhaps there are others I am unaware of?

Ernie Simpson

I just subscribed. Looking forward to becoming better at inline or box model website construction. :slight_smile:


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