RE: Flexbox / grid techniques

If you like me to help out setup the CSS / HTML for a style guide I’ll be willing to.
White label / modular / flexible and scalable CSS frameworks has been my specialty / core business for 10 years…

Cheers!
Jake

From: Michael Cooper [mailto:cooper@w3.org]
Sent: woensdag 23 mei 2018 0:14
To: Abma, J.D. (Jake) <Jake.Abma@ing.com>; 'Alastair Campbell' <acampbell@nomensa.com>; public-mobile-a11y-tf@w3.org
Cc: Jim Allan <jimallan@tsbvi.edu>; 'Andrew Kirkpatrick' <akirkpat@adobe.com>; 'Joshue O Connor - InterAccess' <josh@interaccess.ie>; WCAG <w3c-wai-gl@w3.org>
Subject: 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<mailto: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><mailto:Jake.Abma@ing.com>; public-mobile-a11y-tf@w3.org<mailto:public-mobile-a11y-tf@w3.org>
Cc: Jim Allan <jimallan@tsbvi.edu><mailto: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.

-----------------------------------------------------------------


-----------------------------------------------------------------
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.
-----------------------------------------------------------------