phloe

The following outlines a technique combining floating blocks and inline-blocks allowing for fairly interesting layouts without the need to use nested rows and avoids some problems when using pure floats.

The technique itself only uses three classnames:

• combine-layout - defines the containing element.
• break - starts a new row when in floating block context.
• divide - starts off the inline-block context.

phloe

@media (min-width: 768px) {

	.dredition .dredition-desktop-style-100-40 .dredition-item-image, .dredition .dredition-desktop-style-50-40 .dredition-item-image, .dredition .dredition-desktop-style-33-40 .dredition-item-image, .dredition .dredition-desktop-style-66-40 .dredition-item-image {
		min-width: 200px;
		flex: 1 0 calc((0.38197 * 100%) - 20px);
	}
	
	.dredition .dredition-item .dredition-item-header {
		flex: 1 0 calc((0.61803 * 100%) - 20px);
	}

phloe

Keybase proof

I hereby claim:

• I am rasmusfl0e on github.
• I am rasmusfl0e (https://keybase.io/rasmusfl0e) on keybase.
• I have a public key ASDsAUrlKDKsRp5uwjRwQbbS0DJGdS4Hb_pTzxjB9IgCmgo

To claim this, I am signing this object:

phloe

import URL from "url-parse";

import ratioHelper from "./ratioHelper";
import { quantize, interpolate, normalize, clamp } from "./math";

var dprMin = 1; // min dpr to get highest quality
var dprMax = 2; // max dpr to get lowest quality
var dprRanges = [
	/*{
		min: 3,

phloe

Proper separation of concerns

Let's say you need to add a button to a subscription form.

The naive pee-your-pants way

<button style="background-color: red; width: 200px;">Subscribe</button>

phloe

slayout: 10px 4 / 4 2 2,
         (min-width: 640px) 20px 12 / 6 (+3) 3 (-3) 3;

phloe

{
  "articleHits": 25,
  "totalHits": "25",
  "articles": [
    {
      "origId": "5f9a0b76-8621-4605-a232-355082314ce2",
      "imageId": null,
      "title": "Dansk og svensk forsvar vil samarbejde",
      "tags": [
        

phloe

A nice clean example of the revamped picture proposal:

<figure>
	<picture>
		<source media="(min-width: 45em)" srcset="large-1.jpg, large-2.jpg 2x">
		<source media="(min-width: 18em)" srcset="med-1.jpg, med-2.jpg 2x">
		<source srcset="small-1.jpg, small-2.jpg 2x">
		<img src="small-1.jpg" alt="" width="200" height="200">
	</picture>

phloe

<dr-section headline="Prioriterede nyheder" muteheading>
	<dr-layout span="12">
		<dr-layoutcolumn span="8">
			<dr-teaser span="8" imagespan="8" model="" />
		</dr-layoutcolumn>
		<dr-layoutcolumn span="4">
			<dr-teaser span="4" imagespan="4" model="" />
			<dr-teaser span="4" imagespan="4" model="" />
		</dr-layoutcolumn>
	</dr-layout>

phloe

TL;DR

<img src="/path/to/foo-320w-240h-1x.jpg" width="320" height="240"
    srcoptions="/path/to/foo-{width}-{height}-{dpr}.{format},
    320w 480w 640w, 1x 1.33x 2x, webp jpg"/>

• DRY - Expose url pattern and avaliable options for images - not full urls - in markup. Browser picks best options - builds url.
• Responsive images need CSS to get layout. Browser preloading is a pre-RWD optimization. Preloading doesn't make sense with upcoming postpone and lazyload attributes anyway.
• Client Hints can't be used exclusively. Has server requirement and needs alt. way of handling CH - anyway - when server req. can't be met.