Ankhena

1) Линии через path.
2) Круги на местах соединений - через svg элемент<marker>.
3) Анимацию тегом animate.

<svg viewBox="0 0 140 140" width=100vw height=100vh>
  <defs>
    <marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
        <circle cx=5 cy=5 r=3 />
    </marker>
  </defs>
  <path d="M20 20 L30 40 L70 20 L90 80" fill="none" stroke="red" marker-start=url(#markerCircle) marker-mid=url(#markerCircle) marker-end=url(#markerCircle)>
    <animate 
           attributeName="d"
           values="M20 20 L30 40 L70 20 L90 80;
               M20 40 L30 10 L70 60 L90 110;
               M10 10 L15 80 L120 70 L150 75;
               M20 20 L30 40 L70 20 L90 80"
           dur="20s"
           repeatCount="indefinite"
           />
  </path>
</svg>

UPD: круги через svg marker

Как то так

firstDay: 1,
dayNames: [ "Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота" ],
dayNamesMin: [ "Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб" ],

Мне вообще не ясно как так можно настраивать игнорируюя документацию и примеры.

замени весь свой wrapper

.wrapper{
  width: 700px;
  columns: 2;
}

Вот ты с выделением ячейки справился. Молодец. Теперь задай для выделенной ячейки 8 теней синего цвета и позиционируй как надо.

input[type="radio"]:checked + label {
    background: #FF0000;
    box-shadow: 60px 30px 0 0 blue, 60px -30px 0 0 blue;
    position: relative;
    z-index: 1;
}

Можешь даже анимацию задать для тени

label {
    transition: ease box-shadow .3s;
}

Как добиться подобной трансформации?

С помощью свойства transform
1) Устанавливаете перспективу
2) Поворачиваете элемент вкруг оси Y

Результат:
https://codepen.io/hisbvdis/pen/OJLKmrv

Укажите дополнительные классы к основному: https://codepen.io/semzhukov/pen/PoYvvMx

Тут паси - https://creativemarket.com/search?q=isometric
Да, платно. Но раз в неделю бесплатная раздача, жди и обязательно изометрик будет в раздаче, я так изометриков надыбал уже вагончик)))

Freepik, конкретнее - ищите по запросу 'isometric'

Дополнительного ПО не нужно.

· можно просто напрямую скинуть ссылку на весь проект (пример), которая открывается в современных Chrome и Firefox (Safari ни разу не пробовал)
· можно настроить командный доступ для совместной работы
· можно экспортировать в JPG, PNG
· можно сделать экспорт файла проекта (.FIG)

Update: если дать ссылку, у верстальщика не будет возможности посмотреть свойства, цвета объектов, не будет возможности экспортировать иконки, картинки и т. д. Поэтому самый оптимальный вариант — совместная работа или файл (если дизайн не будет претерпевать дальнейших изменений).

Для фигур можно задать значения ширины в vw:
width: 10vw; //10% от видимо ширины
И аналогично расположить их:

top: 10vh; 10% от видимой высоты
left: 10vw; 10% от видимо ширины

И добавить медиа-запросы, чтобы при определённом размере экрана они скрывались:

@media screen and (max-width: 960px) {
display: none; //при максимальной ширине 960px элемент скроется
}

В ms edge не работает сочетание свойств transition и min-height: calc()

rangesliderjs
refreshless

Ключи генерируются на каждой новой системе вручную
Есть официальная инструкция, как их генерить и как добавлять в аккаунт
Ссылка

Можно пойти по долгому пути с использванием псевдоэлементов, а можно в одну строку это сделать.

Результат:
https://codepen.io/hisbvdis/pen/yLBvoar

В Vue приложении используем препроцессор (scss). Кроме того используем внешние пакеты для вертикального ритма и сетки.

Хочется хранить стили в однофайловых компонентах, при этом имея возможность определить глобально часть sass-переменных, кое-какие миксины и функции. Также нужно как-то подключить миксины сетки и ритма, возможно подключать стили от сторонних пакетов.

Вариант импортировать scss-файл с определениями в каждом компоненте сразу откинули, ибо люди мы ленивые.

Что делаем:
Подключаем в точке входа (main.js) основной стилевой файл:

import '@/styles/main.scss';
import Vue from 'vue';
//...

В нем подключаем всякое-разное-глобальное-базовое:

@import "base/normalize";
@import "base/init";
@import "base/typography";
@import "base/code";
@import "base/links";
@import "base/tables";
@import "base/buttons";
@import "base/control-group";
@import "base/general-form";
@import "parts/transitions";
...

Далаем два файла: env-development.scss и env-production.scss

$NODE_ENV: development;
@import "cfg-vars";

$NODE_ENV: production;
@import "cfg-vars";

Переменная $NODE_ENV нам нужно. чтобы управлять стилями в зависимости от окружения.
Дальше в cfg-vars.scss подключаем/пишем все необходимые глобальные конфиги

$DEV_MODE: $NODE_ENV == development;
$MAX_INT32: 2147483647;

@import "cfg-vrhythm";
@import "cfg-grid";
@import "../../../node_modules/vrhythm/source/vrhythm";
@import "../../../node_modules/bs-grid-system/source/scss/bs-grid";
@import "../mixins";
@import "cfg-z-indexes";

$wt-family-base: "Open Sans", sans-serif;
$wt-family-head: "Roboto Slab", serif;
$font-family-monospace:  "Fira Code", Menlo, Monaco, Consolas, "Courier New", monospace;

//==
//== Color palette
//== ======================================= ==//

$palette-light-blue: #3c8dbc; // Primary
$palette-red       : #dd4b39; // Danger
$palette-green     : #00a65a; // Success
$palette-aqua      : #00c0ef; // Info
$palette-yellow    : #f39c12; // Warning

...

Почти всё готово. Осталось только автоматически подключить эти конфиги к сборке.
Идём в vue.config.js и добавляем секцию css:

const NODE_ENV = process.env.NODE_ENV === 'development'
    ? 'development'
    : 'production';
//...
module.exports = {
    //...
    css: {
        extract: NODE_ENV === 'production',
        loaderOptions: {
            sass: {
                data: `@import "@/styles/config/env-${NODE_ENV}.scss";`,
            },
        },
    },
};

Теперь мы спокойно пишем стили компонентов на scss прямо vue-файлах, и оставляем возможность какие-то стили писать в отдельных файлах.

Enjoy!

https://www.figmafreebies.com/
https://www.figmacrush.com/

Вводите в поиск: Figma templates — находите кучи сайтов.

UPDATE. Ещё в Community можно смотреть.