Skip to main content
Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
November 2, 2017
質問

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

  • November 2, 2017
  • 返信数 3.
  • 1205 ビュー

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.

      このトピックへの返信は締め切られました。

      返信数 3

      pziecina
      pziecina
      Legend
      November 2, 2017

      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
      B i r n o u
      Legend
      November 3, 2017

      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
      pziecina
      Legend
      November 3, 2017

      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.

      pziecina
      pziecina
      Legend
      November 2, 2017

      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
      Community Expert
      Jon FritzCommunity Expert作成者
      Community Expert
      November 2, 2017

      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
      pziecina
      Legend
      November 2, 2017

      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.

      BenPleysier
      Community Expert
      BenPleysierCommunity Expert
      Community Expert
      November 2, 2017

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

      Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      Jon Fritz
      Community Expert
      Jon FritzCommunity Expert作成者
      Community Expert
      November 2, 2017

      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
      Community Expert
      BenPleysierCommunity Expert
      Community Expert
      November 2, 2017

      Oopps!

      Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      契約条件Accessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices