Process: responsive design - all sites rev 14 oct 2019 Canonical process for responsive elements in all sites - WP or no. https://www.webfx.com/blog/web-design/understanding-the-elements-of-responsive-web-design/ ....................................................... done and canonical: See the_plugins.html for overview of theme status. See drongo theme file for details on themes per site. process-website-wp_all-drongo_theme.txt ....................................................... Debugging: see file. ....................................................... How-tos: ......................... images: see file in folder. ......................... tables: see file in folder. ....................................................... viewport or * https://www.w3schools.com/css/css_rwd_viewport.asp * https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag * https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html * https://www.quirksmode.org/mobile/viewports2.html * https://stackoverflow.com/questions/11006812/html5-boilerplate-meta-viewport-and-width-device-width ....................................................... techniques: ......................... Techniques for sizing: * "Trojan horse": Good ol’ font-size, hooked up to EM based units. https://medium.com/@simurai/sizing-web-components-8f433689736f * An idea: px at the Root, rem for Components (Modules), em for text Elements At a certain medium size, everything looks fine. Scaling up, you can get to a point where the main articles are a good big size, but the sidebar stuff doesn't need to be that big. With this system it would be easy to target them and notch them back down. Scaling down, those sidebar modules get a bit too small too fast, so you could notch them back up easily. There might even be sizes where you equalize things because you've gone single column (or the like). -- https://css-tricks.com/rems-ems/ * px at document level: Setting your font-size at document level using an absolute unit overwrites the user’s browser settings -- safe to say this is a bad practise. Instead, use a relative unit, like so: html { font-size: 100%; }. -- comment - https://css-tricks.com/rems-ems/ Once rem is available, I think it wrong to use px for anything else than borders or seperators. It should not be used for fonts anymore. My rational : Rem makes it possible to handle both : browser zoom && user font-size setting. – with zoom we want to make everything bigger. – with font-size change, we want only the fonts bigger. To make only the fonts bigger mean that the layout wont get larger or narrower. When the font-size setting is changed then all “em” sized stuff are changed, but not the rems. From that I have the following basic strategy : – em for fonts and anything that is relative to fonts. – rem for widths. All the stuffs that shouldn’t get change when the user font-size is changed. So generally it is the layout width, the columns and blocks width. Generally, we want the container to expand down, but no get larger. -px almost bannished, and used only for borders, because we want usually round numbers for those. Super simple strategy, and works well for me on IE9+ browsers. Also it opens up the doors for manipulating the font-size programatically. -- comment - https://css-tricks.com/rems-ems/ [2014] SZRImaging Permalink to comment# April 9, 2014 rem, by my understanding, just makes doing the math easier. A rem is always based off of the HTML size, if I remember correctly, so no mater how many elements in you are nested, it behaves the same and predictably. Think of it as declaring a scope for what em uses to base it’s math off of. Where as, nesting em can start to have unwieldy consequences as you nest more and more elements. In simple sites, a relative non-issue, but in some of the more complicated ones managed by lots of people, em becomes a real pain. -- comment - https://css-tricks.com/rems-ems/ [2014] Rems for text Ems for things that have a relationship to that rem (eg padding on a button should be relative to the text size of the button) also ems for margins on text based things % for layout % or PX for gutters/margins on layout elements – Gutters between columns for example have no relationship to the size of a font. -- comment - https://css-tricks.com/rems-ems/ [2014] don’t apply font-size changes to containers – only to elements themselves. That way you’re alway calculating on the base HTML font size – and you could achieve a lot of the same overall flexibility that way to change the base and have it ripple across. -- comment - https://css-tricks.com/rems-ems/ [2014] * discussions: https://css-tricks.com/rems-ems/ ....................................................... root element - :root - the html element: "The HTML element represents the root (top-level element) of an HTML document, so it is also referred to as the root element." https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html "The :root CSS *pseudo-class* matches the root *element* of a tree representing the document. In HTML, :root represents the element and is identical to the selector html, except that its specificity is higher." https://developer.mozilla.org/en-US/docs/Web/CSS/:root https://css-tricks.com/almanac/selectors/r/root/ * Can use :root inside media queries as well. https://www.madebymike.com.au/writing/using-css-variables/ ....................................................... html vs body The HTML element is effectively the viewport (browser window visible area) the body element is the actual content of the page. 1. The html and body elements are distinct block-level entities, in a parent/child relationship. 2. The html element's height and width are controlled by the browser window. 3. It is the html element which has (by default) overflow:auto, causing scrollbars to appear when needed. 4. The body element is (by default) position:static, which means that positioned children of it are positioned relative to the html element's coordinate system. 5. In almost all modern browsers, the built-in offset from the edge of the page is applied through a margin on the body element, not padding on the html element. The HTML root element () represents the root of an HTML or XHTML document. All other elements must be descendants of this element. The HTML Body () element represents the main content of an HTML document. There is only one element in a document. -- https://stackoverflow.com/questions/23560084/css-body-width-100-percent#answer-23560156 http://phrogz.net/css/htmlvsbody.html "The phrogz.net article is simply wrong. That's really not how it works at all. The html element is a block-level element which can be styled pretty much like any other block level element (including applying display:inline; it you so wish!) "Your page is painted on a canvas of (logically) infinite dimensions which has an origin at point (0, 0). The browser has a viewport which shows an area of the canvas. There exists a rectangular block called the Initial Containing Block whose top left hand corner is at (0, 0) and has a height and width equal to that of the viewport. The root element's position and dimensions can be specified relative to the Initial Containing Block, just as any other block element's position and dimensions can be specified relative to its containing block. -- https://stackoverflow.com/questions/18160174/css-root-element-margin ....................................................... Sizing and font-size: * percent or px in html/body ? actually the parent of body is html. so body { font-size: 100%; } will be 100% of the html's font size, not the browser default. Usually these are one in the same, though, https://stackoverflow.com/questions/6803016/css-100-font-size-100-of-what * leave the body font-size alone entirely, just define everything in ems in the elements. https://www.filamentgroup.com/lab/how-we-learned-to-leave-body-font-size-alone.html [2012] (So i'm thinking, just to be explicit, define as 100%. but again - for html, or in body, element? Something to check: "The value of 1em, when used in a CSS3 Media Query such as @media (min-width: 20em), is unaffected by the font-size of the body element in most browsers. This means that if we change the font-size of the body to something other than 100%, we will need to calculate em values differently when they're used in a media query than in a CSS property value. " https://www.filamentgroup.com/lab/how-we-learned-to-leave-body-font-size-alone.html [2012] * how big is an em? The default base font size is usually 16px. so 1em usually equals 16px. .5em is half of 1em, so could be 8px. BUT An em is relative to font-size of containing (for a font), or of parent (for a block) (see below). https://www.lifewire.com/how-big-is-an-em-3469917 You can use it both horizontally and vertically. The use of ems for all design elements ensures scalable designs. https://www.w3.org/Style/LieBos3e/em * what are the measurement units? Px are fixed. browser user can't make smaller/larger. think of people with visual difficulties. - The default base font size is usually 16px. - "A pixel has nothing to do with a real pixel on your screen. It's actually an angular measurement." - "Devices do try to normalize the physical size that "1px" is despite their screen density. https://css-tricks.com/why-ems/ - “Pixel units are relative to the resolution of the viewing device, (most often a computer display)." http://inamidst.com/stuff/notes/csspx Em for font-size: relative to the font-size of the parent element. for blocks: relative to font size of the containing element - in the stylesheet and in the user font-size setting. - can get problematical when nested. - you can set margin, padding, width, height, even border-radius, with ems. it works. Rem - relative to font-size of the "root element" only. (meaning ... html? body? :root? ) - not affected by the change of the user font-size setting. - (and there is no compounding) https://www.sitepoint.com/understanding-and-using-rem-units-in-css/ percent for font-size: relative to the parent font-size. for blocks: relative to the containing block - usually the body, a div, or a table, https://www.w3schools.com/CSSref/css_units.asp https://www.w3.org/Style/Examples/007/units.en.html https://www.sitepoint.com/power-em-units-css/ * percent or em (or rem?) ? it looks like (below) everybody is using ems. not seeing anything about percents. http://css-discuss.incutio.com/wiki/Em_Vs_Percent_Widths https://blueprintdigital.com/font-sizes-in-responsive-design/ http://css-discuss.incutio.com/wiki/Em_Vs_Percent_Widths https://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984 https://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/ ....................................................... dynamic css variables: * https://www.madebymike.com.au/writing/using-css-variables/ * https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries * https://codepen.io/Ash/pen/KVvZoP * https://codepen.io/Yuschick/post/getting-dynamic-with-css-variables-media-queries * css variables can only be used in property and element values - so far. [2018] (they are working on expanding them, so they could be used in e.g., media queries. For now, we can do this: * Getting Dynamic with CSS Variables and Media Queries Redefining variables dynamically in the css. https://codepen.io/Yuschick/post/getting-dynamic-with-css-variables-media-queries Daniel Yuschick [12 oct 2017] CSS variables are ‘living’ values that can change with their environment. > A variable’s value can update based on @media queries. > That new value will apply throughout the project wherever it is being used. // Example: :root { --max-input-width: 250px; } @media screen and (min-width: 750px) { :root { --max-input-width: 500px; } } "Now, as I scale my app between various breakpoints (because that's exactly what casual, everyday users do) my :root-scoped variables update and cascade down with their latest value." This means you don't have to redefine, say, each input width in each media query. You just redfine the variable, and it will be changed in the definition wherever that variable is used, throughout the stylesheet. This. is. cool. [oct 2019] _______________________________________________________ .Do .Do-webwork .Do-theme since: 21 aug 2018 -- 0 --