View source for Responsive Design

Device-Agnostic Approach To Responsive Web Design

{{toc numerate=1}}

===Basics===

  1. WikiPedia: ((https://en.wikipedia.org/wiki/Responsive_web_design Responsive Web Design))
  1. Google: ((https://developers.google.com/web/fundamentals/design-and-ux/responsive/ Responsive Web Design Basics ))
  1. CSS-Tricks: ((https://css-tricks.com/optimizing-large-scale-displays/ Optimizing for Large-Scale Displays))
  1. ((https://www.creativebloq.com/rwd/pros-guide-responsive-web-design-71515692 The pro's guide to responsive web design))
  1. ((https://www.smashingmagazine.com/2012/03/device-agnostic-approach-to-responsive-web-design/ Device-Agnostic Approach To Responsive Web Design))
  1. ((https://internetingishard.com/html-and-css/responsive-design/ Responsive Design))

===Viewport===

file:viewport.svg

The viewport meta tag tells the device at what scale to render the page.

##<meta name="viewport" content="width=device-width, initial-scale=1">##
%% @viewport {
   width: device-width;
   zoom:1;
} %%

((https://www.mediaevent.de/css/viewport-mobile.html Viewport Mobile))
((https://www.mediaevent.de/css/media-queries.html Media Queries))
W3C: ((https://drafts.csswg.org/mediaqueries/ Media Queries Level 4))
((https://www.mediaevent.de/css/breakpoints.html CSS Breakpoints))

Tests
  1. ((https://search.google.com/test/mobile-friendly Mobile-Friendly Test))
  1. http://quirktools.com/screenfly/

====Browser Support====
https://caniuse.com/css-deviceadaptation

====Resources====

  * W3C: ((https://drafts.csswg.org/css-device-adapt/ CSS Device Adaptation Module Level 1))
  * Mozilla: ((https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag Using the viewport meta tag to control layout on mobile browsers))
  * quirksmode.org: ((https://www.quirksmode.org/mobile/viewports.html A tale of two viewports))

===Layout===
file:/layout_order_page.svg

((https://www.lukew.com/ff/entry.asp?1514 Multi-Device Layout Patterns))

===Markup===
%%(hl html)
<!DOCTYPE html>
<div class="wrapper">
  <header>...</header>
  <main>
     <article>...</article>
     <nav>...</nav>
     <aside>...</aside>
  </main>
  <footer>...</footer>
</div>
%% 

===CSS===

((https://cssguidelin.es/ CSS Guidelines))
((https://meiert.com/en/blog/how-to-order-css-selectors/ How to Order CSS Selectors))

====Units====
=====Em=====
##target ÷ context = result##

So with our formula in hand, let’s turn back to that ##24px## headline. Assuming that our base font-size: ##100%## on the body element equates to ##16px##, we can plug those values directly into our formula. So if we need to express our ##h1##’s target font size (##24px##) relative to its context (##16px##), we get:

##24 ÷ 16 = 1.5##

And there we are: ##24px## is 1.5 times greater than ##16px##, so our font-size is ##1.5em##:


%%(css)
h1 {
  font-size: 1.5em; /* 24px / 16px */
  font-style: italic;
  font-weight: normal;
}

%%


#|
*| Browser default considered as :root {font-size:16px} |*
*| Pixel | Em | Percent | Keyword | Notes |*
|| 8px | 0.5em | 50% |  | ||
|| 9px | 0.5625em | 56.25% |  | ||
|| 10px | 0.625em | 62.5% | x-small  | ||
|| 11px | 0.6875em | 68.75% |  | ||
|| 12px | 0.75em | 75% |  | ||
|| 13px | 0.8125em | 81.25% | small  | ||
|| 14px | 0.875em | 87.5% |  | ||
|| 15px | 0.9375em | 93.75% |  | ||
|| 16px | 1em | 100% | medium  | ||
|| 17px | 1.0625em | 106.25% |  | ||
|| 18px | 1.125em | 112.5% | large  | ||
|| 19px | 1.1875em | 118.75% |  | ||
|| 20px | 1.25em | 125% |  | ||
|| 21px | 1.3125em | 131.25% |  | ||
|| 22px | 1.375em | 137.5% |  | ||
|| 23px | 1.4375em | 143.75% |  | ||
|| 24px | 1.5em | 150% | x-large  | ||
|| 26px | 1.625em | 162.5% |  | ||
|| 28px | 1.75em | 175% |  | ||
|| 30px | 1.875em | 187.5% |  | ||
|| 32px | 2em | 200% | xx-large  | ||
|| 34px | 2.125em | 212.5% |  | ||
|| 36px | 2.25em | 225% |  | ||
|| 38px | 2.35em | 235% |  | ||
|| 40px | 2.5em | 250% |  | ||
|| 42px | 2.625em | 262.5% |  | ||
|| 44px | 2.75em | 275% |  | ||
|| 46px | 2.875em | 287.5% |  | ||
|| 48px | 3em | 300% |  | ||
|#

Tools
  1. ((https://websemantics.uk/tools/convert-pixel-point-em-rem-percent/ Convert pixel-point-em-rem-percent))
  1. ((https://websemantics.uk/tools/responsive-font-calculator/ Fluid-responsive font-size calculator))


=====Resources=====
  * W3C: https://www.w3.org/TR/css-values-3/#relative-lengths
  * CSS-Tricks: ((https://css-tricks.com/rems-ems/ Font Size Idea: px at the Root, rem for Components, em for Text Elements))
  * ((https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/ Size Matters: Balancing Line Length And Font Size In Responsive Web Design))
  * ((https://mindtheshift.wordpress.com/2015/04/02/r-i-p-rem-viva-css-reference-pixel/ R.I.P. REM, Viva CSS Reference Pixel!))
  * ((https://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984 Comprehensive Guide: When to Use Em vs. Rem))

====Breakpoints====
%% 
@media screen and (min-width:1200px) {
    body { font-size:110%; } /* Increase the font size */
}
@media screen and (min-width:1400px) {
    html { padding:0 15%; } /* Reduce the container width */
}
@media screen and (min-width:1600px) {
    body { font-size:125%; } /* Increase the font size */
}
@media screen and (min-width:1800px) {
    html { padding:0 20%; } /* Reduce the container width */
}
%% 


====Flexbox====

%%(hl CSS)
main { display: flex; }
main > article { order: 2; min-width: 12em; flex:1; }
main > nav     { order: 1; width: 200px; }
main > aside   { order: 3; width: 200px; }
%%

%%(hl css)
@media all and (max-width: 600px) {
  /* Too narrow to support three columns */
  main { flex-flow: column; }
  main > article, main > nav, main > aside {
    /* Return them to document order */
    order: 0; width: auto;
  }
}
%%
=====Browser Support=====
https://caniuse.com/flexbox

=====Resources=====
  * W3C: ((https://www.w3.org/TR/css-flexbox-1/ CSS Flexible Box Layout Module Level 1))
  * CSS-Tricks: ((https://css-tricks.com/snippets/css/a-guide-to-flexbox/ A Complete Guide to Flexbox))

https://www.mediaevent.de/css/display-flex.html
https://www.mediaevent.de/tutorial/flexbox.html

====Grid====

%%(hl css)
main { display: grid;
       grid: "h h h"
             "a b c"
             "f f f";
       grid-template-columns: auto 1fr 20%; }
article { grid-area: b; min-width: 12em;     }
nav     { grid-area: a; /* auto min-width */ }
aside   { grid-area: c; min-width: 12em;     }
%%

%%(hl css)
@media all and (max-width: 60em) {
  /* Too narrow to support three columns */
  main { display: block; }
}
%%

Examples
  1. ((https://codepen.io/rachelandrew/pen/HbwiI Responsive Layout with Grid – line-based placement))
  1. ((https://codepen.io/rachelandrew/pen/joxHG Grid Template Areas))

=====Browser Support=====
https://caniuse.com/css-grid

=====Resources=====
  * W3C: ((https://www.w3.org/TR/css-grid-1/ CSS Grid Layout Module Level 1))
  * CSS-Tricks: ((https://css-tricks.com/snippets/css/complete-guide-grid/#grid-introduction A Complete Guide to Grid))

===Typography===
====Font Size====
%%(hl css)
html {font-size: 100%;}
%% 
====Leading (Line Height)====

====Measure (Line Length)====
**45 to 85 characters**
An estimate for optimal line length: between ##45## and ##75-85## characters (including spaces and punctuation), with ##65## the “ideal” target value.

##1rem = 1character##
Using a rough estimate of 1rem = 1character, we can control the flow of text for a single column of content.

%%(hl css)
.container {
  width: 100%;
}

@media (min-width: 85rem) {
  .container {
    width: 65rem;
  }
}
%%

====Hyphenation====

====Resources====
  * ((https://www.slideshare.net/slideshow/embed_code/27460071 Responsive Typography))


===Helpers===


===Frameworks===
  1. ((https://bulma.io/documentation/overview/responsiveness/ Bulma))
  2. ((https://picturepan2.github.io/spectre/index.html Spectre.css))
  3. ((https://foundation.zurb.com/ Foundation))
  4. ((http://getbootstrap.com/ Bootstrap)) - > build a theme for R6 
  5. ((https://getuikit.com/ Ulkit))
  6. ((https://semantic-ui.com/ Semantic UI))