xmoonlight

тут

Для 4K нужно использовать изображения высокого разрешения, шрифты и отступы должны адаптивно сайзиться так, чтобы не портить удобство UI/UX.
Всё это делается либо через отношения размеров (calc() и дроби: пример), либо проценты высчитываются при формировании таблицы стилей и "жёстко" прописываются при создании вёрстки (создаётся фиксированная сетка разрешений экрана).

Плитка критериев: цвет, размер и ниже - плитка изображений, согласно критериям.

Если CMS требует строго заданного именования css-классов при вёрстке макета в шаблон, то это плохая CMS, и ею не нужно пользоваться.

Всё должно обрабатываться с помощью генерации шаблона через серверный код нужного блока вывода и нужный js-код для обработки событий после рендеринга на стороне клиента (в браузере).

CMS: ourcms.info
Статейки: https://profiphp.ru/

Но, представим, что есть такая задача, где в каждой секции имеется определенный контент в достаточном объеме, который надо вместить на любой экран без обрезки.

Вы что курите?!))

Самый простой вариант: text-overflow

Забросить это и заказать именно вёрстку на фрилансе.
Или учить здесь.

Многое зависит от того, как должна работать "растяжка" при резиновой вёрстке: сайзим шрифты или нет?

Вообще: calc(), vmin, vmax, vw, vh (и процентов для вложенных блоков) должно хватить для "удержания" всех размеров без видоизменения внешнего вида на разных мониторах и разрешениях.

1-й вариант: Html/css + flexbox
(bootstrap - это абстракция)

Здесь полное руководство.

1. Про изображения: тут.
2. Делите секции так: 1920, 1280, 800, 320.
(Prev=Start=320, Next=Prev+ ~500).
3. Разметка - на флексах.
4. Шрифты - своя, более мелкая сетка для выравнивания строк (вертикальный ритм).

PHP - Динамическая генерация шаблона страниц (в зависимости от логики в PHP-коде).
HTML - Статическая вёрстка шаблона страниц (сервер при этом - не участвует).

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

Как мне видится по боковому, слева (как единственно возможный вариант!): бэкграунд со стилизацией тенью приподнятого слоя "шторки" с тем же цветом, что и фон меню, но так, чтобы не забирать место и не мешать чтению контента. Т.е. некую "золотую" середину надо найти.

includeHTML
Создаёте простую HTML-ку с iframe/скриптами (если нужно) и просто вставляете тег.
Файл в теге будет загружен параллельно/асинхронно.

cover

WYSIWYG-редактор и к нему пишем свой css-шаблон для представления текста в поле редактирования (или ищем готовый для данного редактора и скачиваем).
Самые популярные: TinyMCE и CKEditor.

Ссылка->блок->блок->ссылка.