OT: Visual tool to help wrap your head around CSS Grid

[Jon Fritz]

If you haven't played around with CSS Grids yet, grab a copy of Firefox Developer's Edition and check out the CSS Grid tutorial: CSS Grid PlayGround | Terminology | Mozilla

The visual grid tools in FFDE make understanding Grids much, much easier.

DW Dev Team, please take the hint.

[BenPleysier]

No need for Firefox Developer's Edition as you can see here https://caniuse.com/css-grid/embed

[Jon Fritz]

Sorry Ben, my point isn't whether you need Firefox Developer Edition to use CSS Grids, anyone using, or attempting to learn how to use Grids, is aware that you don't.

I posted this thread to specifically point out the fact that FFDE now has Visual CSS Grid Development Tools built into it along with a nice little tutorial that helps understand their use.

[BenPleysier]

Oopps!

[pziecina]

Thank you for posting this Jon. I did try the grid developer tool a few months back whilst it was in development, but I have not used it in a while.

It would be nice if Dw incorporated something similar for grids, as even Microsoft does include a similar feature in a program called Blend, which also includes a visual flexbox tool and a tool to create css animations. I also belive that Chrome is also, (or maybe has by now) developing a similar feature for its dev tools.

Tha fact that they all think grids requires a visual feature, only reinforces my opinion that if Dw is to take grids and flexbox seriously, a visual layout tool and helper features are required.

[Jon Fritz]

Until I played around with FFDE's tools with the grid overlay, row/column line numbering and area names, making modifications in real time, CSS Grids were abstract, frustrating and rather silly to me.

My typical viewers still aren't ready for them, but I can see the way forward a whole lot clearer now.

[pziecina]

I cannot see grids becoming a major consideration for layouts untill the end of next year at the earliest, and even then fallback will be essential.

The good thing about that though, is that it gives not just the Dw team, but everyone else plenty of time to learn how to use it, and just as important for Dw, time to decide if or what help Dw should provide beyond code hints.

[pziecina]

Just for info, having nothing to do for the rest of this week, I purchase the ebook "The new css layouts" by Rachel Andrew, (i think that is how you spell her name), and whilst not a coding book it is worth reading, (also not that expensive).

In the book she actually describes flexbox as -

“CSS layout really started to change with the introduction of flexbox, the Flexible Box Module, with features designed for a responsive, flexible web.”

Excerpt From: Andrew, Rachel. “The New CSS Layout.” A Book Apart. iBooks.

This material may be protected by copyright.

She then goes on in the css grids section to describe grids as for "grid layouts", (no quote, buy the book).

I hope that will help clear up the misconceptions surrounding the use of flexbox vs grids, in that they both have there place, and it is for the developer to decide which is the most appropriate to use.

[B i r n o u]

I do'nt know if I can post this here, so please, if I can't remove this message (@preran)... a year and half ago I published a training on flexbox and grid... but it is in french

anyway, if that interest some people around here, I could find a way and post some material that way (in english) and for free... just let me know

[pziecina]

Providing something is relevant to a discussion, helps users and is not insulting to anyone, as far as i am concerned people can post anything they wish.

As for your proposal to translate your articles to english, if others are interested then yes, that would help tremendously. If you would like the translation to be proof-read then if you PM me the link i will do so, if you wish.

The problem i always found with trying to explain both flexbox and grid layouts, was making the layout relevant. By that i meen that dummy text and images have to be used in order to demonstrate how such layouts 'flow'. If others are interested maybe prerankurnool​ could help with supplying images, (Adobe stock).

I would however like to get as many users who are interested involved in using flexbox and grids, as the more feedback there is, the easier it will be to discuss and suggest any features that people would like to be included, in order to make using these layout methods easier.

[Preran]

Paula: I would be glad to help in any which way possible, but I am not sure as to what is required of me. Are you looking for any specific images from Adobe Stock? Like all of you, I have a limit of 2 images that I can download for free along with my subscription. But I can ask around for help from my colleagues to get you more.

[pziecina]

prerankurnool​

Hi Preran,

I don't want to get too far ahead with the possibility of Birnous tutorial, as we have been to this point before, and could not get any consensus on the best place to 'show' them, (please also remember my post in the acp forum regarding tutorials).

I also still have my 2 images from the subscription, if it is eventually decided to proceed.

As i pointed out, the big problem i always find is making the layout relevant to users requirements so that they can use the code as a starting point for creating other layouts. If Birnous tutorial is not based on a layout then converting his tutorial to english would still be helpfull, as the last thing users want is someone refering to the w3c specs, (not the easiest to read, and then apply) then expecting them to follow what is written in the specs, (one other reason i can recommend Rachel Andrews book).

The simple fact that I do not think css grid layouts in Dw requires more than just code hints/completion, (though live view support would have been welcome) at the moment, as i don't think it will be a 'player' in layouts for another year, makes the next year or so the ideal time for such tutorials to be made, as feedback from everyone would help highlight problems anyone finds in creating css grid layouts. Which was unfortunatly something i feel the use of flexbox lacked, and caused much more confussion, and miss-information to become accepted as fact by those who did not fully understand its use.

ATTN EVERYONE ELSE: If anyone would like to suggest layouts or point out problems they have with understanding css grid layouts, that could be addressed in a tutorial or demo, please post?

Paula.

BTW: What is the reason for your name 'change' in your post heading Preran?

[Preran]

Hi Paula,

I have no idea as to why that is happening. I have not made any changes to my profile in the previous months. Kurnool is my second name, and I am not sure if any change in Jive is making that happen. I'd prefer to be just mentioned by my first name.

About the photos, do send me a private message with requirements when you are ready, and I will do my best to help.

Thanks,

Preran

[B i r n o u]

for what I think , if the training/tutorial try to use and demonstrate the workflow integrating an Adobe Stock usability, I agree that one can ask Adobe some pictures to illustrate the content...

but for demonstrating the use of flexbox and css grid.. one can go with pixabay, pexels or others free images libraries... don't you think ?

[B i r n o u]

hello Paula, well, I asked it because the first publication are online training/tutorial, and they are not free... what I propose is to write a new approach to both technics, and a kind of cookbook...

[pziecina]

We are thinking in different directions Birnou.

My idea would have been to 'publish' tutorials as in this post, (refered to in my answer to Preran) -

https://forums.adobe.com/thread/2395131

Such a proposal does take time to implement, even if possible, and would be more of a reference for all users of the Adobe forums as well as this one.

The problem with paid tutorials is that one must have access to them if any questions are posted about them in this or any other forum. Making tutorials free and easily accessible directly from this forums discussion section, would I hope help to promote Dw and this forum, as something more than they are currently thought to be by many, which is as a none serious development tool, and a place to just ask about Dw program problems.