Re: Flexbox / grid techniques

On 22/05/2018 7:58 AM, Abma, J.D. (Jake) wrote:
>
> Hi All,
>
> Hereby the Flexbox and Grid techniques.
>
> Have four questions though:
>
>  1. Why is grid written in Github as: "media-queries-grid-reflow" and
>     flexbox as "flexbox-reflow". I used MQ's for both so name should
>     be same for both if you ask me.
>
I came up with shortened file names using a best guess from the titles 
at what would be descriptive and unique, but without any real knowledge 
of that the intended technique actually was. You're welcome to use a 
different name if you like. I suggest you create a branch with the name 
you want, off the branch having the name you don't want, then rename the 
file with "git mv". If you'd like me to take care of it, just send the 
new name and the name of the branch you want replaced.
>
> 1.
>
>
>  2. Code examples are more elaborated than older examples, what should
>     be in technique page? All HTML / CSS / Text or only part that matter?
>
This is a question for the style guide we hope to eventually produce. 
Basically we made a decision to shorten code examples to focus on just 
the parts most relevant to the technique, not the full code the might be 
needed for it to run. This is so people don't get lost in the weeds 
trying to understand the examples. Working examples, by contrast, would 
have the full working code.
>
> 1.
>
>
>  2. Example text in Working examples is not really what we want, but
>     what fake text to use?  Lorum is also not what we really want.
>
That could be a style guide question to pose; I don't really have an 
opinion.
>
> 1.
>
>
>  2. Working examples: where will they be placed? What default styling
>     is needed? Where / how will we setup this environment (or is it
>     already somewhere) and how to cope with consistency? A nice white
>     label version / resource would be nice to have. In my working
>     examples I have some CSS which is not part of the technique but
>     core page styling...
>
It's on my todo list to help sort out the working examples better. My 
current thinking, though not fully vetted, is that the working examples 
will be stored in wcag21/working-examples/, with each working example 
(and its dependent files) in a subdirectory named in some understableish 
way like the technique files. There could also be top-level folders for 
styles, scripts, and images to contain resources that might be useful to 
share among multiple working examples. I'll try to get a better proposal 
this week.

Michael
>
> 1.
>
> W3C Github:
>
>   * Flex:
>     https://github.com/w3c/wcag21/blob/tech-flexbox-reflow/techniques/css/flexbox-reflow.html
>   * Grid:
>     https://github.com/w3c/wcag21/blob/tech-media-queries-grid-reflow/techniques/css/media-queries-grid-reflow.html
>
> Examples in Codepen:
>
> CSS / Working example
>
>   * Flex: https://codepen.io/Jake-Abma/pen/ZxxyRX
>   * Grid: https://codepen.io/Jake-Abma/pen/JvBwbq
>
> DOCS
>
>   * Grid: https://codepen.io/Jake-Abma/pen/ZoMYZP
>   * Grid: https://s.codepen.io/Jake-Abma/debug/ZoMYZP
>   * Flex: https://codepen.io/Jake-Abma/pen/zjLeNv
>   * Flex: https://s.codepen.io/Jake-Abma/debug/zjLeNv
>
> Regards,
>
> Jake Abma
>
> Accessibility Lead ING
>
> Product owner at Team A11Y
>
> http://www.a11yportal.com <http://www.a11yportal.com/>
>
> ING Nederland / CIO / Omnichannel / Experience
>
> ACT C.02.406, Bijlmerdreef 24
>
> Postbus 1800, 1000 BV Amsterdam
>
> 0031 (0)6 - 25 27 52 46
>
> _jake.abma@ing.com___
>
> *From:*Alastair Campbell [mailto:acampbell@nomensa.com]
> *Sent:* vrijdag 16 maart 2018 12:44
> *To:* Abma, J.D. (Jake) <Jake.Abma@ing.com>; public-mobile-a11y-tf@w3.org
> *Cc:* Jim Allan <jimallan@tsbvi.edu>
> *Subject:* Re: Flexbox / grid techniques
>
> Fantastic ☺
>
> We are basically looking for a modern equivalent of this:
>
> https://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160105/G146
>
> In order of time needed, getting as far as you can with:
>
>  1. Creating a simple HTML / CSS source code example as a demo (which
>     needs to be accessible, but minimal).
>  2. Creating a wiki page for the other content like this:
>     https://www.w3.org/WAI/GL/wiki/Allowing_for_Reflow
>  3. Creating the actual technique in github:
>     https://github.com/w3c/wcag21#editing-techniques
>
> If you’re comfortable, you could skip straight to 3 and do it all in 
> github, but it’s step one we’re struggling with.
>
> Thank you,
>
> -Alastair
>
> *From: *"Abma, J.D. (Jake)" <
>
> ​
>
> I'm here to help!
>
> ------------------------------------------------------------------------
>
> *From:*Alastair Campbell <acampbell@nomensa.com 
> <mailto:acampbell@nomensa.com>>
> *Sent:* Friday, March 16, 2018 10:55 AM
> *To:* public-mobile-a11y-tf@w3.org <mailto:public-mobile-a11y-tf@w3.org>
> *Cc:* Jim Allan
> *Subject:* Flexbox / grid techniques
>
> Hi everyone,
>
> Sorry to gate-crash MAFT, but I was wondering if there was a 
> cross-over on techniques for mobile and low-vision, or people 
> available to create them?
>
> For Reflow [1] we could do with a CSS based technique for a grid 
> layout (or other type) that reflows down to 320px, would anyone on the 
> mobile task force be able to help?
>
> My knowledge is a bit rusty (and time non-existent), if anyone can 
> pull out a basic layout from recent work it would really help get that 
> going.
>
> Kind regards,
>
> -Alastair
>
> 1] https://www.w3.org/WAI/WCAG21/Understanding/reflow.html
>
> -- 
>
> www.nomensa.com <http://www.nomensa.com/>
> tel: +44 (0)117 929 7333 / 07970 879 653
> follow us: @we_are_nomensa or me: @alastc
> Nomensa Ltd. King William House, 13 Queen Square, Bristol BS1 4NT
>
> Company number: 4214477 | UK VAT registration: GB 771727411
>
> -----------------------------------------------------------------
> ATTENTION:
> The information in this e-mail is confidential and only meant for the 
> intended recipient. If you are not the intended recipient, don't use 
> or disclose it in any way. Please let the sender know and delete the 
> message immediately.
> -----------------------------------------------------------------
> -----------------------------------------------------------------
> ATTENTION:
> The information in this e-mail is confidential and only meant for the intended recipient. If you are not the intended recipient, don't use or disclose it in any way. Please let the sender know and delete the message immediately.
> -----------------------------------------------------------------