A template for essential CSS Media Queries to include.

CIID-CSS-MediaQueries-Temple.css

@charset "UTF-8";

/* ~~~>>> Summary <<<~~~
 * screen (px)
 *   <640     : small phones
 *   641-1280 : large phones, tablets
 *   1281+    : desktops
 */

@media only screen
 {
 }

@media only screen and (max-width: 640px)
 {
 }

@media only screen and (min-width: 641px)
 {
 }

@media only screen and (min-width: 1281px)
 {
 }

@media only screen and (prefers-color-scheme:light)
 {
 }

@media only screen and (prefers-color-scheme:dark)
 {
 }

/* CIID-CSS_Classes-Temple.css */

/* ~~~>>> Summary <<<~~~
 *     
 * fixed and persistent document elements
 *     header, footer, nav, main …
 * content boxes
 *     article, aside, div 
 * effects
 *     depth, deference, accessibility
 *     text/font
 *     color, shadows
 *     animation, transition
 */

/* ~~~>>> Notages <<<~~~
 * - 
 *     - 
 * - theme
 * - color scheme
 * - layout
 * - html structure
 */


.container-box
 {
   display:;
   position:;
   top:; right:; bottom:; left:;
   z-index:;
   float:; clear:;
   
   margin:;
   border-width:;
   padding:;
   max-width:;
 }
.content-box {}

.container-box.light
 {
   border-color:;
   background-color:;
   box-shadow:;
 }
.container-box.dark {}

.content-box.light {}
.content-box.dark {}