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====
Flexbox vs Grid
1. Flexbox: content dictates layout
2. Grid: container dictates layout (to some extent)
<[Flexbox is great, it just isn't the best thing for overall page layouts.
Flexbox and grid play well together, and are a huge step forward from the float & table hacks they replace. The sooner we can use them both in production, the better.]>
%%(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))