[CSS Grids] Writing user guides to complete our reference material

Hi all!

CSS Grids are coming (in March 2017). Thanks to Sebastian Zartner, we 
have a pretty up-to-date set of reference articles, but we still miss 
introductory material so that Web devs can learn about grid techniques.

I've spent some time with the specs, our documentation, but also reading 
numerous articles and introductory material on the Web, as well as 
watching some conferences online and I have a first draft of what I 
believe is needed so that Web devs can go from the 'I don't know what 
CSS Grids are' to 'I know what they are, how they work, now I can start 
using it', the 2nd step on the proficiency scales.

Take some time to have a look at them; I'm especially interested about 
comments around the structure and the completeness. Don't spent too much 
time on the wording of the articles (they can be changed later).

Thank you all for your help!

Jean-Yves

vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv

CSS Grids user guides (first draft)

CSS Grids
     Overview page, links to all CSS grids resources we have.

Basic concepts of a CSS Grid
     Describes the basic notions around CSS Grids: what are a grid, 
containers, items, lines, tracks, cells, areas, rows, columns, gutters, 
nested grids, (sub grids, in the future)
Using grid templates to describe a CSS Grid
     Uses grip-templates(-columns, -rows) to describe different CSS grid 
and succinctly explains how to position grid items into it (link to more 
in-depth articles)
Interaction between CSS Grids and the writing mode
     Explain the numeration of grid lines, and -start & -end names, and 
their meaning w/ different writing-modes.
Laying out using anonymous line-based placement in a CSS Grid.
     In-depth explanation of how to place CSS items using numbered grid 
lines
Laying out using named grid lines
     In-depth explanation of how to place CSS items using named grid lines
Laying out using named area (and implicitly named grid lines)
     In-depth explanation of how to place CSS items using areas (ascii’s 
description in grid-template-areas) and -start/-end implicitly named 
gird lines
Mastering box alignment within a CSS Grid
     How to use box alignment properties to align an item inside its 
grid cell.
CSS Grids and accessibility
     How grids helps accessibility (by decoupling semantic ordering and 
layout ordering), what are the risks (tab ordering, HTML flattening) and 
how to mitigate them
CSS Grids and progressive enhancement
     How to introduce css grids today, and how to use it w/ PE, media 
queries and feature queries.
Traditional layouts w/ CSS Grids: (2 articles, very concrete)
     - Holy grail layout
     - 12-columns layout

Glossary entries (w/ graphics):
     Grid Lines
     Grid Tracks
     Grid Cell
     Grid Area
     Gutters
     Grid row
     Grid column


-- 
Jean-Yves Perrier
Senior St. Project Manager, Developer Documentation / MDN

0
Jean
1/9/2017 2:26:49 PM
mozilla.dev.mdc 2323 articles. 0 followers. Post Follow

0 Replies
57 Views

Similar Articles

[PageSpeed] 44

Reply: