Salesforce, Python, SQL, & other ways to put your data where you need it

Need event music? 🎸

Live and recorded jazz, pop, and meditative music for your virtual conference / Zoom wedding / yoga class / private party with quality sound and a smooth technical experience

Responsive, accessible navigation 6: More flexbox?

10 Feb 2021 🔖 jamstack web development
💬 EN

  • Play w/ adding a new a.topnav__body__actionable { display: block; } to _nav.scss.
  • Edit _grd.scss so a grdCell, by default, has a max-width: 100%;, since otherwise its flex-shrink: 0; property will let it force horizontal scrolling, and since I’m going to want to put grdCell on all the elements onto which I put topnav__body__outeritem (all of which have some very long text buried within).
  • Add an extra div around the for-loop in nav.liquid with a class of grdGrid and then add a grdCell class to every element that already has a topnav__body__outeritem class.

Screenshot, inline A, no inner Grd yet

Screenshot, block A, no inner Grd yet

Screenshot, inline A, using inner Grd

Screenshot, block A, using inner Grd

Screenshot, block A, using inner Grd, small screen

So far, so good. I wouldn’t call it easy to read, but the idea that “outer items” try to pack in as far up & left as possible, while still “wrapping” when they run out of room in the frame, seems to be implemented.

(See this commit on GitHub)

Other than look & feel (e.g. highlighting things visually for hover/active; making things big enough to tap), this is probably about as far as I can go w/o starting to branch into “mobile” vs. “desktop” and “javascript” vs. “noscript.”

Wireframe, screens where nav has every element 100% width

Wireframe, screens where nav elements try to be side-by-side

--- ---