Jump to content

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


Recommended Posts

Я доработал идею дизайна и верстки без использования 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 by Full-R
Link to post
Share on other sites

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

 

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

 

Отчет GT Metrix по оптимизации front-end в RevolveR CMF

 

security-headers-check-revolver-CMF.jpg

 

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

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

 

Edited by Full-R
Link to post
Share on other sites

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

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

 

VPU-scale-interface-1.thumb.jpg.49406a09b1840e68be345b6ff32a7661.jpgVPU-scale-interface-1024.thumb.jpg.4daa9a2ad0cbead7031918cc9af6c7fc.jpgVPU-scale-interface-1600.thumb.jpg.21d7330e5653e08261f967889f1da0c3.jpg

 

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

Edited by Full-R
Link to post
Share on other sites

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

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

 

NoGJ9yozwRk.thumb.jpg.c2c943e228b584855bfae0f1c567961c.jpg

 

lIQOr0InYMM.thumb.jpg.db3c4dac245bcfbd6aa7b9638bec6741.jpg

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Member Statistics

    47,165
    Total Members
    1,451
    Most Online
    LilyK
    Newest Member
    LilyK
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Свежие Темы

  • Последние сообщения

    • Метод call дал возможность greet вызвать саму себя? очему во втором console.log не происходит вывод 18? Ведь я передал через конструктор аргумент 18. Здесь решил попробовать наследование. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Тест</title> </head> <body> <p id="result"></p> <script> let Person =function(name,age,gender){ this.name = name; this.age = age; this.gender = gender; // return this; }; Person.prototype.greet= function(){ console.log("My name is " + this.name); }; let Son = function(age,skils){ this.skils = skils || []; Person.apply(this,arguments) } Son.prototype = Object.create(Person.prototype); Son.prototype.constructor = Son; let a = new Person("Петя",25,"female"); let b = new Son(18,["рисует","поет","водит"]); console.log(a.age); console.log(b.age + b.skils); </script> </body> </html>  
    • Как легко начать работу на VPS?  Специальное предложение от Tucha Друзья, выбираете shared-хостинг или VPS для сайта и почты? Мы поможем! Виртуальный хостинг (или шаред-хостинг) в облаке на базе сервиса TuchaHosting — решение, которое лучше всего подходит для размещения: ·       веб-сайтов с умеренной нагрузкой; ·       корпоративной почты небольшого объёма. Сервис поможет безопасно разместить ресурсы и обеспечить им стабильную и быструю работу по бюджетной стоимости. В статье напоминаем более подробно обо всех преимуществах shared-хостинга TuchaHosting и множестве его дополнительных полезных возможностей: https://tucha.ua/ru/blog/services/tuchahosting-luchshee-reshenie-dlya-kachestvennogo-khostinga-saytov-i-pochty Если же для почты уже нужен отдельный почтовый сервер или необходимо разместить в облаке высоконагруженный веб-сайт, например: ·       большой корпоративный портал; ·       интернет-магазин с высокой нагрузкой; ·       масштабный сайт-каталог, рекомендуем VPS на базе сервисов TuchaBit, TuchaBit+ или TuchaFlex+. Виртуальные серверы обеспечат бесперебойную работу ресурсов и их отказоустойчивость даже при высоких нагрузках. А для лёгкого старта работы на виртуальных серверах дарим выгодные условия! При заказе акционных конфигураций VPS до 08.02.2021 включительно вы получаете скидку 10 евро* на оплату первого счёта. Специальный промокод — TD-226-0. Чтобы воспользоваться предложением, звоните +380 44 583-5-583 или пишите по адресу sales@tucha.ua  Мы всегда на связи и поможем подобрать решение именно для вас! *В гривнах по курсу НБУ на первое число текущего месяца.
    • Грубо говоря, потому что new просто создает новый объект на основе конструктора, а Object.create – с указанием прототипа. В первом случае в объекте tom инициализируются свойства name, age и gender, но у него не будет определен метод greet. // it's ok tom.name; tom.age; tom.gender; // but Person.greet.call(tom); Во втором случае (Object.create) метод greet будет найден в цепочке наследования (у прототипа).
  • Popular Contributors

    Nobody has received reputation this week.

×
×
  • Create New...