Wednesday, February 8, 2017

Responsive Design Explorations

Responsive Website Basics (in 3 simple steps) - DevTips 

working draft:

Responsive Web Design Navigation - CodeCourse


Responsive Web Design: Media Queries - CodeCourse

   Responsive Web Design: Understanding The Viewport - CodeCourse

    Responsive Web Design: Viewport Units - CodeCourse    (

    Responsive Websites With The Foundation 5 Grid - CodeCourse

    or see the entire playlist:

Destraction: The box model for button design. (
The Box Model, Box-sizing & Box-shadow - DevTips)

HTML/CSS 12 Point Grid:

Grid Theory:

Grid Application:
HTML/CSS: How to layout your website on a 12-column grid - Chris Lam
HTML/CSS: How to layout your website on a 12-column grid (Part 2)- Chris Lam

( Gridding: From Wireframe to HTML (part 1)

HTML/CSS: Wireframe to Grid (Part 2)

HTML Structure, Classes, IDs, and CSS

  W3CSchools Responsive Web Design - Grid View

 broad overview including cell, track, and area 



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

Chris Lam's example, when modified, gives something like a 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 


I want CSS grid layout instead of just css flex box layout ,

Revised Subgrid specification 

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

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


Examples: ,


  1. See Mozilla's Grid Inspector: