Responsive Design Explorations

Responsive Website Basics (in 3 simple steps) - DevTips 
(https://www.youtube.com/watch?v=h3IdEqpjMvQ)

Specification: https://www.w3.org/TR/css-device-adapt-1/
working draft: https://drafts.csswg.org/css-device-adapt/

Responsive Web Design Navigation - CodeCourse
(https://www.youtube.com/watch?v=nQK0kz65wpo)

   Responsive Web Design: Media Queries - CodeCourse
   (https://www.youtube.com/watch?v=KX94fPaKqaU)

   Responsive Web Design: Understanding The Viewport - CodeCourse
   (https://www.youtube.com/watch?v=XrMTuTzX4co) 

    Responsive Web Design: Viewport Units - CodeCourse    (https://www.youtube.com/watch?v=Ul1Sqxb-mFQ)

    Responsive Websites With The Foundation 5 Grid - CodeCourse
    (https://www.youtube.com/watch?v=TUHQ6ltDi44)

    or see the entire playlist:
     (https://www.youtube.com/watch?v=XrMTuTzX4co&list=PLfdtiltiRHWEzMJ3vc_lU2bAVf4JVOfzU)


Destraction: The box model for button design. https://www.youtube.com/watch?v=GvIP6QtCVSg&spfreload=5 (The Box Model, Box-sizing & Box-shadow - DevTips)

HTML/CSS 12 Point Grid:

Grid Theory:
http://www.creativebloq.com/web-design/grid-theory-41411345


Grid Application: 
HTML/CSS: How to layout your website on a 12-column grid - Chris Lam
(https://www.youtube.com/watch?v=BZ0Js9hjaB8) 
HTML/CSS: How to layout your website on a 12-column grid (Part 2)- Chris Lam

(https://www.youtube.com/watch?v=Q17nvi9cFBo)HTML/CSS Gridding: From Wireframe to HTML (part 1)
(https://www.youtube.com/watch?v=_8fZMR6Y-dA)

HTML/CSS: Wireframe to Grid (Part 2)
(https://www.youtube.com/watch?v=ViEAsAfBB9I) 

HTML Structure, Classes, IDs, and CSS
(https://www.youtube.com/watch?v=oCy5FhqSPmI)

  W3CSchools Responsive Web Design - Grid View 

 http://www.w3schools.com/css/css_rwd_grid.asp

 broad overview including cell, track, and area 

(https://www.youtube.com/watch?v=3J9cCAnDeCs)

 

---break --- something entirely new ??...

Chris Lam's example, when modified, gives something like a line printer.

Modification: https://github.com/bshambaugh/12-column-grid-video1
(https://en.wikipedia.org/wiki/Line_printer).
 

I can apparently only break in one dimension (along the row). But what if I want to break upon the column and the row, so that the design below is not cut up into sections?

 

This illustration shows this design does not split well along the column:

So try: 
Manuel Rego - CSS Grid Layout is Just Around the Corner  

(https://www.youtube.com/watch?v=9js_5MjiGFo) 

I want CSS grid layout instead of just css flex box layout
https://www.w3.org/TR/css-grid-1/ , https://www.w3.org/TR/css-flexbox-1/

Revised Subgrid specification 

https://rachelandrew.co.uk/archives/2016/04/25/a-revised-subgrid-specification/

https://rachelandrew.co.uk/archives/2015/02/04/css-grid-layout-creating-complex-grids/ 

to get the complex grids to work you may need to include the grid polyfill:

https://github.com/FremyCompany/css-grid-polyfill

or enable in the firefox web browser with: layout.css.grid.enabled

Reference: https://igalia.github.io/css-grid-layout/enable.html

Examples: https://igalia.github.io/css-grid-layout/index.html , http://gridbyexample.com/