iOS 14 widgets

index.html

<h1>Click on an app to change its widget state.</h1>

<div class="iphone-shell">
  <div class="iphone">
    <div class="topbar">
      <div class="topbar__left">3:13</div>
      <div class="topbar__right">4G</div>
    </div>
    <div class="apps apps--main">
      <div class="app" style="--widget: #0471E6;">
        <div class="app__icon"><img src="https://cdn.jim-nielsen.com/ios/512/facebook-2019-05-21.png" /></div>
        <div class="app__name">Facebook</div>
        <div class="widget-window widget-window--light">actions here...</div>
      </div>

      <div class="app" style="--widget: #3F8DC9;">
        <div class="app__icon"><img src="https://cdn.jim-nielsen.com/ios/512/twitter-2013-10-08.png" /></div>
        <div class="app__name">Twitter</div>
        <div class="widget-window widget-window--light">actions here...</div>
      </div>

      <div class="app app--widget app--widget--box" style="--widget: #006AC2;">
        <div class="app__icon"><img src="https://cdn.jim-nielsen.com/ios/512/microsoft-outlook-email-calendar-2016-01-22.png" /></div>
        <div class="app__name">Outlook</div>
        <div class="widget-window widget-window--light">
          <div class="apps">
            <div class="app"><i class="fas fa-pen"></i></div>
            <div class="app"><i class="fas fa-inbox"></i></div>
            <div class="app"><i class="fas fa-search"></i></div>
            <div class="app"><i class="fas fa-sync"></i></div>
          </div>
        </div>
      </div>

      <div class="app" style="--widget: #29292A;">
        <div class="app__icon"><img src="https://cdn.jim-nielsen.com/ios/512/stocks-2018-04-25.png" /></div>
        <div class="app__name">Stocks</div>
        <div class="widget-window widget-window--light">actions here...</div>
      </div>

      <div class="app app--widget app--widget--tall" style="--widget: #1dd55f;">
        <div class="app__icon"><img src="https://cdn.jim-nielsen.com/ios/512/spotify-music-2015-07-30.png" /></div>
        <div class="app__name">Spotify</div>
        <div class="widget-window widget-window--light">
          <div class="apps">
            <div class="app"><i class="fas fa-backward"></i></div>
            <div class="app"><i class="fas fa-play"></i></div>
            <div class="app"><i class="fas fa-forward"></i></div>
          </div>
        </div>
      </div>

      <div class="app" style="--widget: #1AAAF8;">
        <div class="app__icon"><img src="https://cdn.jim-nielsen.com/ios/512/weather-2017-06-19.png" /></div>
        <div class="app__name">Weather</div>
        <div class="widget-window widget-window--light">actions here...</div>
      </div>

      <div class="app">
        <div class="app__icon"><img src="https://cdn.jim-nielsen.com/ios/512/maps-2017-10-10.png" /></div>
        <div class="app__name">Maps</div>
        <div class="widget-window">actions here...</div>
      </div>

      <div class="app" style="--widget: #5D60B6;">
        <div class="app__icon"><img src="https://cdn.jim-nielsen.com/ios/512/microsoft-teams-2019-03-21.png" /></div>
        <div class="app__name">Teams</div>
        <div class="widget-window widget-window--light">actions here...</div>
      </div>

      <div class="app app--widget app--widget--long">
        <div class="app__icon"><img src="https://cdn.jim-nielsen.com/ios/512/chrome-web-browser-by-google-2016-01-25.png" /></div>
        <div class="app__name">Chrome</div>

        <div class="widget-window">
          <div class="apps">
            <div class="app"><i class="fas fa-window-restore"></i></div>
            <div class="app"><i class="fas fa-user-secret"></i></div>
          </div>
        </div>
      </div>

      <div class="app" style="--widget: #FFE01B;">
        <div class="app__icon"><img src="https://cdn.jim-nielsen.com/ios/512/mailchimp-marketing-crm-2020-02-26.png" /></div>
        <div class="app__name">Mailchimp</div>
        <div class="widget-window">actions here...</div>
      </div>

      <div class="app" style="--widget: #000;">
        <div class="app__icon"><img src="https://cdn.jim-nielsen.com/ios/512/netflix-2018-11-01.png" /></div>
        <div class="app__name">Netflix</div>
        <div class="widget-window widget-window--light">actions here...</div>
      </div>
    </div>
  </div>
</div>

ios-14-widgets.markdown

iOS 14 widgets

Based on a concept design from Dribbble (https://dribbble.com/shots/11587660-iOS-Widgets-for-iPhone) on what iOS 14 home screen widgets could look like. Very dimmed down version, but the idea is there.

A Pen by Mark Eriksson on CodePen.

License.

script.js

console.clear();

document.querySelectorAll(".apps--main > .app").forEach((app) => {
  app.addEventListener("click", function (e) {
    let widgetState = "";
    let newWidgetState = "";

    if (app.classList.contains("app--widget")) {
      widgetState = [...app.classList].filter((x) =>
        x.startsWith("app--widget--")
      )[0];
    }

    if (widgetState === "") {
      newWidgetState = "long";
    } else if (widgetState === "app--widget--long") {
      newWidgetState = "tall";
    } else if (widgetState === "app--widget--tall") {
      newWidgetState = "box";
    } else {
      newWidgetState = "";
    }

    if (newWidgetState) {
      app.classList.add("app--widget");
      app.classList.add(`app--widget--${newWidgetState}`);
    } else {
      app.classList.remove("app--widget");
    }

    if (widgetState) app.classList.remove(widgetState);
  });
});

style.scss

.iphone-shell {
  background-color: #000;
  padding: 5px;
  border-radius: 15px;
  box-shadow: 0 10px 42px -12px rgba(0, 0, 0, 0.7);
}

.iphone {
  padding-top: 30px;
  width: 320px;
  height: 580px;
  border-radius: 15px;
  background: url(https://fsb.zobj.net/crop.php?r=5SuaNgr02ixxWxB6b8gm07woEzZr2xbIle4vXCnbzQIZgO3BAYosya1PHxtEwVXytv98HlqTkDbULdorR2shL5a5AVBYH4Af2_pcn6f3RJUBIAvCLcrif_RZQQxVgQT2ftoRPim2FNNh_DYG)
    no-repeat;
  background-size: cover;
  position: relative;

  &::after {
    content: "";
    background-color: #000;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 22px;
    width: 160px;
    border-radius: 0 0 10px 10px;
  }
}

.apps {
  padding: 24px 18px 20px;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  display: grid;
  column-gap: 20px;
  row-gap: 40px;
  grid-template-columns: repeat(4, 1fr);

  &.apps--main {
    grid-template-rows: repeat(auto-fill, 56px);
  }
}

.app {
  position: relative;

  &__icon {
    img {
      max-width: 100%;
      display: block;
      cursor: pointer;
      border-radius: 15px;
    }
  }

  &__name {
    color: #fff;
    font: {
      weight: 500;
      size: 12px;
    }
    letter-spacing: 0.62px;
    text-align: center;
    margin-top: 5px;
    position: absolute;
    top: 100%;
    width: 100%;
    text-align: center;
  }

  &--widget {
    .widget-window {
      display: block;
    }

    .apps {
      width: 100%;
      height: 100%;
      place-items: center;

      .app {
        cursor: pointer;
      }
    }

    &--long {
      grid-column: span 2;

      .apps {
        grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
      }
    }

    &--tall {
      grid-row: span 2;

      .apps {
        grid-template-columns: auto;
      }
    }

    &--box {
      grid-row: span 2;
      grid-column: span 2;

      .apps {
        grid: 1fr 1fr/1fr 1fr;
      }
    }

    .app__icon {
      --size: 22px;
      position: absolute;
      top: calc(var(--size) * -0.5);
      left: calc(var(--size) * -0.5);

      img {
        height: var(--size);
        width: var(--size);
        border-radius: 5px;
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
      }
    }

    .app__name {
      text-align: left;
    }
  }
}

.widget-window {
  border-radius: 15px;
  background-color: var(--widget, #fff);
  height: 100%;
  width: 100%;
  padding: 10px;
  display: none;

  &--light {
    color: #fff;
  }

  .apps {
    gap: 5px;
    padding: 0;
    overflow: visible;
  }
}

.topbar {
  display: flex;
  position: absolute;
  top: 0;
  width: 100%;
  color: #fff;
  font-weight: 600;
  justify-content: space-between;
  padding: 5px 18px;
}

/* resets etc etc below */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[class*="fa-"] {
  font-size: 18px;
}

body {
  display: grid;
  place-items: center;
  height: 100vh;
  grid-template-rows: 100px auto;
}

body,
html {
  font-family: "Helvetica";
  font-size: 13px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />