One of the big reasons I’ve not moved to Responsive Design is that I still cannot wrap my head around even the most basic INFLOW and CSS POSITIONED designs.
Consider my super simple, single page document (saved in Freeway 7 Pro):
There are 2 boxes on the page. The topmost box is CSS positioned (inflow). The bottom box is positioned using a table. PREVIEW. The bottom one looks the way I want it, the top one looks stupid (the text drops below the graphic rather than being positioned at right).
Yes, both objects were created in Freeway’s “CSS Layout” mode (the round CSS button is glowing BLUE). But technically speaking, I was able to solve my positioning aim by using a TABLE, not pure CSS Positioning, where CSS Positioning = INFLOW positioning.
Simply put, I often have a situation where I want a pass-through graphic and text placed immediately to the right of it. Often, the graphic is taller than the text, so I want the text to be VERTICALLY CENTERED relative to the graphic. And most often, I also want the graphic and the text to be vertically centered inside a colored box. As you see in my example document, a Table allows me to accomplish all that quickly and intuitively. It’s super-duper easy. I can do it without reading any guide or manual. But I don’t see how to accomplish the same with an INFLOW design. And then embarking on the INFLOW route, you then have to decide whether to FLOAT a box Left or Right, and all manner of decisions pop out their ugly heads. But again, a table solves this type of problem so easily.
Wow! I am impressive with THAT kind of response! Thank you. Your web page response is detailed AND beautiful too!
But please note these two points:
Your web page response implies that the page must be HTML 5, rather than HTML 4.01. Is that correct? (Not a problem. Just asking.)
You must admit that your method is far more complex and time-consuming than using a simple table. To use a table (download my FW doc to see it), I just sketch it out as 1 row with 2 columns, put my pass-through graphic in the left column and the text link in the right column. I then select the cells and make them vertically center, and then I color the table. That’s pretty much it. No HTML5 required. No requirement to splatter code here and there. A table may not be the “responsive” or “modern” way to center, but it works well and is drop-dead easy for any Freeway user to understand without any detailed study.
So what would really impress the heck out of me is if I could use Freeway intuitively to position something in Page View alone using a table (no code), and then click a button (or apply an Action) that would “do what Ernie did.”
Your web page response implies that the page must be HTML 5, rather than HTML 4.01. Is that correct? (Not a problem. Just asking.)
My web page is html5 because that is what is now “normal”. HTML5 is not a requirement, only browser support of the display:table: and display:table-cell; CSS properties. There are tons of resources on the intertubes for that.
##Point the Second…
You must admit that your method is far more complex and time-consuming than using a simple table…
No, I must not admit this because it is plainly not true. Why is drawing a table simpler than using a menu command (insert HTML item)?
You’ve already admitted that inflow layout methods are hard… for you. This does not necessarily mean they are universally impossible. In fact, I think that they are much easier than most people imagine. Unless, of course, they are exceptionally stubborn students.
While I don’t claim to speak for the “inflow community” (there is a healthy bit of different ideas and practices out there) you had asked how the inflow crowd would achieve your vertically-centered image side label, and this was just my answer.
Note: I’ve updated my page with an image of the Freeway workspace and added a link to the Freeway 7 working file.
Point the Last
Inflow layouts in Freeway offer many flexible benefits which are aligned with Responsive Design. Using whatever-layout methods-- because they are what you know or what you are comfortable with-- is neither logical or practical.
Whether inflow layouts are better for you is the real question you must answer for yourself.
Ernie, thank you for your comments. And thank you again for the beautiful web page response to my opening post.
HOWEVER, your focus is very intensely on RESPONSIVE DESIGN and INFLOW LAYOUTS. I never said MY PROBLEM is UNIVERSAL. Never. Consider well that in my opening post, I humbly ask HOW YOU PROS DO IT. I wasn’t taking a shotgun to Freeway or Inflow Design. I posted a problem and asked a question.
More specifically, I have been merely pointing out that it is indeed EASIER and FASTER and MORE INTUITIVE to “POSITION a graphic and text to be vertically centered with respect to each other by using a Table” versus your method. Now if you can prove me wrong, I will be the first person to praise you for it.
Try it yourself…
With Freeway 7 already launched a waiting, start your timer. I myself can open a new HTML 4 doc, sketch a table with 1 row and 2 columns, insert an HTML box and import a pass-thru pic in the leftmost cell, type text in the rightmost cell, make both cells vertically center via the Inspect, then color the table, all in less than 40 seconds — and that’s not going at my top speed either. Now accomplish the same thing using your method and be sure to time yourself.
Therein lies my point.
If you truly can accomplish your method faster, I would love to see a screencast of it! I am skeptical, but I would be overjoyed to be proven wrong. I actually hope I am utterly wrong and that you will prove it with a screencast!
If you ask the “pros” how they solve a specific problem, I’m not sure why “pros” should fallback in a construction method, which is neither progressive nor reasonable.
You got the answer - so do it or leave it. Mine would have been “flexbox” (just for protocol)!
If you do it your way and you feel comfortable with it - excellent. Inflow is not a question of “like or not” - it’s the basic requirement of doing modern adaptive web design.
“Pros” might be born with the triple CSS genom in the fifth HTML helix - a defect they have to live with. Stalling time (3 Minutes) within construction is not part of their ability, cause losing the won time during maintenance is their pain.
ERNIE, thank you for updating that web page to include the FW7 document. I have been reviewing it and I see that you are using Walter Davis’ “Anonymous” Action on a large number of HTML boxes:
THOMAS, in your GridMeister webcasts on Responsive Design, you talk about how you like to avoid the use of Actions because, in your opinion, when a new version of FW comes out that breaks an Action, you can’t wait around until a new version gets fixed, nor can you fix the Action yourself since you aren’t an Action writer. So what do you do instead of using the Anonymous Action?
If you don’t know what I mean, please download Ernie’s FW7 document here and take a look inside:
in the screencasts I mainly referred to the following two actions:
ClearFix and BoxSizing. But I could prolong the list by Carousel (not responsive) and even RPL.
The strategy for to substitute actions?
Understanding what they do for us and see how to implement them by hand. ClearFix and BoxSizing are just CSS properties - so here we just need to understand them and hack those in and apply them where they’re necessary.
Carousel introduces JS library - so it’s a bit more tricky to “substitute” them.
Actions like those, I use excessively - cause they are essential if it comes to DOM manipulating. I love it cause they enable us to “separate” Framework from appearance. I do the ID2Class but this doesn’t matter cause they work into the same direction. And honestly - they’re not to substitute (not for ME to be a bit more specific).
Avoiding the use of actions may not be about liking them or not, but instead be about what results are desired and the limitations of what can be achieved within Freeway.
When it comes to generating a certain code output from Freeway, I don’t use actions like Box-Sizing or Clearfix-- as I can achieve the desired code output without them. I think that some actions are like training wheels-- the more knowledgeable I become, the fewer actions I actually use. I find that I like that independence.
So when I use an action like Anonymous, it is to achieve a result that I can in no other way accomplish within Freeway alone. If you are trying to understand how inflow layouts “work” then I’m afraid my use of the Anonymous action has no bearing on that. It is simply my effort at producing what I consider professional grade web code. If Softpress could address the issue of id-styles vs. class-styles for container objects natively within Freeway, I would not need to use Walter’s action to improve Freeway’s functionality.
For Thomas, I think he also wants to achieve a result within the Freeway workspace… at least with regard to Box-Sizing, which alters how the workspace responds to the action settings.
For Thomas, I think he also wants to achieve a result within the Freeway workspace… at least with regard to Box-Sizing, which alters how the workspace responds to the action settings.
Hm - he’ll find the answer in “TheGrid” and the way I construct it. My philosophy tries to embrace all critical aspects:
Workspace (default)
Browser
The Responsive Machinery within workspace (Media Types)
In other words, neither padding nor border on DIVs having a width attribute applied, at least as long as the workspace is box-sizing: content-box.
Thank you. Your web page response is detailed AND beautiful too!