Новенький VPU дизайн

[Full-R]

Я доработал идею дизайна и верстки без использования media queries исключительно на view port units.

 

Вот что получилось: https://revolvercmf.ru/

 

У сайта как таковой мобильной версии нет. Я просто использовал CSS 3 calc() и CSS 4 variables. Получилось не плохо и дизайн смотрится идентично на разных разрешениях экрана. PX и EM в архитектуре дизайна не используются вообще, а кроме того не использован сложный flex-box. Используются %, vw и vh. Прошу оценить верстку, интерфейс и дизайн(это основная тема оформления моего open source contents management framework).

Вот статья про VPU scalable  interface на английском:

https://revolvercmf.ru/en-US/vpu-intreface-scale-factor/

 

Edited October 7, 2020 by Full-R

[Full-R]

Я оптимизировал верстку, но на CSS зависли 80 иконок для интерфейса в SVG завернутые в base_64. Применять их пока некуда, но может пригодятся. 

 

Вот что у меня получилось по результатам:

 

 

 

Я не знаю как победить Google Page Insights - он как будто игнорирует все хорошие манеры оптимизации специально. У меня сделан preload на графику и lazy load одновременно, а Google штрафует меня за анимацию загрузки контента и готовности DOM. Это не справедливо. В то же время GT Metrix, который использует тот же page insights показывает показатели 98%.

Подскажите что еще можно оптимизировать?

 

Edited October 10, 2020 by Full-R

[Full-R]

Я убрал из стилей все статические величины. Больше нет ни каких PX, EM, PT и так далее. У прототипа VPU интерфейса работают только view port юниты и проценты. Шрифты выполнены также в VPU.

Вот  скриншоты работы прототипа при разных размерах окна браузера и в разрешениях 1024x768 и 1600x900. Также VPU интерфейс будет отлично смотреться на экранах 4k и 8k. Теперь сайты не будут слишком мелкими или вылазящими за пределы окна  браузера с горизонтальной прокруткой.

 

 

Считаю, что интерфейсы основанные на View Port юнитах являются будущим верстки в свете непрерывного роста разрешений экрана устройств просмотра, а также великолепно оптимизируются под мобильные устройства. Пора media queries на свалку истории.

Edited October 14, 2020 by Full-R

[Full-R]

Сделал переключение цвета в ночной режим автоматически с 20:00 до 8:00. Работает противоположный часовой пояс для стимуляции жизни 🙂 Что можно улучшить?

Тема теперь написана полностью на CSS variables и она является частью framework. Теперь можно почти не верстая получить свое оформление поменяв variables(их 40 для настройки цветов и оттенков). Я не могу себе позволить делать бесплатные разнообразные шаблоны так как это мой хлеб(система и так бесплатная). Если кому надо  пусть сами верстают и все переделывают под себя. Я думаю вынести эти vars в базу данных и сделать color picker'ы для того, чтобы настраивать дизайн.

 

 

p.s.: форум какой-то мертвый стал.