Talking tactics: FW7 box construction and breakpoints

I am having a great time developing my first in-line construction, breakpoint augmented responsive site by trial and error and am excited that it’s working. Woot! However, I am now at the build out starting point where any stupidities I build into templates and layouts will be more and more difficult to change. Also, I got going on this before the FW7 compatible box-sizing action was available, and want to retrofit the templates and pages created to date with it before I get going. So here are some tactic questions. Referring me to a tutorial or something to read about such tactics would be a great and quick way to respond.

1 USING PADDING VS USING MARGINS WHEN THE BOX-SIZING ACTION IS EMPLOYED
If HTML items don’t have backgrounds or outlines so that their edges aren’t visible, padding and margins achieve the same goals. I read that the box-sizing action does its magic on padding but not on margins. Should I use padding everywhere possible, using margins only when padding won’t work, and being sure to specify margins in %?

2 WORKING WITH BOXES WITH BOX-SIZING ACTION APPLIED
I began applying the box-sizing action to floated HTML boxes with padding in rows of three items in previously created master pages. I expected the % widths of boxes displayed in the inspector to change, so that, for example, each same-% width box in a row of 3 would go from circa 30.765% to 33.3%. However, no change showed up in the Inspector. Do I understand correctly that the nice clean percentages the box-sizing action creates do not show up in the Inspector? And should I conclude from this that the value of the box-sizing action is to let you specify widths in px so you don’t need to mess with %?

3 WORKING WITH FLEXIBLE HEIGHT HTML BOXES IN ROWS
Say I have a set of 2 rows of 3 flexible height boxes, each containing a flexible size image above and a flexible height caption below. I want them to behave correctly when narrowing/widening a window within a breakpoint, and to convert to 3 rows of 2 boxes at an interim breakpoint. I have discovered that if the six flexible height boxes are laid out in two rows in a single parent box the bottom row items bounce around when narrowing/widening a window, responding to the uneven heights of the top row boxes. I have found two ways to address this. (A) Using a parent box for each row, and at the breakpoint shifting from 2 parent rows of 3 circa 33% with boxes to 3 parent rows of 2 circa 50% wide boxes, or putting a 100% width spacer bar between each row, and doing a similar rearrangement at the breakpoint all within one parent box. Is one better than the other? Is there a better way?

4 PAGE SETTINGS AT BREAKPOINTS
SP in its FW7 tutorial stressed resetting page widths at breakpoints. I’m not seeing much value in doing this, as simply reducing the number of columns, combined with changing type sizes create layouts that work at narrow screen sizes. What is the advantage of specifying new page widths at breakpoints? Also, are there best practices concerning whether to set max, or min/max page widths at breakpoints?


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

I spoke too soon on some of this as I experiment further.

On #3 I see that the two strategies mentioned work when narrowing/widening windows within breakpoints, but readjusting from 2 rows of 3 to 3 rows of 2 at the breakpoint isn’t working. Is there a way to do this? Or is one stuck with a row of 2 followed by a row of 1 followed by a row of 2 following a row of 1?

And further experimentation on page sizing at breakpoints has given me a better handle #4: resetting page sizes at breakpoints.

My apologies for writing too early before playing some more.


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

Hi Peter,

Point1 + 2

It’s all about how BROWSER behaves. The current standard behavior of a browser is box-sizing:box. This will mean that the width of an item is based on its content, not on its dimension.

Item 500px, applied padding left and right of each 20px is ending up in an item-width of 460px, right?

EXACTLY the same is Freeway’s workspace (or inspector’s setting).

The action is doing two things:

Telling the browser, it shall calculate from border to border (500px) and not minus padding. And it furthermore re-adjusts the “wrong” setting of 460px coming from inspector like magic.

So far so good - it doesn’t change anything in workspace.

I’m not aware if and when Softpress is targeting this, but currently I’m the only one on this board which is praying and preaching ever and ever again:

Responsive is preserved for inline-constructions and inline-construction requires a “rock-solid real” width.

I have to admit that this attitude is very egoistic cause I’m not aware of any consequences for traditional drop and drag projects.

Maybe another fighter for the box-sizing : border-box for all idea?

Cheers

Thomas


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

Maybe another fighter for the box-sizing : border-box for all idea?

I of course apply this as a style with the Style Editor to everything ( *,
*:before, *:after ) and then either correct FWP widths either by Extension,
or anonymize the items and apply widths with styles. So, I don’t know if I
am helping or hurting your cause.

In my mind, the real “missing manual” for Freeway Pro has always been the
workarounds required for using it knowledgeably.


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

In my mind, the real “missing manual” for Freeway Pro has always been the workarounds required for using it knowledgeably.

I’d be a customer! Worth the cost of FW7. Perhaps something like this could be constructed incrementally by the community: the Missing FWP wiki.


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

Probably…,

… however Ernie’s workflow (which is very similar to mine) requires a minimum amount of comparing workspace (input) and browser (output - result - the truth). This could be, by extension, called something like Code-Hassle.

The following I’ve never said:

If I’d been asked, I’d recommend keeping up the V6 as the FreewayBasics (and substitute Express with it) advertising it with "Build great projects, no code knowledge required) and develop V7 as FreewayExtended (stripping it down 'lil massively) and add features like CodeEditor (such as CSSEdit) to all “extended” areas and advertise as "Construct code key visual rather than writing it and extend it like a Pro if required).

And then the Wiki is starting to make sense - IMO.

Luckily I’m not asked at all (and never will be).

Cheers

Thomas


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

There is so much good but hard-to-find information that already exists scattered around: buried in or linked to not helpfully named Freeway Talk posts, in blogs like Caleb’s and probably others I am not aware of.

And there is frankly so much good but not usable information given by advanced users who forget what it was like to be less advanced.

We need an ExtensionsForge, a single place:
-Focused on extending FW functionality
-Structured around extension how-to topics rather than around user questions

  • Provided for user comments/questions/ratings to foster pro content creation usable by the less advanced, (as well as votes as to who’s answer to a question actually answered it?)
  • That had a reasonable annual subscription price, with revenues distributed to those who provide content and answers based on a usage/rating algorithm…
    – That would allow those who have already created a lot of this to quickly enter it

It would help the FW platform grow by making it more sticky for advanced users and more easy to advance for the rest of us. Analytics from it would also help SP and Action authors prioritize what extensions they should turn into FW features and actions.


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

There is so much good but hard-to-find information that already exists scattered around: buried in or linked to not helpfully named Freeway Talk posts, in blogs like Caleb’s and probably others I am not aware of.

Interesting that you mentioned it. I’ve been kicking around a community-based idea for a long time that aims to address exactly what you’re referring to, at least to some degree. It’s not specific to Freeway but FW could certainly be one aspect of a much larger picture. Not sure it’s worth pursuing yet but it’s good to know other’s share my frustration.

And there is frankly so much good but not usable information given by advanced users who forget what it was like to be less advanced.

I (very) often run into this scenario when learning the technical ins-and-outs of a new CMS so I appreciate and understand your position. The ability to write useful and easy-to-understand documentation from a beginners perspective is somewhat rare. And yes, it can be exceedingly frustrating when it isn’t. I’m with you on that point.

However, the flip-side of that is I bet at least some of the information you’re referring to deal with slightly more advanced techniques or methodologies which by necessity presume a minimal understanding of certain fundamentals going in, that’s why it’s advanced. It’s not that the info isn’t necessarily usable, but perhaps you’re jumping too far ahead without having a firm grasp of the basics. If that groundwork is missing then of course it’s going to be more difficult.

That, and of course as you mentioned above, the fact that it’s difficult to find the info you want/need in the first place.

Todd


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

And there is frankly so much good but not usable information given by
advanced users who forget what it was like to be less advanced.

I think that language is a large part of the disconnect - so I think some
kind of glossary needs to come along to help everyone decipher what’s being
said.


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

If that groundwork is missing then of course it’s going to be more difficult.

Point well taken. An added issue here is that the person missing the groundwork doesn’t know what is and what isn’t groundwork for a particular functionality, so doesn’t know how big a time and effort commitment it is to get grounded, nor usually where to go to get grounded.

I wonder if from the advanced user perspective, there are clear groundwork areas, thresholds and sources. (e.g. To understand how to use x you will need a beginner/intermediate/advance grounding in javascript/php/etc., here’s a good source for it, and going from knowing nothing to knowing enough will take hours/weeks/months/years/decades/centuries/forgetaboutit.)


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

That’s an interesting point Peter, and one of things I have considered when thinking about my previously mentioned community idea. I have from time to time run across similar info in tutorials etc. and often find it useful in gauging where I’m at or need to be, but it is fairly rare in my experience.

Todd

Point well taken. An added issue here is that the person missing the groundwork doesn’t know what is and what isn’t groundwork for a particular functionality, so doesn’t know how big a time and effort commitment it is to get grounded, nor usually where to go to get grounded.

I wonder if from the advanced user perspective, there are clear groundwork areas, thresholds and sources. (e.g. To understand how to use x you will need a beginner/intermediate/advance grounding in javascript/php/etc., here’s a good source for it, and going from knowing nothing to knowing enough will take hours/weeks/months/years/decades/centuries/forgetaboutit.)


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

but readjusting from 2 rows of 3 to 3 rows of 2 at the breakpoint isn’t working. Is there a way to do this? Or is one stuck with a row of 2 followed by a row of 1 followed by a row of 2 following a row of 1?

I figured it out! I added 100% width shallow HTML spacer bars A, B and C respectively between box 2 and 3, 3 and 4, and 4 and 5. For 2 rows of 3 I unchecked “display” on bars A and C. For 3 rows of 2 I checked “display” for bars A and C, and unchecked it for B. And of course adjusted %width of boxes from around 33% for 3 to a row to around 50% for two to a row.

Also note I used Caleb’s suggested extended CSS to generate flexible images without being forced to use passthrough images. And to get this to work the HTML boxes that contain the two to a row images at the breakpoint need to be as wide as the original three to a row boxes were at the default or else the images will not display at widths narrower than the breakpoint. If you resize them to display at the breakpoint then they will also be resized at the default. (I suspect the same would be true for pass through images but I did not check this)


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

I started building a Freeway-ese to CSS-ese thesaurus many years ago, at Softpress’s behest. I have lost the database and source code to it, not even sure which server it was hosted on. This is one of my major peeves about Freeway’s insistence on DTP terms in preference to CSS terms, because it makes such a thing necessary at all. Ideally, Freeway would be labeled in industry-standard language, but not require you to know all that when you’re starting out, and mouse-happy. Then as you come up the learning curve, you will be (sneakily) learning the correct terms for things, so Google is Your Friend.

Walter

On Oct 17, 2014, at 12:27 PM, Ernie Simpson email@hidden wrote:

And there is frankly so much good but not usable information given by
advanced users who forget what it was like to be less advanced.

I think that language is a large part of the disconnect - so I think some
kind of glossary needs to come along to help everyone decipher what’s being
said.


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

Certainly makes sense to think of FWP a as not just a coding substitute and a work flow platform for projects where it makes sense that relatively static pages are served up whole rather than assembled from pieces by algorithm, but also a web design learning platform.

Perhaps now SP would be more open to using CSS lingo as DTP (am assuming desktop publishing, not having a glossary so depending on acronym finder :wink: is no longer the dominant paradigm. But perhaps SP worries they will lose users if they help them get code knowledgeable?

And another thought about a different role FW7 could serve, especially if there were an online commenting function (a future Inlay feature?), would be in prototyping responsive sites that will require being built outside of Freeway.


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

THANKS FOR THIS POST, PETER…Coming from 3 years with FW5/6 Exp to 7.1 Pro flexible response is a difficult curve. FW tutorials are NOT built from user perspective. They skip over aspects inherently long a habit of a teacher. It’s like my college math class where only 20% 'got it".Next semester Prof began with a ham sandwich and we ‘got it’ & learned. Working with FWPro for a month, downloaded templates & manuals and other references; torn them apart and viewed video’s many times, studied all references, from 11 to 110 to 240 page… and still discovering there are missing crucial steps. At this point I don’t even know what questions to ask. can still be unreadable. So THANKS to those here in this thread. it WILL help as a study the printout.


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